Modal
YAML supports the definition of popup components
  • Use a Button element to trigger the popup action
  • Link to the popup component
  • Pass parameter to and from the popup component

    • Parent Form

    #
    A Button is used on the parent form to trigger the popup form.

    pop:

    #
      - Buttons:
        - <Button Name>:
          pop:
             form: <popup component name>
            title: <Title of popup component>
            update:
              <parent field>: <popup field>
    Under the Button element define the popup component with the following properties:
    form:
    Name of the popup component.
    title:
    Title of the popup component.
    update:   <parent field>: <popup field>
    Define which field variable in the popup form is assigned back to the field variable in the parent form when the popup form is closed.

    Popup Form

    #
    Modal details are defined in a separate component that starts with its own component name in YAML.
    <parent script>:
    <popup component name>:    
      - Fields:
        - <field label>: <field value>
      - Buttons:
        - <Button Name>:
          return: <name of return variable>

    return:

    #
    It specifies the variable to be returned back to the parent.

    Example

    #
    modal:
      - h4: Popup Up/Modal with init and return value
      - Buttons:
        - Enter Name:
          pop:
            form: pagepopup
            title: Call by parent Modal
            update:
              _inputname: name
      - p: Your name is %_inputname%

    pagepopup:    
      - Fields:
        - Name:
      - Buttons:
        - Done:
          return: name
    Please note that, the pagepopup field name Name here, is remapped by the system in the background to name as its unique field id.

    After the user presses the Enter Name button, pop up the following screen.

    After the user completes input and presses the Done button. Variable name will be returned to the parent and shown in the parent page (through variable _inputname).

    Visit example.u.team/yamlmodal to try out the live examples.