Categories

System Admin
DXM
Documents
Data

Links

User Profile App – Customization

Customization

Every customer has their own set of styles and color palettes, their own logos, branding and marketing information which should be added into applications or posts. Some clients may also want additional security added like Assurance Images and/or Messages and Duo Authentication.

Customizations can be made by changing various components of the app configuration or styling configuration.

Some examples of customization include:

Adding Extra Security Settings

Adding Two-Factor Authentication Setup (if required)

  1. Click the Configuration tab.
  2. Click the <> (JSON) icon.
  3. Click the > (right) arrow to open the pane full-width
  4. In the UI pane on the left, click Components. You will notice a Disabled Actions section which currently includes 2FA Setup, Assurance Setup and Impersonation.

To activate any of these options, delete them from the disabled actions sections, or if all of them are to be activated, delete the whole disabledActions JSON section.

Note: If you delete the whole "disabledActions" section, ensure you delete the comma before the next section starts also.

There are 2 ways to add elements to the Components section, either using the UI or by adding JSON.

Using the UI
  1. In the UI pane on the left, click Components.
  2. Click the edit icon to see the UI instead of the JSON.
  3. Click Add Element+.

Note: Deleting any one, or all of the Assurance, Mfa Setup and Impersonation options from the Disabled Actions, will automatically display all top level Elements relating to these, but the lower level elements along with their prompts (or button text) must be added.
  1. Click Select All, then click Save. All the additional options will need to be selected, elements added and text included for prompts and buttons.
  1. Click Mfa Setup.
  2. Click Card Props
  3. Change the Subtitle placeholder text to something more user-friendly like “Set up Two-Factor Authentication below”.
  4. Click Save.
  5. Add a comment, then click Confirm.

A green Saved pop up bar will display across the bottom of the screen.

  1. Click Components > Mfa Setup again.
  2. Add text to all the prompt fields.
  3. Click Save.
  4. Add a comment, then click Confirm.

A green Saved pop up bar will display across the bottom of the screen.

The following setups do not need to be done in any specific order, but for this example, start with Call setup.

  1. Click Mfa Setup Call.
  2. Click Add Element+.
  3. Click Select All.
  4. Click Save.
  1. Add prompt text for each field – click Activate Call Authentication > Enable in the Preview pane to see where the prompts are used.
  2. Click Save.
  3. Add a comment, then click Confirm.

A green Saved pop up bar will display across the bottom of the screen.

The same process needs to be repeated for Mfa Push Setup and Mfa Text Setup.

  1. Click Components > Mfa Setup Push .
  2. Click Add Element+.
  3. Click Select All.
  4. Click Save.
  1. Add prompt text for each field – click Activate Push Authentication > Enable in the Preview pane to see where the prompts are used. (If prompt text is not added, the default text will be used, e.g. the Finish button text)
  2. Click Save.
  3. Add a comment, then click Confirm.
A green Saved pop up bar will display across the bottom of the screen.
  1. Click Components > Mfa Setup Text .
  2. Click Add Element+.
  3. Click Select All.
  4. Click Save.
  1. Add prompt text for each field – click Activate Text Authentication > Enable in the Preview pane to see where the prompts are used. (If prompt text is not added, the default text will be used, e.g. the Finish button text)
  2. Click Save.
  3. Add a comment, then click Confirm.
A green Saved pop up bar will display across the bottom of the screen.

Changing a Button Label

Change the “Save Details” button to “Update Details”

  1. Click the Configuration tab.
  2.  Click the <> (JSON) icon.
  3. Press Command/Ctrl F to search for the appropriate text.

Or click the Components tab and scroll through to the applicable section.

  1. Click the > (right arrow) to open the pane to full width.
  2. Change the text in the quotes from “Save Details” to “Update Details”.
  1. Click Save.
  2. Type in a comment, then click Confirm.

A green Saved bar will display across the bottom of the screen and the button text will be updated in the Preview screen.

Changing a Color

Color is part of the styling configuration meaning it is must be changed using the Styles tab.

Change Update Details button to red

  1. Click the Styles tab to begin.
  2. Click the <> (JSON) button.
  3. Click the > (right arrow) to open the pane fully.
  4. Press Command/Ctrl F to search for the appropriate text.

Or click on Theme and scroll to the appropriate section.

Note: There will be numerous instances if you search for "color" so make sure you select the appropriate one. You can also search for the color code or name if you know it.
  1. Select the color to change.
  2. Replace it with the appropriate color code or color name, in this example “red”.
  1. Click Save.
  2. Enter a comment, then click Confirm.

A green pop up Saved bar will display across the bottom of the screen.

The Update Details button will now be red in its disabled state.