customizeUI()

The customizeUI() function (client-side) changes either the title of a question modal or the look and feel of a submit modal during a configuration session.

Note:

If you use this function in asynchronous code, make sure you call scopeApply() or renderView() to refresh the user interface.

Syntax

The general syntax format for customizeUI() is:

            customizeUI(element, style);

Depending on the modal type you want to work with, use one of these syntax formats:

To customize a question modal, use:

                customizeUI(
    {
        type: 'question',
        code: 'QUESTION_CODE'
    },
    {
        modalTitle: string
    }
);

To customize a submit modal, use:

                customizeUI(
    {
        type: 'submit'
    },
    {
        progressColor: string,
        borderColor: string,
        text: string,
        fontFamily: string,
        fontType: string,
        fontSize: string
    }
);

Return Value

The customizeUI() function returns undefined.

Parameters

Note:

Required parameters:

element
style

The customizeUI() function accepts the following parameters:

element (object) - Specifies the type of modal to modify. This object includes the following properties:
- type (string) - Sets the modal type to change. This property can take the following values:
  - 'question' - Changes the question modal.
  - 'submit' - Changes the submit modal.
- code (string) - Specifies the code of the question modal to modify. You can find the question code in the Code field on the question record. This property is required for the question modal.
style (object) - Sets the style properties to apply to the modal.
- Question modal - The style property is modalTitle, which sets or changes the title of a modal question window.
- Submit modal - The style properties are the following:
  - progressColor - Sets the color of the progress bar. For example, you can use hexadecimal or RGB color values.
  - borderColor - Sets the color of the modal border. For example, you can use hexadecimal or RGB color values.
  - text - Defines the text displayed on the submit modal.
  - fontFamily - Sets the font family for the text, for example Arial or Times New Roman.
  - fontType - Sets the font weight, for example, bold.
  - fontSize - Sets the size of the text, for example, 1.2em or 10px.

Examples

The following examples show how to use the customizeUI() function.

Applying a Title to a Question Modal

The example sets a custom title for the modal of the color question.

              customizeUI(
    {
        type: 'question',
        code: 'SELECT_COLOR'
    },
    {
        modalTitle: 'Select color'
    }
);
renderView();

Applying Style Properties to the Submit Modal

This examples modifies the look and feel of the submit modal by changing its progress bar color, border color, and text, as well as the font properties.

              customizeUI(
    {
        type: 'submit'
    },
    {
        progressColor: '#ff0000',
        borderColor: '#ff0000',
        text: 'Saving quote...',
        fontFamily: 'Arial',
        fontType: 'bold',
        fontSize: '1.2em'
    }
);
renderView();

Syntax

Return Value

Parameters

Examples

Applying a Title to a Question Modal

Applying Style Properties to the Submit Modal

Related Topics