Custom appearance and functionality

You can alter the way the Admin App backend UI looks and feels and what activities you can complete on a global level, no matter whether you are editing content, managing it, or doing anything else in the backend UI. The samples, described below, help you do just that. Learn more about the Admin App custom theme in GitHub.

Custom theme for the Admin App backend UI

To make the Admin App backend UI easier to work with, texts clearer, and appearance more colorful, you can modify specific components of the user interface. For example, you may need to abide to corporate branding and colors. To do so, you create a custom theme for the Admin App backend UI. You can customize the following components:
  • Button colors in terms of border, background, and text color
  • Secondary text, such as notes and descriptions of UI elements
  • Input placeholder text, such as hints for input fields

You can also set an outline style for all UI focusable elements, for example, buttons or input fields, and so on.

Custom dialogs

Say your workflow or team specifics require explicit confirmation for exact custom operations that require additional user output, for example Print preview dialog before printing. With the help of this sample, you can have custom dialogs displayed to users in content edit mode or when operating with items in the content lists. For example, to make sure whether the content they are citing is not copyrighted.

Custom fields

Content comes in many forms, such as text, media, or content fields. Content fields provide additional means to categorize or enrich the content, for example with tags, extra information, or with related content. With the Custom field sample, you can replace any of the default content fields with a new custom one and on top of that define the field’s appearance. For example, you are publishing a newsletter for medical professionals. You may need new content fields via which you relate an image of a doctor to an article about Medical research or a field that provides information about related medical publications that is visualized in a specific way.

Next steps

Let’s expand the medical publications examples above. Say you are including a citation but you need to include an author and a photograph. You can implement a button in the text editor that upon clicking displays a custom dialog, from which you can choose the name of the citation with a predefined list with doctors. You also include images from the author’s publications from an image upload dialog, along with fields with explanatory captions. You can do this with the help of a dropdown if the number of options is not that big, or, in case of a long list, use autocomplete. Suppose you are including a highly detailed image – you can implement a dialog that displays a zoomed in or full screen version of the image.

Suppose you also need to include the medical institution or university, where the research was conducted. You can include a field that enables autocomplete on entering characters. The autocomplete functionality would retrieve the data from an external data source to provide suggestions, for example, BMA (British Medical Association).

If you only provide a preview of the medical publication, you can enable readers to purchase the whole paper by integrating with an “inventory” system search in an external database via a barcode or product number. Naturally these options can be leveraged in a myriad of other scenarios, like ecommerce sites. 

Was this article helpful?