Global Navigation

  • Products
  • Overview
  • Getting Started
  • Guides
  • Resources
  • Console

Table of Contents

  • Introduction
    • App Builder Overview
    • What is App Builder
    • Business Case
    • FAQ
    • Community
  • Quick Start
    • App Builder Getting Started
      • Setting Up
      • Creating your First App
      • Publishing Your App
      • Troubleshooting
    • Runtime Getting Started
      • Overview
      • Activations
      • Deploy
      • Entities
      • How Runtime Works
      • Resources
      • Setup
      • Understanding Runtime
  • Develop
    • References
    • App Builder Guides
      • Architecture Overview
        • App Hooks
        • Introduction to React Spectrum
        • Using SDKs
      • Application State
      • Application Logging
        • Azure Log Analytics
        • New Relic
        • Splunk Cloud
        • Splunk Enterprise
      • Configuration
        • Webpack Configuration
      • Deployment
        • CI/CD for App Builder Apps
        • Credential Rotation
        • Setting Response Headers
      • Development
      • Distribution
      • Events
        • Webhooks
      • Exc App
        • Interfaces
          • Modules
          • Page ObjectWithHref
          • Page ObjectWithPath
          • Page PageAPI
          • Page PageAPIProperties
          • Runtime
          • TopBar Callback
          • TopBar CustomFeedbackConfig
          • TopBar CustomSearchConfig
          • TopBar ExternalFeedbackConfig
          • TopBar HelpCenterFeedbackConfig
          • TopBar Solution
          • TopBar TopBarAPI
          • TopBar TopBarAPIProperties
          • User UserAPI
          • User UserInfo
        • Migrate App to Exp Cloud SPA
        • Modules
          • Page
          • TopBar
          • User
      • Extensions
        • Extension Migration Guide
      • Optimization
      • Security
        • Understanding Authentication
      • Telemetry
    • Runtime Guides
      • Contribution Guide
      • Asynchronous Calls
      • Creating Actions
      • Creating REST APIs
      • CI/CD Pipeline
      • Debugging
      • Logging & Monitoring
      • Reference Docs
        • API Reference
        • CLI Usage
        • Configuring Proxy
        • Environment Variables
        • Feeds
        • Multiple Regions
        • Packages
        • Prepackages
        • Runtimes
        • Sequences & Compositions
        • Triggers & Rules
        • WSK Usage
      • Security General
      • Securing Web Actions
      • System Settings
      • Throughput Tuning
      • Tools
        • CLI Install
      • Troubleshooting
      • Using Packages
      • Using Runtime
    • Contribution Guide
  • Learning
    • Asset Compute Worker PS API
      • Requirements
      • Lesson 1: Create an app from Asset Compute template
      • Lesson 2: Configure the app
      • Lesson 3: Develop worker calling Photoshop API
      • Lesson 4: Integrate worker in AEMaaCS
      • Well done
    • Barcode Reader
      • Requirements
      • Lesson 1: Bootstrap a Headless App
      • Lesson 2: Writing a Serverless Action
      • Lesson 3: Unit and E2E Tests
      • Well done
    • Blog Articles
      • Blog Articles
    • CI/CD
      • Requirements
      • Lesson 1: Setup CI/CD
      • Lesson 2: Monitoring CI/CD
      • Lesson 3: Custom CI/CD workflow
      • Well done
    • Cron Jobs
      • Requirements
      • Lesson 1: Bootstrap a Headless App
      • Lesson 2: Set up Alarm Feed with Trigger and Rule
      • Lesson 3: Types of Alarm Feed
      • Well done
    • Custom Asset Compute Worker
      • Requirements
      • How AEM as Cloud assets works
      • Architecture of our worker
      • Configure services
      • Local environment setup
      • Implement the worker
      • Test the worker
      • Setup AEM to use the worker
      • Well Done
    • Customer Dashboard
      • Requirements
      • Lesson 1: Create a New App Builder App from Campaign Standard Template
      • Lesson 2: Explore the App Builder App
      • Lesson 3: Run the App Builder App Locally
      • Lesson 4: List All Customer Profiles on the UI
      • Lesson 5: Add Personalized Promotion Emails Triggering
      • Well Done
    • Debugging
      • Requirements
      • Lesson 1: Getting familiar with Debugger
      • Lesson 2: Debugging Application Code
      • Lesson 3: Managing Application Logs
      • Well Done
    • Event Driven
      • Requirements
      • Lesson 1: Create a New App Builder App from Template
      • Lesson 2: Register the App as Event Provider
      • Lesson 3: Fire an Event
      • Lesson 4: Consume Events
      • Well Done
    • Events Runtime
      • Requirements
      • Lesson 1: Step by Step Guide
      • Lesson 2: Verify the result
      • Well done
    • Journaling Events
      • Requirements
      • Lesson 1: Create an Event Provider using App Builder
      • Lesson 2: Create the Event Consumer using Journaling API
      • Lesson 3: End to end test
      • Well done
    • Sample Apps
      • Code Snippets
        • Caching HTTP responses
        • App Builder Files SDK
        • App Builder State SDK
        • I/O Events handler
        • Real-time data from Adobe Analytics API 1.4
    • Spectrum Introduction
      • Lesson 1: What is Spectrum ?
      • Lesson 2: Using Spectrum CSS
      • Lesson 3: Using React Spectrum
      • Lesson 4: Using React Spectrum in App Builder
      • Well done
    • Todo App
      • Requirements
      • Lesson 1: Create a New App Builder App with the React Spectrum template
      • Lesson 2: Setup Runtime actions
      • Lesson 3: Setup the CreateTodoList component
      • Lesson 4: Setup the Todo component
      • Lesson 5: Setup the TodoList component
      • Lesson 6: Bringing the pieces together to build the App
      • Well done
    • Videos
      • Overview
        • Introducing App Builder
        • Getting Started
        • Architecture
        • A Full Security Overview
        • User Journey
      • Exploring
        • Projects and Workspaces
        • React Spectrum
        • Custom Events
        • CI/CD
        • Debugging
        • Learning Resources
        • Dashboard Case Study
        • ODE Case Study
        • Deep Dive Use Cases
        • Live Wired Sneak
        • Softcrylic Partner Showcase
      • Developers Live
        • App Builder Deep Dive
        • Asset Compute Service Extensibility
        • Extend Adobe Experience Cloud
  1. Products
  2. Overview
  3. Resources
  4. Learning
  5. Events Runtime
  6. Lesson 1: Step by Step Guide

