10.34 Binding Source

Description: This attribute is used to specify the use of the tag. For example, it can be used to display text, or some value or an icon etc.

Components to accept the input: Select box


Description of uxextensibility315.png follows
Description of the illustration uxextensibility315.png

This select box has five options:
  1. NLS: This option is used to display simple text. When user selects this option it will display an input box named as “Label” as shown in the image below.
    Description of uxextensibility316.png follows
    Description of the illustration uxextensibility316.png

  2. Bindings: This option is used to display value of some variable. When user selects this option it will display a select box named as “Value” as shown in the image below. To know more about value refer Value attribute section.
    Description of uxextensibility317.png follows
    Description of the illustration uxextensibility317.png

  3. Icon: This option is used to display an icon. When user selects this option, it will display an input box named as “Icon class name” as shown in the image below.
    Description of uxextensibility318.png follows
    Description of the illustration uxextensibility318.png

  4. After Renderer: This option is used to call a function after the DOM (Document Object Model) has rendered the specific HTML code. When user selects this option, it will display an input box named as “Enter Function Name” as shown in the image below. To know more about this refer https://knockoutjs.com/documentation/template-binding.html
    Description of uxextensibility319.png follows
    Description of the illustration uxextensibility319.png

Example:
  1. User wants to display simple text “Welcome” as shown in the image below.
    After Renderer

    Usage: As this is a simple text coming from Resource Bundle, select Type “NLS”.

    Enter “Welcome” text in the “Label” input box as shown in the image below.


    Description of uxextensibility321.png follows
    Description of the illustration uxextensibility321.png

  2. User wants to display “Welcome” which is stored in a variable.
    After Renderer

    Usage: Assume variable name is “tempVariable”. As this is stored in a variable and not coming from Resource Bundle, select type “Binding Source”.

    How to add a variable using Value attribute refer Value attribute section.


    Description of uxextensibility323.png follows
    Description of the illustration uxextensibility323.png

  3. User wants to display the user icon and password icon, highlighted in red oval in the image below.
    Description of uxextensibility324.png follows
    Description of the illustration uxextensibility324.png

    Usage: User icon class is “icons icon-user”.

    Select type “Icon”

    Enter the user icon class “icons icon-user” in the “Icon class name” input box as shown in the image below.


    Description of uxextensibility325.png follows
    Description of the illustration uxextensibility325.png

  4. User wants to execute some function once the specific elements are rendered on the screen.

    Usage: Assume function name is "display Success”.

    Select type “After renderer”

    Enter function name “display Success” in the “Enter Function Name” input box as shown in the image below.


    Description of uxextensibility326.png follows
    Description of the illustration uxextensibility326.png

Parent topic: Available Attributes