9 Available Components

There are four types of components available in this panel.

a. Forms

b. Controls

c. Framework Components

d. Visualization

e. Framework CCA Loader

f. Business

g. Partials

h. Extensions

A) Forms

This section contains the components which are required in designing a form.

For example, a Login form accepts user name and password and validates a user. In the example below, developer can use Input Text and Input Password element for user name and password respectively.


Description of uxextensibility86.png follows
Description of the illustration uxextensibility86.png

Following is the list of available components under this section.
  1. Anchor Tag
  2. Avatar
  3. Check Box
  4. Combo Box
  5. Date Picker
  6. File Picker
  7. Image
  8. Input Number
  9. Input Password
  10. Input Text
  11. List View
  12. Menu
  13. Radio Buttons
  14. Select
  15. Switch
  16. Table
  17. Text
  18. Text Area
  19. Train
  20. Tree View
B) Controls

This section contains the components, which are used to control the activity on the form.

For example, user has a form to transfer money from one account to another account in which he will have the following two actions:
  • Transfer button to confirm the transaction
  • Cancel button to cancel the transaction

In the below example, buttons are displayed:


Description of uxextensibility87.png follows
Description of the illustration uxextensibility87.png

Following is the list of available components under this section.
  1. Button
  2. Button Set
  3. Container
  4. Component Loader
C) Framework Components

This section contains the components, which are predefined & supported by OBDX. It has in-built functionality.

In the below example, an account input component which lists all the accounts of the user and shows its details like balance and address of the account selected by the user.


Framework Component

Following is the list of available components under this section.
  1. Account Input
  2. Amount Input
  3. Bank Look Up
  4. Help Panel
  5. Navigation Bar
  6. Page Section
  7. Row Control

D) Visualization

This section contains the components, which are useful to design a widget that display s information graphically.

In the below example, a chart that shows the net worth of different accounts (CASA) of the user


Description of uxextensibility89.png follows
Description of the illustration uxextensibility89.png

E) Framework CCA Loader

This section contains the framework CCA components, which are predefined and supported by OBDX. It has in-built functionality.

In the below example, an address-input component which contains predefined address structure. On right panel all the properties of address-input CCA component are available.


Description of uxextensibility90.png follows
Description of the illustration uxextensibility90.png

F) Business

This section contains the Business components, which are created by user and are reusable components. Business components generate.

In the below example, a virtual-accounts component which contains predefined virtual accounts list. On right panel all the properties of virtual-accounts CCA component are available.


Description of uxextensibility91.png follows
Description of the illustration uxextensibility91.png

G) Partials

This section contains the Partial templates, which are created by user and are reusable independent HTML template.


Description of uxextensibility92.png follows
Description of the illustration uxextensibility92.png

H) Extensions

This section contains the components which are customized OBDX components and are saved in extensions folder.

Following is the list of available components under this section.
  1. Chart
  2. TimeLine

Details of components

