45.1.1 Experience Builder - Create

This topic describes the systematic instruction to Experience Builder - Create option.

Using this option, System Administrator can create a new theme for retail, corporate and administrator users.

To create a experience:

  1. Navigate to the Experience Builder screen.
  2. In the Experience Builder screen, click Create.
    The screen appears, allowing the user to define the experience in a step-by-step manner.

    Note:

    A preview of how the experience will be displayed, based on the experience definition is appears on the right-hand side of the screen.

    Figure 45-2 Experience Builder – Create -Basic Details - Step 1


    Description of Figure 45-2 follows
    Description of "Figure 45-2 Experience Builder – Create -Basic Details - Step 1"

    Note:

    The fields which are marked as Required are mandatory.

    For more information on fields, refer to the field description table.

    Table 45-2 Experience Builder – Create -Basic Details - Step 1 - Field Description

    Field Name Description
    Experience Name Enter a name for the experience being created.
    Experience Description Enter a description for the experience being created.
  3. Enter the Basic Details.
    1. In the Experience Name field, enter the name of the theme.
    2. In the Experience Name field, enter the name of the theme.
  4. Perform one of the following actions:
    • Click Continue to proceed to the next step.
    • Click Cancel to cancel the transaction.

Figure 45-3 Experience Builder – Create -Overview - Step 2


Description of Figure 45-3 follows
Description of "Figure 45-3 Experience Builder – Create -Overview - Step 2"

Note:

The fields which are marked as Required are mandatory.

For more information on fields, refer to the field description table.

Table 45-3 Experience Builder – Create - Overview - Step 2 - Field Description

Field Name Description
Upload Your Logo

Upload a logo file for the experience.

Note: The allowed format for logo is svg.

Navigation Header Colour Specify the colour for the navigation header from the colour palette.
Brand Colour Specify the colour for the brand from the colour palette.
Secondary Brand Colour Specify the secondary brand colour from the colour palette.
Error Message Colour Specify the colour for the error message from the colour palette.
Warning Message Colour Specify the colour for the warning message from the colour palette.
Success Message Colour Specify the colour for the success message from the colour palette.
Information Message Colour Specify the colour for the information message from the colour palette.
Font Family The name of the base font family that is to be applied for creating the experience.
Font Family Source (URL) The URL for the base font that is to be used in the experience.
Page Header Background Colour Enable or disable the switch to add or remove background colour to page header.
Apply Glass Morphism Enable or disable the switch to activate or deactivate the glass morphism effect in experience.
Dashboard Tabs Enable or disable the switch to add or remove dashboard tabs.
Strip Colour

Specify the strip colour you wish to set.

The options are:

  • Default
  • Brand Colour
  • Secondary Brand Colour
Main Content Background Colour

Specify the main content background colour you wish to set.

The options are:

  • Default
  • Brand Colour
  • Secondary Brand Colour
Body Background Colour

Specify the background colour you wish to set for the body.

The options are:

  • Default
  • Brand Colour
  • Secondary Brand Colour
Header Height

The height of the experience header.

The options are:

  • Compact
  • Wide
Header Padding

Specify the space between header content and border.

The options are:

  • Extra Wide
  • Wide
  • Vertical Extra Wide
  • Vertical Wide
Body Strip Colour Specify whether you wish to show or hide the body strip colour.

  1. Set the attributes listed in the Overview.
  2. Click Upload Logo to browse and upload the logo for brand.
  3. Select the colors and typography to be assigned to the various components of messages.
  4. Define the background color and font size for various components in the application.
  5. Enter the base font family name and base font URL.
  6. Perform one of the following actions:
    • Click Continue to proceed to the next step.
    • Click Cancel to cancel the transaction.

Figure 45-4 Experience Builder – Create -Module Cards -Step 3


Description of Figure 45-4 follows
Description of "Figure 45-4 Experience Builder – Create -Module Cards -Step 3"

Note:

The fields which are marked as Required are mandatory.

For more information on fields, refer to the field description table.

Table 45-4 Experience Builder – Create - Module Cards -Step 3 - Field Description

Field Name Description
Card Avatar Background Colour The card avatar background colour you wish to set.
Card Avatar Background Texture

Specify the background texture for the cards.

The options are:

  • None
  • Floating Squares
  • Rotating Squares
  • Shooting Stars
  • Redwood Texture

  1. Set the attributes of the Module Cards.
  2. Perform one of the following actions:
    • Click Continue to proceed to the next step.
    • Click Cancel to cancel the transaction.

Figure 45-5 Experience Builder – Create -Forms -Step 4


Description of Figure 45-5 follows
Description of "Figure 45-5 Experience Builder – Create -Forms -Step 4"

Note:

The fields which are marked as Required are mandatory.

For more information on fields, refer to the field description table.

Table 45-5 Experience Builder – Create - Forms -Step 4 - Field Description

Field Name Description
Input Field Background Colour

Specify the background colour for the input field.

The options are:

  • Default
  • Brand Colour
  • Secondary Brand Colour
