TABLE OF CONTENTS

1. General configuration

The UI configuration file starts with the ---the  and then contains configuration elements:      

---
...
...


2. Logotype and favicon


  • logoUrl - tag contains a sting with the URL of the logotype image. Possible values:

    • An absolute URL - points to another web site (like 'http://www.example.com/image.gif')

    • A relative URL - points to a file within a web site (like default '../assets/img/logo-xm-online.png')

    • A inline image - base64-encoded (like 'data:image/png;base64,...')

  • favicon - tag contains a sting with the URL (a favicon also known as a shortcut icon, website icon, tab icon, URL icon, or bookmark icon).


Example: 

logoUrl: '../assets/img/logo-xm-online.png'
favicon: http://xm.test.xm-online.com.ua/assets/img/logo-xm-online.png

 

3. Name


  • name - tag contains a sting with the name.


Example:

name: XME.digital


4. Theme

 

Picture 11. Theme

  • themeStrategy - tag contains a strategy the UI visualisation. Possible values:

    • THEME - default value and mean that in the theme tag a color name will be defined.

    • TENANT_ONLY - mean that in the theme tag a css file name will be defined.

  • theme - tag contains a sting with a color name or a css file name. Possible values of colors:

  • red

  • pink

  • purple

  • deep-purple

  • indigo

  • blue

  • light-blue

  • cyan

  • teal - default value

  • green

  • light-green

  • lime

  • yellow

  • amber

  • orange

  • deep-orange

  • brown


Example:

themeStrategy: TENANT_ONLY
    theme: css


5. Languages    


Picture 12. Language selection

  • lang - tag contains an array of supported languages based on the ISO 639-1 codes. A first element of the array will be a default language.


Example:

langs:
        - en
        - ru

    


6. Social configuration

Picture 13. Social media login 

  • socialConfiguration - tag contains a list of supported social networks for the sign-up and sign-in.

    • linkedinEnabled - enable Linkedin if true (false - default value).

    • facebookEnabled - enable Facebook if true (false - default value).

    • googleEnabled - enable Google if true (false - default value).

    • twitterEnabled - enable Twitter if true (false - default value).


Example:

socialConfiguration:
    linkedinEnabled: true
    facebookEnabled: true
    googleEnabled: true
    twitterEnabled: true 

    


7. Hide remember me (deprecated)    

Picture 14. Remember me

  • hideRememberMe - hide Remember Me on the sign-in widget (false - default value).


Example:

hideRememberMe: true


8. Idle time to logout

  • idleLogout - tag contains user idle time in seconds. After the time is expired the system logs out user.


Example:

idleLogout: 3600



9. Default layout

Picture 15. Default layout

Example:

defaultLayout:
    - class: row
      content:
        - class: 'col-sm-6'
          widget:
              selector: 'ext-common/xm-widget-welcome'
              config:
                  imageSrc: "<url>"
                  title: 'New title test hazel'
                  subtitle: 'New sub title test hazel'
        - class: 'col-sm-6'
          widget:
              selector: 'ext-common/xm-widget-sign-in-up'
              config:
                  signUpEnabled: true
                  signUpStrategy:
                    - EMAIL_STRATEGY
                    - LOGIN_STRATEGY
                  privacyAndTermsEnabled: true
                  privacyAndTerms: { "en": "<url>"}


10. Default dashboard

  • defaultDashboard - tag contains a dashboard ID or slug and after success sign-in user will be redirected to this dashboard first.


Example:

defaultDashboard: 941

Or

defaultDashboard: 'default'

 

11. Google API key for Google Map

  • googleApiKey - tag contains a Google API key to use it for Google Maps. If tag not defined, then Google Maps JavaScript will not be loaded on the page. If the tag contains empty string, then Google Maps will work in development mode.


Example:

googleApiKey:




12. Icons in the Applications menu



Picture 16. Icons in the Applications menu


  • iconsInMenu - shows icons in the Applications menu (false - default value).


Example:

iconsInMenu: true



13. Notifications