A) Forms:
  1. Anchor Tag :

    Usage: This component is used to add a link. This link can be an image / icon or text.

    Example:
    Supported attributes:
    a) Basic:
    b) Advanced:
    • Select anchor type
    • Add formatter
    • REST API chain
    • Hook functions
    • Add Loop
    • Add Custom Attributes
    • Conditional Field
    c) Layout:
    • Grid
  2. Avatar

    Usage: This component is used to display initials for name or product and images in a circle.

    Example:


    Description of uxextensibility95.png follows
    Description of the illustration uxextensibility95.png

    a) Basic:
    • Label
    b) Advanced:
    • Select Size
    • Enter Image Path
    • Enter Initials
    • Add Loop
    • Add Custom Attributes:
    • Conditional Field
    c) Layout:
    • Grid
  3. Check Box:

    Usage: This component is used to add checkbox to allow a user select one or more options from the available choices.

    Example:


    Description of uxextensibility96.png follows
    Description of the illustration uxextensibility96.png

    Supported attributes:

    a) Basic:
    • Label
    • Hide Label
    • Value
    • Options
    b) Advanced:
    • Value Change Handler
    • Validations
    • Required Field
    • Add Loop
    • Add Custom Attributes
    • Conditional Field
    c) Layout:
    • Grid
  4. Combo Box:

    Usage: This component is used to add a drop down to allow user to make multiple selection from the predefined options or type his own option.

    Example:


    Description of uxextensibility97.png follows
    Description of the illustration uxextensibility97.png

    Supported attributes:

    a) Basic:
    • Label
    • Hide Label
    • Value
    • Select Type
    • Options
    b) Advanced:
    • Value Change Handler
    • Validations
    • Required Field
    • Add Loop
    • Add Custom Attributes
    • Conditional Field
    c) Layout:
    • Grid
  5. Date Picker:

    Usage: This component is used to add an input box to accept date as an input from user.

    Example:


    Description of uxextensibility98.png follows
    Description of the illustration uxextensibility98.png

    Supported attributes:

    a) Basic:
    • Label
    • Hide Label
    • Value
    b) Advanced:
    • Value Change Handler
    • Validations
    • Required Field
    • Add Loop
    • Add Custom Attributes
    • Conditional Field
    c) Layout:
    • Grid
  6. File Picker:

    Usage: This component is used to add an action as a button to accept the documents (files) as an input from user.

    Example:


    Description of uxextensibility99.png follows
    Description of the illustration uxextensibility99.png

    Supported attributes:

    a) Basic:
    • Label
    d) Advanced:
    • Selection Mode
    • Enter Allowed File Extensions
    • REST API chain
    • Hook functions
    • Required Field
    • Add Loop
    • Add Custom Attributes
    • Conditional Field
    e) Layout:
    • Layout:
  7. Image:

    Usage: This component is used to add an image.

    Example:
    Description of uxextensibility100.png follows
    Description of the illustration uxextensibility100.png

    Supported attributes:

    a) Basic:
    • Image source
    b) Advanced:
    • Add Loop
    • Add Custom Attributes
    • Conditional Field
    c) Layout:
    • Grid
  8. Input Number:

    Usage: This component is used to add an input box to accept numbers as an input from the user.

    Example:


    Description of uxextensibility101.png follows
    Description of the illustration uxextensibility101.png

    Supported attributes:

    a) Basic:
    • Label
    • Hide Label
    • Value
    b) Advanced:
    • Enter Minimum Length
    • Enter Maximum Length
    • Enter Step
    • Value Change Handler
    • Validations
    • Required Field
    • Add Loop
    • Add Custom Attributes
    • Conditional Field
    c) Layout:
    • Grid
  9. Input Password:

    Usage: This component is used to add an input box to accept the password as an input from the user.

    Example:


    Description of uxextensibility102.png follows
    Description of the illustration uxextensibility102.png

    Supported attributes:

    a) Basic:
    • Label
    • Hide Label
    • Value
    b) Advanced:
    • Value Change Handler
    • Validations
    • Required Field
    • Add Loop
    • Add Custom Attributes
    • Conditional Field
    c) Layout:
    • Grid
  10. Input Text:

    Usage: This component is used to add an input box to accept text as an input from the user.

    Example:


    Description of uxextensibility103.png follows
    Description of the illustration uxextensibility103.png

    Supported attributes:

    a) Basic:
    • Label
    • Hide Label
    • Value
    b) Advanced:
    • Value Change Handler
    • Validations
    • Required Field
    • Add Loop
    • Add Custom Attributes
    • Conditional Field
    c) Layout:
    • Grid
  11. List View:

    Usage: This component is used to add a view which groups several items and display s them in a vertical scrollable list.

    Example:


    Description of uxextensibility104.png follows
    Description of the illustration uxextensibility104.png

    Supported attributes:

    a) Basic:
    • Label
    • Source variable
    • Id attribute
    b) Advanced:
    • Renderer ID
    • Pagination
    • Indexer
    • Add Loop
    • Add Custom Attributes
    • Conditional Field
    c) Layout:
    • Grid
  12. Menu:

    Usage: This component is used to add an element, which displays popup menu with multiple options relevant to the particular row for easier navigation.

    Example:


    Description of uxextensibility105.png follows
    Description of the illustration uxextensibility105.png

    Supported attributes:

    a) Basic:
    • Label
    • ID
    • Options
    b) Advanced:
    • Enter Menu Launcher
    • REST API chain
    • Hook functions
    • Add Loop
    • Add Custom Attributes
    • Conditional Field
    c) Layout:
    • Grid
  13. Radio Buttons:

    Usage: This component is used to add buttons to let a user select an option from the available choices.

    Example:


    Description of uxextensibility106.png follows
    Description of the illustration uxextensibility106.png

    Supported attributes:

    a) Basic:
    • Label
    • Hide Label
    • Value
    • Options
    b) Advanced:
    • Value Change Handler
    • Validations
    • Required Field
    • Add Loop
    • Add Custom Attributes
    • Conditional Field
    c) Layout:
    • Grid
  14. Select:

    Usage: This component is used to add a drop down, to allow user to make a choice from the predefined options.

    Example:


    Description of uxextensibility107.png follows
    Description of the illustration uxextensibility107.png

    Supported attributes:

    a) Basic:
    • Label
    • Hide Label
    • Value
    • Select type
    • Options
    b) Advanced:
    • Value Change Handler
    • Validations
    • Required Field
    • Add Loop
    • Add Custom Attributes
    • Conditional Field
    c) Layout:
    • Grid
  15. Switch:

    Usage: This component is used to add a toggle button for binary status such as on/off.

    Example:


    Description of uxextensibility108.png follows
    Description of the illustration uxextensibility108.png

    Supported attributes:

    a) Basic:
    • Label
    • Hide Label
    • Value
    b) Advanced:
    • Value change handler
    • Required field
    • Add Loop
    • Add Custom Attributes
    • Conditional Field
    c) Layout:
    • Grid
  16. Table:

    Usage: This component is used to add a view which groups several items and display s them in row- column fashion.

    Example:


    Description of uxextensibility109.png follows
    Description of the illustration uxextensibility109.png

    Supported attributes:

    a) Basic:
    • Label
    • Source variable
    • Id attribute
    • Columns
    b) Advanced:
    • Row renderer
    • Pagination
    • Add Loop
    • Add Custom Attributes
    • Conditional Field
    c) Layout:
    • Grid
  17. Text:

    Usage: This component is used to add a simple text.

    Example:
    Text

    Supported attributes:

    a) Basic:

    b) Advanced:
    • Aria label
    • Tag type
    • Binding Source
    • Add formatter
    • Add loop
    • Add Custom Attributes
    • Conditional Field
    c) Layout:
    • Grid
  18. Text Area:

    Usage: This component is used to add an input box to accept the multi-line text as an input from user.

    Example:


    Description of uxextensibility111.png follows
    Description of the illustration uxextensibility111.png

    Supported attributes:

    a) Basic:
    • Label
    • Hide Label
    • Value
    b) Advanced:
    • Enter rows
    • Value Change Handler
    • Validations
    • Required Field
    • Add Loop
    • Add Custom Attributes
    • Conditional Field
    c) Layout:
    • Grid
  19. Train:

    Usage: This component is used to add an element for navigation that allows a user to go between different "steps" i.e. different components. Each step can display information about the state of the step such as "visited", "unvisited", "disabled".

    Example:


    Description of uxextensibility112.png follows
    Description of the illustration uxextensibility112.png

    Supported attributes:

    a) Basic:
    • Label
    • Value
    b) Advanced:
    • Selected step
    • Value change handler
    • Add Loop
    • Add Custom Attributes:
    • Conditional Field
    c) Layout:
    • Grid
  20. Tree View:

    Usage: This component is used to add an element to display the hierarchical relationship between the items of the tree.

    Example:


    Description of uxextensibility113.png follows
    Description of the illustration uxextensibility113.png

    Supported attributes:

    a) Basic:
    • Label
    • Source variable
    b) Advanced:
    • Renderer ID
    • Add Loop
    • Add Custom Attributes
    • Conditional Field
    c) Layout:
    • Grid