Input Field Style

Specify the typography weight for the input field.

The options are:

  • Default
  • Underlined
  • Circular
  • Sharp
Link Text Colour

Specify the colour for the link text.

The options are:

  • Default
  • Brand Colour
  • Secondary Brand Colour
Input Field Height

Specify the typoghraphy height for the input field.

The options are:

  • Comfortable
  • Large
  • Compact
Button Border Radius

Specify the button border style for the button.

The options are:

  • Sharp
  • Smooth
  • Rounded
  • Circular
Button Colour

Specify the colour for the button.

  • Default
  • Brand Colour
  • Secondary Brand Colour
Label Position

Specify the label position.

The options are:

  • Top
  • Inside
  • Start
Direction

Specify the page layout direction.

The options are:

  • Row
  • Column
Maximum Columns

Specify the maximum columns permitted in the page layout.

The options are:

  • One
  • Two
  • Three

  1. Set the attributes of the Forms.
  2. In the Forms section, select the form background color and typography for form header, form disabled input, label, info text icon and links.
  3. Perform one of the following actions:
    • Click Continue to proceed to the next step.
    • Click Cancel to cancel the transaction.

Figure 45-6 Experience Builder – Create -Expert Mode -Step 5


Description of Figure 45-6 follows
Description of "Figure 45-6 Experience Builder – Create -Expert Mode -Step 5"

Note:

The fields which are marked as Required are mandatory.

For more information on fields, refer to the field description table.

Table 45-6 Experience Builder – Create - Expert Mode -Step 5 - Field Description

Field Name Description
Form Controls

A structural representation of user related input fields is known as a form for example Input Text, Drop-Down list, Links, Password Label, Slider, Switch Buttons, Toggle Buttons, Checkboxes etc.

The application form related attributes are defined in this section.

The Forms related variables are listed here, which are editable.

A preview of how the form will be displayed, based on brand definition is focused and appears on the right-hand side of the screen.
Controls

Displays the variables for the controls likeHeadings, Links, Menu buttons, Action list, Navigation. This is editable. The typography colour, font size and weight are defined here.

  • Headings- The header text
  • Link Text
  • Menu button- Actions with a single tap
  • Navigation- Element that appears as quick links which makes switching between different pages of the same component.
Buttons

An element that allows the user to take actions with a single tap and interact with them is known as the button.

The application buttons like Toggle buttons, Switch buttons related attributes are defined in this section.

The Buttons related variables are listed here, which are editable.

A preview of how the buttons will be displayed, based on brand definition is focused and appears on the right-hand side of the screen.
Layout The layout section comprises of the various layout components available throughout the application, such as Navigation List, Tab Bar, Panel, and Dialog. This section also provides control over the current Masonry Layout in the application.
Framework

The framework preview shows the user, all the possible font hierarchies in the system, along with badges for different types of messages in the applications.
Collections

The collections preview displays the various types of collection components available in the application, such as List View and Table.

Note: The collections components can be referred from the Oracle Jet Library.

Graphs, Charts and Maps

The different types of visualizations available in the application such as rating gauge, charts are defined and can be modified in this section.

Note: The visualization components can be referred from the Oracle Jet Library.

Application wide theming This section consists mainly of the different variables available to be edited by the admin which will affect application wide classes, such as color palettes, scrollbar properties and more.

  1. Set the attributes listed under the Expert Mode:
    1. In the Menu section, select the background, typography, menu hover colour and interaction type for the menu to be defined.
    2. In the Table section, select the background, typography of table header and table body.
    3. In the Form section, select the form background color and typography for form header, form disabled input, label, info text icon and links.
    4. In the Button/ Button Sets section, select the values for border, background and typography for primary, secondary, tertiary, help button and other buttons.
    5. In the Generic Components section, define the background colour and font size for various components in the application.
    6. In the Modal Window section, select the values for modal window header, and modal window body.
    7. In the Navigation Bar section, colorus to be assigned to the various components that form part of the navigation bar.
    8. In the Confirmation/ Error Banner section, select the colours and dimension to be assigned to the various components that form part of confirm/error banner.
    9. In the Scroll Bar section, click and select the border colorus for scroll track and scroll thumb.
    10. In the Accordion section, select the colours and typography to be assigned to the various components of accordion.
    11. In the Overlay section, select the background colours and header typography to be assigned to the various components of overlay window.
    12. In the Message section, select the colours and typography to be assigned to the various components of alert messages.

    An example of how the various components of the brand will be displayed, based on brand definition appears in the form section (right hand side) of the screen.

  2. Perform one of the following actions:
    • Click Continue to proceed to the next step.

      The Review screen appears.

    • Click Cancel to cancel the transaction.
  3. Perform one of the following actions:
    • Verify the details.

      Note:

      Click the pagecontrol(paging control)icon to navigate between pages.
    • Click Save to save the details.

      The success message appears along with the status of maintenance.

    • Click Cancel to cancel the transaction.
  4. Click OK to return to the dashboard.

Parent topic: Experience