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. Customer Dashboard
  6. Lesson 4: List All Customer Profiles on the UI

Lesson 4: List All Customer Profiles on the UI

The app UI is powered by React Spectrum by default. To learn more about React Spectrum, please consult the React Spectrum Code Lab.

In the previous lesson, customer profiles were loaded to the front end only when you click the "Invoke" button. Now we want the profiles loaded automatically on the Home page when the page is ready, with no human interaction.

We will use the componentWillMount method to initiate loading profiles, and store the loaded data in profiles parameter of the component's state. We use <Flex> and <Grid> from React Spectrum to lay out spectrum components on the page. Each entry of the customer profiles returned by the get-profiles action is displayed with first name, last name, and email of the customer. You may also apply CSS styling in the index.css file to improve its appearance.

Below is the complete code of Home.js:

import React from 'react' import PropTypes from 'prop-types' import { Flex, Grid, ProgressCircle, Heading, Text, View } from '@adobe/react-spectrum' import actions from '../config.json' import actionWebInvoke from '../utils' class Home extends React.Component { constructor (props) { super(props) this.state = { actionResponseError: null, actionInvokeInProgress: false, profiles: null } } async componentWillMount () { this.setState({ actionInvokeInProgress: true }) const headers = {} const params = {} // set the authorization header and org from the ims props object if (this.props.ims.token && !headers.authorization) { headers.authorization = 'Bearer ' + this.props.ims.token } if (this.props.ims.org && !headers['x-gw-ims-org-id']) { headers['x-gw-ims-org-id'] = this.props.ims.org } try { const actionResponse = await actionWebInvoke(actions['get-profiles'], headers, params) this.setState({ profiles: actionResponse.body.content, actionResponseError: null, actionInvokeInProgress: false }) console.log(`action response:`, actionResponse) } catch (e) { console.error(e) this.setState({ profiles: null, actionResponseError: e.message, actionInvokeInProgress: false }) } } render () { const profiles = this.state.profiles console.log(`profiles object:`, profiles) return ( <View> <Heading level={1}>Customer Profiles</Heading> <Flex UNSAFE_className='profiles'> <ProgressCircle UNSAFE_className='actions-invoke-progress' aria-label='loading' isIndeterminate isHidden={ !this.state.actionInvokeInProgress }/> { !!profiles && <Grid> {profiles.map((profile, i) => { return <Flex UNSAFE_className='profile'>Name: { profile['firstName'] } { profile['lastName'] } - Email: { profile['email'] } - Date of birth: { profile['birthDate'] }</Flex> })} </Grid> } { !profiles && <Text>No profiles!</Text> } </Flex> </View> ) } } Home.propTypes = { ims: PropTypes.any } export default Home

Note: For simplicity, we are displaying only the first page of the result. In a real environment with hundreds of profiles, results are returned in batches, so you will need to handle pagination of data accordingly.

The Home component above requires the ims object in its propTypes to get the IMS context for calling the back-end actions, including the access token and org ID. This object is passed from the App component, so it has to be updated accordingly in the App.js file.

<Home ims={props.ims} />

Since your app is already running because you ran aio app run in the previous lesson, you can see the updated UI by refreshing the webpage at https://experience.adobe.com/?devMode=true#/apps/?localDevUrl=https://localhost:9080.

ui-profiles