forms.yaml

Import:
  - common

View:
  styles:
    scrollableView: true
  onLoad:
    executeCode:
      body: |
        ensemble.storage.set('inputVal', 'sagar');
        ensemble.storage.set('mockApiStatusCode', 200);
        ensemble.storage.set('mockApiReasonPhrase', 'Success!');
        ensemble.storage.set('mockApiName', 'testMockResponse');
        ensemble.storage.set('dummyData', [
          { value: "val 1", label: "lab 1" },
          { value: "val 2", label: "lab 2" },
          { value: "val 3", label: "lab 3" },
        ]);
      onComplete:
        invokeAPI:
          name: getData
          onResponse:
            executeCode: |
              console.log('getData', response.body);

  header:
    title:
      Header:

  body:
    Column:
      styles:
        names: page
      children:
        - Button:
            label: open another modal screen
            onTap:
              navigateModalScreen:
                name: widgets
                height: 200px
                width: 900px
                inputs:
                  storVar: ${ensemble.storage.get('inputVal')}
                  userVar: ${ensemble.user}
                title:
                  Column:
                    children:
                      - Text:
                          text: Modal title
                      - Text:
                          text: Modal subtitle
                          styles:
                            fontSize: ${typography.fontSize['14']}
                            fontWeight: ${typography.fontWeight.light}
        - Button:
            label: show dialog
            onTap:
              showDialog:
                widget:
                  Text:
                    text: i am a text
                options:
                  height: 50px
                  width: 80px

        - Icon:
        - Text:
            styles:
              names: heading-3
            text: Forms
        - Markdown:
            text: More to come! In the meantime, checkout the Ensemble [documentation](https://docs.ensembleui.com/).
        - Button:
            label: Go Back
            onTap:
              navigateBack:
        - Card:
            styles:
              maxWidth: unset
              width: unset
            children:
              - Form:
                  id: myForm
                  styles:
                    gap: 8px
                    labelPosition: top
                  onChange:
                    executeCode: |
                      console.log({fields})
                  onSubmit:
                    executeCode:
                      body: |
                        console.log(vals)
                        const formattedVals = JSON.stringify(vals, null, 2)
                        console.log(formattedVals)
                        result.setText(formattedVals)
                      onComplete:
                        showToast:
                          message: Form submitted!
                  children:
                    - ToggleButton:
                        id: tb
                        items:
                          - Foo
                          - Bar
                        value: ${ensemble.storage.get('tbValue')}
                    - Button:
                        label: change tb value
                        onTap:
                          executeCode: |
                            if (tb.value === 'Foo') {
                              ensemble.storage.set('tbValue', 'Bar')
                            } else {
                              ensemble.storage.set('tbValue', 'Foo')
                            }
                    - Radio:
                        id: radio
                        label: Radio Group
                        items:
                          - label: Option 1
                            value: 1
                            enabled: false
                          - label: Option 2
                            value: 2
                          - label: Option 3
                            value: 3
                        onChange:
                          executeCode: |
                            console.log('radio changed', value)
                    - Radio:
                        id: radioGroup
                        label: Radio Group With Template
                        item-template:
                          data: getData.body.users.slice(0, 4)
                          name: user
                          value: ${user.email}
                          template:
                            Row:
                              styles:
                                gap: 10px
                                paddingBlock: 10px
                                alignItems: center
                              children:
                                - Image:
                                    width: 25
                                    height: 25
                                    source: ${user.image}
                                - Text:
                                    text: ${user.firstName} ${user.lastName}
                        onChange:
                          executeCode: |
                            console.log('radio changed', value)
                    # Build your own checkbox group
                    - Row:
                        item-template:
                          data: [0, 1, 2]
                          name: cd
                          template:
                            Checkbox:
                              id: ${'cb' + cd}
                              trailingText: ${'Check me' + cd}
                              onChange:
                                executeCode: |-
                                  console.log('isChecked', value);
                    - Dropdown:
                        id: dropdown
                        label: Dropdown
                        hintText: Choose One
                        value: option2
                        items:
                          - label: Option 1
                            value: option1
                          - label: Option 2
                            value: option2
                        onChange:
                          executeCode: |
                            console.log('dropdown changed', value);
                    # If you omit id, the form value key will be the label
                    - TextInput:
                        id: formTextInput
                        hintText: (123) 456-7890
                        mask: "(###) ###-####"
                        validator:
                          maskError: "Please enter valid format"
                        inputType: phone
                        required: true
                        label:
                          Text:
                            text: Text mask input
                        onChange:
                          debounceMs: ${ensemble.storage.get('mockApiStatusCode')}
                          executeCode: console.log("formTextInput onChange", value)
                        onKeyDown: console.log("formTextInput onKeyDown", event)
                    - TextInput:
                        id: minMaxTextInput
                        inputType: number
                        hintText: "Enter a number"
                        hintStyle:
                          color: red
                        maxLength: 3
                        validator:
                          required: true
                          maxLength: 3
                        label: Text input with min and max length
                        onChange:
                          debounceMs: 1000
                          executeCode: console.log("minMaxTextInput onChange", value)
                        onKeyDown: console.log("minMaxTextInput onKeyDown", event)
                    - TextInput:
                        id: regexTextInput
                        required: true
                        validator:
                          regex: .{1,}
                          regexError: "write something atleast"
                        label: Text input with regex
                    - MultiSelect:
                        id: multiselectoptions1
                        label: Choose multiple from API or storage
                        placeholder: "Select From Groups"
                        value: ["hbingley1@plala.or.jp", "val 2"]
                        data: getData.body.users
                        maxCount: 5
                        maxTagCount: 3
                        maxTagTextLength: 5
                        labelKey: firstName
                        valueKey: email
                        items: ${ensemble.storage.get('dummyData')}
                        allowCreateOptions: true
                        onChange:
                          executeCode: |
                            console.log("onChange event! Here are the selected values: ", value);
                        # onItemSelect:
                        #   executeCode: |
                        #     console.log("This is an onItemSelect function that should not be running.", selectedValue);
                    - MultiSelect:
                        id: multiselectoptions2
                        label: Choose multiple
                        item-template:
                          data: ${getData.body.users}
                          name: user
                          value: ${user.email}
                          template:
                            Column:
                              children:
                                - Text:
                                    text: ${user.firstName} ${user.lastName}
                                - Text:
                                    text: ${user.email}
                    - Date:
                        htmlAttributes:
                          data-testid: date0-test
                        id: date0
                        label: Date 0
                        hintText: Choose date 0
                        format: MM/DD/YYYY
                    - Date:
                        id: date1
                        label: Date 1
                        value: ""
                        hintText: Choose date 1
                        format: DD-MM-YY
                    - Date:
                        id: date2
                        label: ${getDateLabel(dropdown.selectedValue)}
                        labelStyle:
                          color: ${dropdown.selectedValue === 'option2' ? 'green' :'blue'}
                        required: true
                        value: "2024/04/04"
                        format: MM/DD/YYYY
                        hintText: ${ensemble.storage.get('inputVal')}
                    - TextInput:
                        id: customNumberInput
                        required: true
                        validator:
                          regex: ^\d{10}$
                          regexError: "Please enter a 10 digit number"
                    - Button:
                        submitForm: true
                        label: Submit
                    - Button:
                        label: Reset
                        onTap:
                          executeCode: |
                            myForm.reset()
                    - Button:
                        label: Clear
                        onTap:
                          executeCode: |
                            myForm.clear()
                    - Button:
                        label: Update Radio Value to 'Option 2' & regexTextInput by code
                        onTap:
                          executeCode: |
                            myForm.updateValues({radio: '2', regexTextInput: '543210'})
              - Markdown:
                  id: result
                  text: Check here for the result!
              - Button:
                  label: get form by id
                  onTap:
                    executeCode: console.log(myForm.getValues())
              - Button:
                  label: submit form by id
                  onTap:
                    executeCode: myForm.submit()
              - Button:
                  label: Validate form
                  onTap:
                    executeCode: myForm.validate()
              - Text:
                  text: Validation result ${myForm.isValid}

        - Text:
            styles:
              names: heading-3
            text: Forms with initial values
        - Markdown:
            text: More to come! In the meantime, checkout the Ensemble [documentation](https://docs.ensembleui.com/).
        - Card:
            styles:
              maxWidth: unset
              width: unset
            children:
              - Form:
                  id: myForm2
                  styles:
                    gap: 8px
                    labelPosition: top
                  onSubmit:
                    executeCode:
                      body: |
                        const formattedVals = JSON.stringify(vals, null, 2)
                        console.log(formattedVals)
                        result2.setText(formattedVals)
                      onComplete:
                        showToast:
                          message: Form submitted!
                  children:
                    - Radio:
                        id: initial_radio
                        label: Radio Group
                        value: 2
                        items:
                          - label: Option 1
                            value: 1
                          - label: Option 2
                            value: 2
                          - label: Option 3
                            value: 3
                        onChange:
                          executeCode: |
                            console.log('radio changed', value)
                    # Build your own checkbox group
                    - Row:
                        children:
                          - Checkbox:
                              htmlAttributes:
                                data-testid: checkbox-test
                              id: initial_checkbox
                              value: true
                              trailingText: Check me
                              onChange:
                                executeCode: |-
                                  console.log('isChecked', value);
                          - Checkbox:
                              id: initial_checkbox2
                              trailingText: Check me 2
                    - Dropdown:
                        id: initail_dropdown
                        label: Dropdown
                        value: option2
                        hintText: Choose One
                        items:
                          - label: Option 1
                            value: option1
                          - label: Option 2
                            value: option2
                    # If you omit id, the form value key will be the label
                    - TextInput:
                        htmlAttributes:
                          data-testid: testinput-test
                        id: initial_formTextInput
                        value: ${ensemble.storage.get('inputVal')}
                        maxLength: 10
                        maxLengthEnforcement: enforced
                        label:
                          Text:
                            text: Text input with max length enforcement
                        onKeyDown:
                          executeCode: |
                            console.log("initial_formTextInput onKeyDown", event)
                    - TextInput:
                        label: Multiline text 1
                        hintText: Press enter to submit
                        multiLine: true
                        maxLines: 2
                        submitOnEnter: ${initial_formTextInput?.value?.length > 4}
                        onChange: console.log("TextArea 1 onChange", value)
                        onKeyDown: |
                          if (event.key === 'Enter' && !event.shiftKey) {
                            event.preventDefault();
                            myForm2.submit();
                          }
                    - TextInput:
                        id: textArea2
                        label: Multiline text 2
                        hintText: Type freely
                        multiline: true
                        maxLines: 2
                        onChange: console.log("TextArea 2 onChange", value)
                        onKeyDown:
                          executeCode: |
                            console.log("TextArea 2 onKeyDown", event)
                    - Button:
                        label: toggle 'Multiline text 2' to submit on Enter
                        onChange: textArea2.setSubmitOnEnter(textArea2?.submitOnEnter ?? true)
                    - MultiSelect:
                        id: initial_multiselectoptions1
                        label: Choose multiple from API or storage
                        placeholder: "Select From Groups"
                        value: ["hbingley1@plala.or.jp", "val 2"]
                        data: getData.body.users
                        labelKey: firstName
                        valueKey: email
                        items: ${ensemble.storage.get('dummyData')}
                        onChange:
                          executeCode: |
                            console.log('selected');
                            console.log(value)
                    - MultiSelect:
                        id: initial_multiselectoptions2
                        label: Choose multiple
                        value: ${[getData.body.users[0].email, getData.body.users[1].email]}
                        item-template:
                          data: ${getData.body.users}
                          name: user
                          value: ${user.email}
                          template:
                            Column:
                              children:
                                - Text:
                                    text: ${user.firstName} ${user.lastName}
                                - Text:
                                    text: ${user.email}
                    # - Date:
                    #     id: initail_date
                    #     label: Date
                    #     value: "2024/04/04"
                    #     hintText: Choose date
                    - Button:
                        submitForm: true
                        label: Submit

              - Markdown:
                  id: result2
                  text: Check here for the result!
        - Text:
            styles:
              names: heading-3
            text: "\nMock Response Testing"
        - Card:
            styles:
              maxWidth: unset
              width: unset
            children:
              - Checkbox:
                  id: useMockResponseCheckbox
                  trailingText: "Use Mock Response"
                  initialValue: false
                  onChange:
                    executeCode: |
                      debugger;
                      app.setUseMockResponse(!app.useMockResponse);
              - Checkbox:
                  id: throwMockApiErrorCheckbox
                  trailingText: "Throw Error"
                  onChange:
                    executeCode: |
                      var currStatusCode = ensemble.storage.get('mockApiStatusCode');
                      if (currStatusCode == 200) {
                        ensemble.storage.set('mockApiStatusCode', 500);
                        ensemble.storage.set('mockApiReasonPhrase', 'An error occurred...');
                      }
                      else {
                        ensemble.storage.set('mockApiStatusCode', 200);
                        ensemble.storage.set('mockApiReasonPhrase', 'Success!');
                      }
              - Button:
                  styles:
                    width: 500
                  label: Call API!
                  onTap:
                    invokeAPI:
                      name: testMockResponse
                      onResponse:
                        executeCode: console.log("Mock API called ", response);
              - Button:
                  styles:
                    width: 500
                  label: Call API from executeCode!
                  onTap:
                    executeCode: |
                      ensemble.invokeAPI('testMockResponse');
              - Spacer:
                  styles:
                    size: 20
              - Text:
                  text: "Status Code: ${testMockResponse.statusCode ?? ''} ${testMockResponse.reasonPhrase ?? ''}"
              - Text:
                  styles:
                    overflow: wrap
                    width: 500
                  text: "Body: ${JSON.stringify(testMockResponse.body) ?? ''}"
              - Spacer:
              - Dropdown:
                  styles:
                    width: 500
                  id: mockResponseDropdown
                  hintText: All items returned
                  item-template:
                    data: testMockResponse.body ?? []
                    name: wizard
                    value: ${wizard.email}
                    template:
                      Text:
                        text: ${wizard.name}
              - Spacer:
                  styles:
                    size: 20
              - Button:
                  styles:
                    width: 500
                  label: Call API with response from function! (see the console)
                  onTap:
                    invokeAPI:
                      name: getMockResponseFromFunction
              - Button:
                  styles:
                    width: 500
                  label: Call API from code
                  onTap:
                    executeCode: |
                      ensemble.invokeAPI("getMockResponseFromFunction");
                      console.log(getMockResponseFromFunction);

  footer:
    children:
      - Text:
          text: Give support us
          id: testText1
    styles:
      backgroundColor: red

API:
  getData:
    method: GET
    uri: https://dummyjson.com/users
  testMockResponse:
    method: GET
    uri: https://dummyjson.com/users/1
    mockResponse:
      statusCode: "${ensemble.storage.get('mockApiStatusCode')}"
      reasonPhrase: "${ensemble.env.randomId}"
      body:
        - id: 0
          name: Harry Potter
          email: chosenOne@gmail.com
        - id: 1
          name: Albus Dumbledore
          email: iTrustSnape@gmail.com
        - id: 2
          name: Tom Riddle
          email: lordVoldemort@gmail.com
    onResponse:
      executeCode: |
        console.log("Mock API called: ",  response)
    onError:
      executeCode: |
        console.log("Mock API errored: ",  error)
  getMockResponseFromFunction:
    method: GET
    uri: https:your_url.com/test
    mockResponse: "${mockResponseTestData()}"
    onResponse:
      executeCode: |
        console.log(app.useMockResponse)
        console.log("Mock API called: ",  response)
    onError:
      executeCode: |
        console.log("Mock API errored: ",  error)

Icon:
  body:
    Text:
      text: Hello123

Global: |
  function mockResponseTestData() {
    return {
      statusCode: 200,
      reasonPhrase: "Success",
      body: [{
        name: "Stupify",
        color: "red",
        desc: "Stunning Spell"
      }, {
        name: "Expecto Patronum",
        color: "white",
        desc: "Summons a Patronus"
      }]
    }
  }