B) Controls:
  1. Button:

    Usage: This component is used to add a call to action to the page which can be configured to perform various actions on its click.

    Example:


    Description of uxextensibility114.png follows
    Description of the illustration uxextensibility114.png

    Supported attributes:

    a) Basic:
    • Label
    b) Advanced:
    • Icons
    • Select Class Type
    • Select Type
    • Rest API Chain
    • Hook Function
    • Add Loop
    • Add Custom Attributes
    • Conditional Field
    c) Layout:
    • Grid
  2. Button Set:

    Usage: Basically button set is a group of button which can be used as radio button or checkbox button. In case of single selection it act as radio button and in case of multiple selection it act as checkbox set button.

    Example:

    a) Radio button set


    Description of uxextensibility115.png follows
    Description of the illustration uxextensibility115.png

    b) Checkbox button set


    Description of uxextensibility115.png follows
    Description of the illustration uxextensibility115.png

    Supported attributes:

    a) Basic:
    • ID: It accepts the same value as Label
    • Value
    • Select Type:

      1) Buttons Set One: Choose this to use it as radio button set

      2) Button Set Many: Choose this to use it a checkbox button set

    • Options
    b) Advanced:
    • Value Change Handler
    • Add Loop
    • Add Custom Attributes
    • Conditional Field
    c) Layout:
    • Grid
  3. Container:

    Usage: This component is used to provide a wrapper or group for form elements to apply a common behavior to them. e.g. display / hide of buttons. An element is always placed inside the container start element and container end element.

    1. On Dropping the container element at the desired position on form area, a panel will open on the right side.

    2. User can select the type, fill the required fields and click confirm.

    Note:

    Container can also be used inside container.

    Supported attributes:

    a) Basic:
    • Select Type Of Container
    b) Advanced:
    • Add Loop
    • Add Custom Attributes
    • Conditional Field
    c) Layout:
    • Grid
  4. Component Loader:

    Usage: Component Loader is used to load already created component or partial in current component.

    Supported attributes:

    a) Advanced:
    • Select Type:
      1. Component
        1. Select Type
          1. Framework Elements: To use Framework Components.

            Refer to framework components section for more detail.

          2. Transaction: To load transaction type of component. Refer to Transaction component section.
          3. Single: To load normal component.
    b) Partial:
    • Add Loop
    • Add Custom Attributes
    • Conditional Field
    c) Layout:
    • Grid

