Anatomy of a Custom App

The ADK gives you complete flexibility as it relates to building your Custom Apps - but what's required to actually build one? Let's take a look.

Front-end Code

Custom Apps are injected into the front-end of your environment at run-time, and evaluated after the initial page load - this means you'll have complete access to fully-initialized context, and need not worry about asset loading.

Using the management interface (Control Panel > App Development Kit > Add Custom App) you can easily add arbitrary markup which can include HTML, CSS, and JS. This forms the basis of Custom Apps.

These apps can then be easily added to any Homepage by a Homepage Admin.

Session State

Ambient state is available within the context of Custom App front-end code. This is easily accessed via global JS variables, with a primary entry point of window.interact.

Examples include:

  • PersonID - the Interact ID of the current user
  • ThemeID - the theme GUID for the current user
  • Language - the IETF language code for the current user

Theme Variables

Alongside information about the current user and session state, the active theme also exposes a large number of CSS variables for use in your Custom App, if desired.

For example, if I wanted to ensure my primary brand color was used to styling a button, I could use the following code:

button {
  background: var(--primary-brand); 
}

For a full list of the theme variables it's worth inspecting the ::root object in your browser's development tools, as we're constantly expanding what's available.

APIs

Our Public APIs are extensively documented on this site, so we recommend using the search functionality in order to find specific endpoints. There are also many endpoints that, while not publicly documented, are available. If you have specific use-cases which you believe may be supported but not documented, reach out to the Technical Support Team for more information.

Back-end Code

We strongly recommend utilizing only front-end code as part of the ADK, in order to ensure:

  • Security - while browsers enforce strict control over access to native APIs and data, as do our REST APIs, back-end code with complete access to data storage and more can pose elevated security risks.
  • Performance - errant code that includes something like an infinite loop running for a single user, could cause a knock-on performance impact for your environment.

If the risks above are deemed acceptable to your team, please reach out to your Customer Success Manager to discuss enabling the ADK Cloud Provisioning system for your environment (additional costs apply.)