View source for Theme Cosmos - Building UI with DX API compliance

{{Design pattern|Title=Theme Cosmos - Building UI with DX API compliance|Description=Best practices for developing an application interface|Version=8.5|Applications=Pega Platform|Capability Area=User Experience|Owner=Beauchamp, mark}}

A headless application is composed of the architecture that separates the back-end layer from the front-end layer. Generally, this type of architecture is designed to share information with client-side applications via APIs. This approach will help a variety of front-end applications to consume the same APIs (which have a single source of business logic and workflows) and support multiple-channel implementations without rewriting the business logic code (back end).

DX API exposes powerful application capabilities of Pega Platform™, including case management, through a set of industry-standard REST APIs. The APIs are applicable to both server-to-client and server-to-server communication. The best practice for application development is to use the autogenerated UI of Pega Platform to minimize application implementation cost. DX API is a best practice for applications that must use a specific UI front-end technology to meet corporate standards or to integrate with a pre-existing customer front-end framework. Many of these use cases include external customer-facing journeys that can benefit from the power of Pega Platform back-end case capability, while maintaining the customer’s digital team’s standard front-end technology stack.

== Different development options ==
There are four different options to develop an application by using DX APIs, from a general approach to a more specific method:
{| class="wikitable"
|+DX API development methods
|Use OOTB Starter pack interpreter – Full case portal
|Use of the three full portal reference implementations in React, Angular, and Vue that DX API provides. You can find the starter packs at https://community.pega.com/digital-experience-api.
|-
|Customize starter pack
|Assess and leverage specific pieces of the starter pack. You can replace any components according to your requirement and styling.
|-
|Create custom interpreter
|Create an implementation from scratch by calling out-of-the-box APIs with a UI structure or flat fields data and render the UI accordingly.
|-
|Hard Code API calls
|Build your own forms with only JSON data from APIs. The implementation contains hard-coded calls from the UI to the relevant APIs.  
'''This option is not recommended as logic is built in the channel.'''
|}

== Understand DX API requests and responses ==
DX API returns both data and UI-related meta data for Pega Platform UI. The best initial step to learn the Pega Platform UI model is to construct the application in App Studio. If the front-end implementation selection is a generic metadata interpreter, changes made in the UI designer will immediately appear in the DX API-driven front-end code changes. Pega Platform UI model consists of pages, layouts, controls, and actions.  

== Understand layout and controls ==
Learn the UI elements for layouts and controls that are supported in Pega Platform and the corresponding DX API metadata that is returned to the client for each UI element type.

For example, the email field is displayed with a text box and configured as mandatory. You need to understand what control the field uses and whether the control is required with the response provided in the DX API.

== Modularize and reuse the code for rendering of layouts and controls ==
When you understand the API response, build modules to render the individual UI elements for layouts and controls in the front-end UI framework. Utilizing a generic metadata interpreter and a common set of technology-specific UI element modules allows you to reuse between disparate application screens.

== Sources and references ==
https://community.pega.com/digital-experience-api

https://community.pega.com/knowledgebase/articles/pega-digital-experience-dx-api-version-1-overview/pega-digital-experience-dx-api-version-1-overview 

https://community.pega.com/knowledgebase/articles/user-experience/85/pega-digital-experience-dx-api 

https://community.pega.com/knowledgebase/articles/data-and-integration/creating-custom-screens-digital-experience-apis