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. Todo App
  6. Lesson 6: Bringing the pieces together to build the App

Lesson 5: Assembling the Pieces to Build the App

In the previous lessons, we have set up:

  • A Runtime action to perform CRUD operations for to-do items
  • CreateTodoList React component to create a to-do list
  • Todo React component to display and update a to-do item
  • TodoList React component to display to-do items

In this lesson, we'll build the actual App to manage to-do lists. We'll create the React component file under web-src/src/components/ and name it App.js.

We'll start by importing our components:

import { CreateTodoList } from './CreateTodoList'; import { TodoList } from './TodoList';

Import React Spectrum components

This component will make use of several React Spectrum components:

  • Provider, the container of the React Spectrum application.
  • defaultTheme, the default React Spectrum theme.
  • ProgressCircle, the loading indicator.
  • View, a generic container.
  • Flex, for the layout of the loading indicator.
  • Grid, for the layout of the todo lists.
  • Repeat, a helper function for Grid.
import { Provider, defaultTheme, View, Flex, Grid, repeat, ProgressCircle } from '@adobe/react-spectrum';

Component property

The component will accept a single property, the ims information that we'll pass to the Runtime action for authentication:

function App({ ims }) { // ... }

Component state values

On initialization, the App will display a loading indicator while fetching the todo lists. For the loading indicator and the to-do lists, we'll use the State hook useState again.

const [isLoading, setIsLoading] = useState(true); const [todoList, setTodoList] = useState([]);

Action function callbacks

To communicate with the Runtime action, we'll create a simple utility function with two parameters:

  • The expected CRUD operation.
  • The sent data, that is, the to-do list name or todo object.

First, besure to import the config.json which contains the URL to your Runtime action.

import actions from '../config.json';

Then, inside the App, we'll define the utility function with the ims information:

const action = async (operation, body = {}) => { const res = await fetch(actions['todolist'], { method: 'POST', headers: { 'Content-Type': 'application/json', 'x-gw-ims-org-id': ims.org, authorization: `Bearer ${ims.token}` }, body: JSON.stringify({ operation, ...body }) }); return await res.json(); };

Finally, we'll use the utility function inside callback functions that we're going to pass as prop to the components we have built in the previous lessons:

const onCreateTodoList = async (name) => { if (!todoList.find(({ name: todoListName }) => name === todoListName)) { setTodoList([{ name, todos: [] }, ...todoList]); console.log(await action('create', { name })); } }; const onDeleteTodoList = async (name) => { setTodoList(todoList.filter(({ name: toDeleteName }) => name !== toDeleteName)); console.log(await action('delete', { name })); }; const onUpdateTodoList = async (name, todo) => { console.log(await action('update', { name, todo })); };

Loading indicator

By default, we'll be showing a ProgressCircle to indicate that the App is loading. Meanwhile, the to-do lists will be fetched using an Effect Hook which will run only once when the App is mounted.

Once we've retrieved the to-do lists, well update the to-do list state and set the loading state to false:

useEffect(() => { (async () => { const { todoList } = await action('read'); if (todoList) { setTodoList(todoList); setIsLoading(false); } })(); }, []);

With React Conditional Rendering, we can easily define what will be rendered based on the isLoading state. Once the state value is set to false, we'll display the CreateTodoList from lesson 3 and pass the onCreateTodoList callback function as prop:

<View elementType="main" minHeight="100vh"> {isLoading ? ( <Flex alignItems="center" justifyContent="center" height="100vh"> <ProgressCircle size="L" aria-label="Loading…" isIndeterminate /> </Flex> ) : ( <View height="size-800" marginY="size-400"> <CreateTodoList onCreate={onCreateTodoList} /> ... </View> )} </View>

Rendering to-do lists

Next to CreateTodoList, we'll also render the to-do lists. For that, we're going to use the React Spectrum Grid component. As in the previous lesson, we'll iterate over the todoList array using the map() function to render each item as TodoList component:

<Grid columns={repeat('auto-fit', 'size-3400')} autoRows="size-6000" justifyContent="center" gap="size-200"> {todoList.map((list) => ( <TodoList key={list.name} todoList={list} onDelete={onDeleteTodoList} onUpdate={onUpdateTodoList} /> ))} </Grid>

Since to-do list names are unique, we're using the name as key prop. We're also passing the todoList object and the onDelete, onUpdate function callbacks as props to the TodoList component.

Full component

Finally, we'll wrap the App inside the React Spectrum Provider with the default theme set to light, which corresponds to the Experience Cloud Shell main content theme.

<Provider theme={defaultTheme} colorScheme={`light`}> ... </Provider>

See the full component code here.

App