Lesson 1: Initialize an App Builder App Using a Template

If you don't have an App Builder app, please follow Create a New App Builder App from Template to create one. Make sure you have publish-eventin the template, and add I/O management APIin the console. Then run aio app deploy, and you should see this: publishevent

Here is the project set up at the Adobe Developer console: consoleproject

Event registration

  • Follow Register the App as Event Provider to register the event provider:

    aio event registration create 
    

    This will return a sample in JSON format. Make sure you select webhook. Here is an example of a .json file:

    {
      "name": "event-runtime-integration",
      "description": "test event runtime",
      "delivery_type": "WEBHOOK",
      "webhook_url": "https://io-webhook.herokuapp.com/webhook/testjie",
      "events_of_interest": [
          {
          "provider_id": "ccefc74d-9696-4b99-a799-f2d34a4189cd",
          "event_code": "eventrt"
          }
      ]
    }
    
  • After finishing the steps above, your terminal should show that you successfully created and registered the event. On Adobe Developer console, you will see your registration provider eventrt under the left bottom corner event: console-event

Create event consumer

We will use the generic App Builder template to modify the code that creates an event consumer, naming the action consume-event. After deploying the event, you will be able to set up the event registration runtime actions you deployed.

Here is some sample code that shows how to test the webhook feature:

function main(params) { console.log('user action is processing event ' + params.event); var event = params.event; var id = event.id; var event_processed = "Event Received And Processed :: " + JSON.stringify(params.event) return { body: event_processed, statusCode: 200, headers: { 'Content-Type': 'application/json' } }; }

Alternatively, you could use this one to create a webhook to send to Slack:

/* this is a sample action sent a message to slack */ var request = require('request'); /* default slackwebhook and channel add yours here and replace the TODO below */ var slackWebhook = "Your webhook"; var slackChannel = "your channel"; async function main (params) { /* print event detail */ console.log('in main + event detail: ', params.event); var returnObject = { statusCode: 200, headers: { 'Content-Type': 'application/json' }, body: "" }; /* handle the challenge */ if (params.challenge) { console.log('Returning challenge: ' + params.challenge); returnObject.body = new Buffer(JSON.stringify({ "challenge": params.challenge })).toString('base64'); return returnObject; } else { /* we need it to run asynchronously, so we are returning a Promise */ return new Promise(function (resolve, reject) { var slackMessage = " Event received: " + JSON.stringify(params); var payload = { "channel": slackChannel, "username": "incoming-webhook", "text": slackMessage, "mrkdwn": true, }; var options = { method: 'POST', url: slackWebhook, headers: { 'Content-type': 'application/json' }, body: JSON.stringify(payload) }; request(options, function (error, response, body) { if (error) { console.log("ERROR: fail to post " + response); reject(error); } else { console.log ("SUCCESS: posted to slack " + slackMessage); returnObject.body = new Buffer(JSON.stringify({ "slackMessage": slackMessage })).toString('base64'); resolve(returnObject); } }); }); } } exports.main = main

Note: An action used as event consumer does not need to be web: yes, and doesn't need require-adobe-auth: true in the manifest.yml file. Please make the necessary modifications to ensure your app's security.

Event runtime integration

  • With all the above set up, get your providerId and eventCode and return to your App Builder App to invoke a custom event like this: invoke-event

  • You should see this runtime action created in the user defined actions: user-define-action

  • Now add the event API to the project to set up the event registration: add-event

  • We registered eventruntime as our custom event provider, and you should see your registered event in this list: add-event

  • Subscribe to the "eventrt" event type: add-event

  • Generate the JWT service account credentials key pair: add-event

  • On the registration details page, provide the name and select the runtime user action created to set up event registration. Then select the user action from the dropdown of Runtime Actions. Since we previously created and deployed the consume-event, so choose it and click Save configured events. This creates an event registration with an event handler webhook pointing to your runtime action. add-event

  • If user enters aio runtime list to his aio cli it will show these entities created as part of the new flow of event registration: add-event