C) Framework Component:

These components are predefined component that can be plugged with the user’s created component to give specific functionality. Different framework component:
  1. Account Input:

    Usage: Component which provides account selection that is fetched from current logged in user or custom URL

    Example:


    Description of uxextensibility117.png follows
    Description of the illustration uxextensibility117.png

    Supported attributes:

    a) Basic:
    • Label
    • Value
    b) Advanced:
    • Enter Type: These values will passed to ‘type’ key in params for account input.
      • balance
      • address
      • nodeValue
      • loans
        • Add Loop
        • Add Custom Attributes
        • Conditional Field
    c) Layout:
    • Grid
  2. Amount Input:

    Usage: This component is used to accept amount in an input box. The component gives currency selection and entered amount is formatted with respect to selected currency.

    Example:


    Description of uxextensibility118.png follows
    Description of the illustration uxextensibility118.png

    Supported attributes:

    a) Basic:
    • Label
    • Value
    b) Advanced:
    • Enter Currency Variable: To store selected currency value.
    • Required
    • Currency List Required: Whether to display currency list. In case currency list is required, user has to provide URL to fetch currency list or provide a function called Currency Parser which returns the currency list.
    • Currency URL: URL for Fetching currency.
    • Currency Parser: Custom function which returns currency list that can be declared in init function
    • Enter Root ID: Root id which will be passed in params of amount input.
    • Enter Root Class: Root class which will be passed in params of amount input.
    • Add Loop
    • Add Custom Attributes
    • Conditional Field
    c) Layout:
    • Grid
  3. Bank Look up:

    Usage: This component is used to provide bank look up on the basis of IFSC Code, state, city or branch name.

    Example:


    Description of uxextensibility119.png follows
    Description of the illustration uxextensibility119.png

    Supported attributes:

    a) Basic:
    • Label
    b) Advanced:
    • Clearing Code Type
    • Account Type
    • Region
    • Network Code
    • Add Loop
    • Conditional Field
    c) Layout:
    • Grid
  4. Bank Look up:

    Usage: This component is used to display related information about the current component.

    Example:


    Description of uxextensibility120.png follows
    Description of the illustration uxextensibility120.png

    Supported attributes:

    a) Basic:
    • Partial Name: Name of the partial which will be created inside ChannelPath/partials/help/
    b) Advanced:
    • Enter Heading
    • Image Source: Path of image inside channelPath/images/
    • Enter Description
    • Enter Button Name
    • Rest API Chain: Rest to be fired on button click
    • Hook Function: Write action to be performed on button click
    • Add Loop
    • Conditional Field
    c) Layout:
    • Grid
  5. Navigation Bar:

    Usage: This component is used to provide tab based page Navigation, where each tab item / name will display specific view.

    Example:


    Description of uxextensibility120.png follows
    Description of the illustration uxextensibility120.png

    Supported attributes:

    a) Basic:
    • Label:
    • Tabs: Can be provided externally or custom just like select box option. In case user is not familiar with how to provide option, refer Option section in Available attributes.

    b) Advanced:

    • UI Options:

      a) Icon Available

      b) Default option

      c) Menu Float

      d) Full Width

      e) Edge

    • Navigation Bar Description
    • Add Loop
    • Conditional Field
    c) Layout:
    • Grid
  6. Page Section:

    Usage: This component is used to provide basic layout structure and styling for every page / screen.

    Note:

    All the form elements must be present inside this container.

    Example: In the example below, Page Section is added and header is optional. The other form elements can also be added via Partial.


    Description of uxextensibility122.png follows
    Description of the illustration uxextensibility122.png

    Supported attributes:

    a) Basic:
    • Label
    • Format label
    • Hide Page Heading: Switch to active mode to hide the page section heading.

    b) Advanced:

    • Add Loop
    • Conditional Field
    c) Layout:
    • Grid
  7. Row Control:

    This component is used to display label and its corresponding value in structure supported by OBDX framework

    Example:


    Description of uxextensibility123.png follows
    Description of the illustration uxextensibility123.png

    Supported attributes:

    a) Basic:
    • Label
    • Format label
    • Value

    b) Advanced:

    • Add Formatter
    • Add Loop
    • Conditional Field
    c) Layout:
    • Grid
    d) Visualizations:
    1. Chart: There are three types of chart that can be drawn with the help of tool:
      1. Pie Chart
      2. Bar Chart
      3. Line Chart. For more information about each chart type, visit jet.us.oracle.com

      Description of uxextensibility124.png follows
      Description of the illustration uxextensibility124.png

      Supported Attributes:

      a) Advanced:
      • Series
      • Groups
      • Add loop
      • Add Custom Attributes
      • Conditional Field
      b) Layout:
      • Grid
    2. Timeline:

      Usage: This component is used to display the timeline component. To provide values to timeline component use Add Custom Attribute (refer section Add Custom attribute in Available Attributes).

      Example:


      Description of uxextensibility125.png follows
      Description of the illustration uxextensibility125.png

      Supported Attributes:

      a) Basic:
      • Label
      b) Advanced:
      • Add Loop
      • Add Custom Attributes
      • Conditional Field
      c) Layout:
      • Grid