Picture 17. Notifications


  • notifications - container for notifications configuration.

    • resourceUrl - a URL to select notification elements.

    • redirectUrl - a redirect URL for the 'View all' link.

    • labelPath - an object attribute path that will be used to show notification information.

    • initialState - initial entity state to show it as notification.

    • changeStateName - the new state that an entity will be changed when viewed.

    • showAsHtml - shows notification information as HTML content if true.

    • showDate - shows notification date if true (startDate from the entity).

    • max - maxim number of notifications in the list to show.

    • autoUpdate - a time period in milliseconds to call resourceUrl.

    • autoUpdateEnabled - enable periodically call of resourceUrl if true.


Example:

notifications:
    resourceUrl: '/entity/api/_search/xm-entities?typeKey=&page=0&size=10&query=stateKey:TODO&sort=id,desc'
    redirectUrl: '/dashboard/notifications'
    labelPath: 'name'
    initialState: 'TODO'
    changeStateName: 'DONE'
    showAsHtml: true
    showDate: true
    max: 5
    autoUpdate: 1000000
    autoUpdateEnabled: true


14. Errors configuration

  • responseConfig - container for API call responses configuration.

    • responses - container with responses configuration.

      • code - regular expraion to match error code from the response.

      • codePath - path to the error code from the response.

      • status - HTTP status code (0, 400, 404, 500).

      • type - type of message

        • alert.danger - red notification.

        • alert.warning - orange notification.

        • swal.error - sweet alert with error message.

        • swal.warning - sweet alert with warning message.

        • validation - validation error in the form.

        • ignore - ignore response.

      • validationField - if type validation it’s field to be invalid.

      • validationFieldsExtractor - if response contains many invalid fileds this item contains JavaScript function which should return the data in the format {fieldPath: {type:”...”, value: “...”}}

      • outputMessage - container with output message configuration.

        • type - type of output message

          • TRANSLATION_KEY

          • TRANSLATION_KEY_PATH

          • MESSAGE_PATH

          • MESSAGE_OBJECT

        • value - output message value. If type *PATH then value should contain path to the field (like field.internalField.internalInternalField. If type *OBJECT then value should contain internationalization object (like {en: 'Eng text', ru: 'Rus text', 'uk': 'Ukr text'})

      • condition - item contains JavaScript function which should return boolean value as result.

      • redirectUrl - optional parameter with URL redirect for swal.* types only


Example:

responseConfig:
    responses:
      - code: 'error.internalServerError'
        codePath: error
        status: 500 
        type: 'alert.danger'
        validationField: data
        validationFieldsExtractor: >
                {
                    return { 
                        data: {
                            type: 'TRANSLATION_KEY',                              value:'ext-tenant.errors.error.order.already.exist'
                        }
                    }
                }
        outputMessage:
             type: 'TRANSLATION_KEY'
             value: 'ext-tenant.errors.error.order.already.exist'
        condition: '{return rc.request.url !== 'uaa/api/account';}'
        redirectUrl: '/'




15. Search configuration

search element in UI configuration file contains a list of patterns. 

  • query - search query prefix based on Query Syntax  that will be concatenated with search field.

  • routerLink - list with static segments of the final URL that will be used in navigation for each item in the search result.

  • fields - tag contains an array with displayed fields

    • field - name of general entity or dataSpec parameters. For example: name, description, data.vin, etc.

    • title - column localized name via map structure


Example:

search:
    patterns:
      - regexp: '[a-zA-Z][a-zA-Z]\d\d\d\d[a-zA-Z][a-zA-Z]'
        query: 'typeKey:"RESOURCE.CAR" AND data.registrationNumber:'
        routerLink:
          - /dashboard
          - main
        fields:
          - field: name
            title: Name
          - field: typeKey
            title: { "en": "Type" }
          - field: description
            title: Description


16. Dates formatting

datesFormats optional element in UI configuration file, contains an object of dates formats for each langs. It will override default dates display format. Lang key should be as property name and value should be given as a string. You can find all supported formats on moment.js

Example:

datesFormats:
    en: 'MM/DD/YYYY HH:mm'
    ru: 'DD.MM.YYYY HH:mm'