widgets.yaml

View:
  inputs:
    - userId
  styles:
    scrollableView: true
  onLoad:
    executeCode:
      body: |-
        ensemble.storage.set('activeIndex',3);
        ensemble.storage.set('loaderStat', false);
        ensemble.storage.set("skip", 10)
        ensemble.storage.set("iconSize", 40)
        ensemble.storage.set("iconName", "MoreHoriz")
      onComplete:
        invokeApi:
          name: getDummyProductsByPaginate
          inputs:
            skip: 0
            limit: 17
          onResponse: |
            const res = response.body.products;
            ensemble.storage.set("dummyProducts", res);

  header:
    title:
      Header:
        inputs:
          message: "Inputs to header widget"

  body:
    Column:
      crossAxis: stretch
      gap: 12px
      styles:
        names: page
      children:
        - Button:
            label: close all navigate modal screen
            onTap:
              closeAllScreens:
        - Row:
            styles:
              crossAxis: center
              mainAxis: spaceBetween
            children:
              - Icon:
                  name: ArrowBack
                  onTap:
                    navigateBack:
              - PopupMenu:
                  showDivider: true
                  enabled: ${ensemble.storage.get("dummyProducts")?.at(0)?.id === 1}
                  trigger: hover
                  styles:
                    height: 200px
                  onTriggered: console.log("onTriggered called", open)
                  onItemSelect:
                    showToast:
                      message: Your selected brand's ${value?.product ? "rating" :"price"} is ${value?.product?.rating || value?.value}
                  item-template:
                    data:
                      [
                        '${ensemble.storage.get("dummyProducts")[0]}',
                        '${ensemble.storage.get("dummyProducts")[2]}',
                        '${ensemble.storage.get("dummyProducts")[4]}',
                      ]
                    name: product
                    template:
                      Text:
                        text: ${product.rating} stars
                  items:
                    - label: All Clients
                      value: all clients
                    - label: Client Name
                      value: client name
                    - label: Location Group
                      type: group
                      items:
                        - label: Location Name 1
                          value: location name 1
                          visible: false
                        - label: Location Name 2
                          value: location name 2
                          enabled: false
                        - label: Location Name 3
                          value: location name 3
                    - label: Client Menu
                      items:
                        - label: Sub Client 1
                          value: sub client 1
                        - label: Child Client Menu
                          items: "${getDummyProductsByPaginate.body.products.map(p => ({label: p.title, value: p.price, visible: p.price > 10, enabled: p.rating < 4})) ?? []}"
                        - label: Sub Client 2
                          value: sub client 2
                  widget:
                    Icon:
                      name: ${ensemble.storage.get("iconName")}
                      color: "#365898"
                      styles:
                        padding: 5
                        borderWidth: 1
                        borderRadius: 6
                        cursor: pointer
                        borderColor: "#DFE1E6"
                        backgroundColor: white

        - Row:
            gap: 4px
            children:
              - Avatar:
                  name: null
              - Avatar:
                  name: "    "
              - Avatar:
                  icon:
                    name: ${ensemble.storage.get('iconName')}
                    size: ${ensemble.storage.get('iconSize')}
                    color: red
              - Avatar:
                  icon:
                    name: Person
                  menu:
                    - label: ${ensemble.storage.get('iconName')}
                      icon:
                        name: ${ensemble.storage.get('iconName')}
                      onTap:
                        executeCode: |
                          console.log("Option 1")
                          console.log(label, icon)
                    - label: "Option 2"
                      icon:
                        name: Circle
                      onTap:
                        executeCode: console.log("Option 2")
              - Avatar:
                  name: "  Dr.   cabin2"
                  styles:
                    backgroundColor: darkgray
                    color: yellow
              - Avatar:
                  name: "  4Dr.  cabin4  i  "

        - Row:
            styles:
              mainAxis: spaceBetween
              crossAxis: center
            children:
              - Lottie:
                  id: MyLottie
                  source: https://lottie.host/3568da34-6083-42fc-a254-74d9c1e15b2f/wcVmO2igxm.json
                  repeat: false
                  autoPlay: true
                  styles:
                    margin: 20px
                    height: 200px
                    backgroundColor: "#f0f0f0"
                    width: 200px
                    transform: rotate(1deg)
                  onTap:
                    executeCode: |-
                      console.log("Tapped");
                  onForward:
                    executeCode: |-
                      console.log("Forwarded");
                  onReverse:
                    executeCode: |-
                      console.log("Reversed");
                  onPause:
                    executeCode: |-
                      console.log("Paused");
                  onComplete:
                    executeCode: |-
                      console.log("Completed");
              - PopupMenu:
                  trigger: contextMenu
                  styles:
                    backgroundColor: ${colors.gray['50']}
                  onTriggered: console.log("onTriggered called", open)
                  onItemSelect:
                    showToast:
                      message: navigated to ${value.str}
                  item-template:
                    data: ["File", "Edit", "View", "Settings", "Help"]
                    name: str
                    template:
                      Row:
                        children:
                          - Icon:
                              name: NavigateNext
                          - Text:
                              text: ${str}
                  widget:
                    Text:
                      text: Right Click here
                      styles:
                        color: ${colors.gray['700']}
                        backgroundColor: ${colors.gray['100']}
                        padding: 100px
                        borderRadius: 12px

        - Row:
            styles:
              gap: 8
            children:
              - Button:
                  styles:
                    borderRadius: 20
                  label: Forward
                  startingIcon:
                    name: PlayArrow
                  onTap:
                    executeCode: |-
                      console.log("Forward");
                      MyLottie.forward();
              - Button:
                  styles:
                    borderRadius: 20
                  label: Reverse
                  onTap:
                    executeCode: |-
                      console.log("Reverse");
                      MyLottie.reverse();
              - Button:
                  styles:
                    borderRadius: 20
                  label: Reset
                  onTap:
                    executeCode: |-
                      console.log("Reset");
                      MyLottie.reset();
              - Button:
                  styles:
                    borderRadius: 20
                  label: Stop
                  endingIcon:
                    name: Stop
                  onTap:
                    executeCode: |-
                      console.log("Stop");
                      MyLottie.stop();

        - Column:
            item-template:
              data: ["foo", "bar"]
              name: value
              template:
                Column:
                  children:
                    - Text:
                        text: ${ensemble.storage.get('test')}
                    - Button:
                        label: click
                        onTap:
                          showDialog:
                            widget:
                              Button:
                                label: ${value}
                                onTap:
                                  executeCode: |
                                    ${ensemble.storage.set('test', 'hello')}

        - Text:
            text: ${ensemble.user.email}

        - SignInWithGoogle:
            clientId: ${ensemble.env.googleOAuthId}

        - Button:
            label: click 3
            onTap:
              executeCode: |
                ensemble.user.set({email: 'uuu'})

        - Text:
            styles:
              names: heading-1
            text: Widgets
        - Markdown:
            text: More to come! In the meantime, checkout the Ensemble [documentation](https://docs.ensembleui.com/).

        - Card:
            styles:
              maxWidth: unset
              width: unset
              gap: 10px
            children:
              - Text:
                  styles:
                    names: heading-3
                  text: DataGrid
              - DataGrid:
                  id: "myDataGridExample"
                  onRowsSelected:
                    executeCode: |
                      console.log("data", selectedRows, selectedRowKeys);
                  allowSelection: ${1===1}
                  selectionColWidth: ${20+30}
                  selectionType: '${1===10 ? "checkbox" : "radio"}'
                  allowResizableColumns: true
                  defaultSelectedRowKeys: ["2"]
                  styles:
                    headerStyle:
                      backgroundColor: "white"
                      fontSize: "12px"
                      textColor: "#747184"
                      borderBottom: false
                  DataColumns:
                    - label: PATIENT
                    - label: ADVOCATE
                    - label: ICON
                    - label: MENU
                  item-template:
                    data:
                      [
                        { id: "1", patient: "John", advocate: "Mike Ross" },
                        { id: "2", patient: "Reuben", advocate: "Harvey Dent" },
                      ]
                    name: dummyData
                    key: ${dummyData.id}
                    template:
                      DataRow:
                        styles:
                          backgroundColor: ${colors.teal['300']}
                          border: 2px double ${index % 2 === 0 ? colors.primary['100'] :"lightgreen"}
                          borderRadius: ${ensemble.storage.get("skip")}px
                          padding: ${getDummyProductsByPaginate.body.products.length * 2}px
                        children:
                          - Text:
                              id: ${dummyData.patient+"Name"}
                              text: ${dummyData.patient}
                          - Text:
                              id: ${dummyData.patient+"Adv"}
                              text: ${dummyData.advocate}
                          - Icon:
                              name: Add
                              styles:
                                borderRadius: 30
                                borderWidth: 1
                                borderColor: black
                                padding: 8
                              onMouseEnter:
                                showDialog:
                                  options:
                                    mask: false
                                    position: absolute
                                    top: ${location.y + 'px'}
                                    left: ${(location.x + 20)+ 'px'}
                                    width: max-content
                                  widget:
                                    Column:
                                      children:
                                        - Text:
                                            text: ${location.y}
                          - PopupMenu:
                              showDivider: true
                              items:
                                - label:
                                    Text:
                                      text: ${spacing.pagePadding}
                                  value: name
                                - label: Location
                                  value: location
                              item-template:
                                data:
                                  [
                                    { name: "hello", value: 11 },
                                    { name: "buyyy", value: 22 },
                                  ]
                                name: product
                                value: ${product.value}
                                template:
                                  Text:
                                    text: ${product.name}
                              widget:
                                Icon:
                                  name: QuestionMark
              - Text:
                  styles:
                    names: heading-3
                  text: DataGrid with item-template inside dataRow
              - Button:
                  label: toggle
                  onTap:
                    executeCode: |
                      ensemble.storage.set('loaderStat', !ensemble.storage.get('loaderStat'))

              - LoadingContainer:
                  isLoading: ${ensemble.storage.get('loaderStat')}
                  widget:
                    DataGrid:
                      id: "myDataGridExample2"
                      allowSelection: true
                      defaultSelectedRowKeys: [5, 6]
                      styles:
                        headerStyle:
                          backgroundColor: "white"
                          fontSize: "12px"
                          textColor: "#747184"
                          hasDivider: true
                          borderBottom: false
                      DataColumns: ["id", "title", "description"]
                      pageSize: 17
                      totalRows: 100
                      onRowsSelected:
                        executeCode: |
                          console.log(selectedRowKeys, selectedRows)
                      onPageChange:
                        executeCode:
                          body: |
                            myDataGridExample2.setRowsSelected([]);
                          onComplete:
                            invokeAPI:
                              name: getDummyProductsByPaginate
                              inputs:
                                skip: ${ensemble.storage.get('skip') * (page - 1)}
                                limit: ${pageSize}
                              onResponse: |
                                const prevItem = ensemble.storage.get("dummyProducts")
                                const res = response.body.products;
                                ensemble.storage.set("dummyProducts", [...res])
                      item-template:
                        data: ${ensemble.storage.get('dummyProducts')}
                        name: dummyData
                        key: ${dummyData.id}
                        template:
                          DataRow:
                            onTap:
                              showToast:
                                message: heha ${data.dummyData.id} ${index}
                            styles:
                              backgroundColor: ${index % 2 === 0 ? "beige" :"lightgreen"}
                              border: 4px double ${dummyData.id % 2 === 0 ? colors.primary['100'] :colors.primary['500']}
                              textAlign: ${ensemble.storage.get("skip") === 10 ? "right" :"left"}
                              lineHeight: ${getDummyProductsByPaginate.body.products.length}px
                            disableSelection: ${dummyData.id === 2}
                            item-template:
                              data: ${Object.values(dummyData)}
                              name: value
                              template:
                                Text:
                                  text: ${value}

        - Button:
            label: get selected rows
            onTap:
              executeCode: |
                console.log(myDataGridExample2.rowsSelected)
        - Button:
            label: select first 3 rows
            onTap:
              executeCode: |
                const keys = ensemble.storage.get('dummyProducts').map(dp => dp.id);
                myDataGridExample2.setRowsSelected(keys.slice(0, 3));
        - Card:
            styles:
              maxWidth: unset
              width: unset
              gap: 10px
            children:
              - Text:
                  styles:
                    names: heading-3
                  text: DataGrid with sort example
              - DataGrid:
                  id: "myDataGridExample3"
                  styles:
                    headerStyle:
                      backgroundColor: "white"
                      fontSize: "12px"
                      textColor: "#747184"
                      hasDivider: true
                      borderBottom: false
                  DataColumns:
                    - label: id
                      sort:
                        compareFn: |
                          a.dummyData.id - b.dummyData.id
                    - label: title
                    - label: description
                      visible: ${ensemble.storage.get('dummyProducts')?.at(0)?.id < 10}
                  hidePagination: true
                  onSort:
                    executeCode: |
                      // TODO: here this condition is required because sort return undefined when sort on any perticular column has been removed.
                      if (columnTitle && sortOrder) {
                        ensemble.invokeAPI('getMockProducts', {'sortBy': columnTitle, 'sortOrder': sortOrder === 'descend' ? 'desc' : 'asc'}).then((res) => {
                          console.log(res)
                        })
                      }

                  item-template:
                    data: ${ensemble.storage.get('dummyProducts')}
                    name: dummyData
                    key: ${dummyData.key}
                    template:
                      DataRow:
                        item-template:
                          data: ${Object.values(dummyData)}
                          name: value
                          template:
                            Text:
                              text: ${value}
        - Card:
            styles:
              maxWidth: unset
              width: unset
              gap: 10px
            children:
              - Button:
                  label: Load numbers data
                  onTap:
                    invokeAPI:
                      name: getDummyNumbers
                      onResponse: |
                        ensemble.storage.set('dummyNumbers', response.body)
              - Text:
                  styles:
                    names: heading-3
                  text: DataGrid
              - DataGrid:
                  styles:
                    headerStyle:
                      backgroundColor: "white"
                      fontSize: "12px"
                      textColor: "#747184"
                      hasDivider: true
                      borderBottom: false
                  hidePagination: true
                  DataColumns:
                    - label: Number
                  scroll:
                    scrollHeight: 200
                  onScrollEnd:
                    invokeAPI:
                      name: getDummyNumbers
                      onResponse: |
                        ensemble.storage.set('dummyNumbers', [...ensemble.storage.get('dummyNumbers'), ...response.body])
                  item-template:
                    data: ${ensemble.storage.get('dummyNumbers')}
                    name: dummyData
                    template:
                      DataRow:
                        styles:
                          backgroundColor: lime
                        rowHoverBg: yellow
                        children:
                          - Text:
                              id: ${'x_'+index}
                              text: ${dummyData.number}
        - Card:
            styles:
              maxWidth: unset
              width: unset
              gap: 10px
            children:
              - Text:
                  styles:
                    names: heading-3
                  text: Charts
              - Column:
                  styles:
                    display: grid
                    gridTemplateColumns: 50% 50%
                  children:
                    - Chart:
                        id: myBarChart
                        styles:
                          width: 90%
                        config: |-
                          {
                            type: 'bar',
                            title: "I am Bar",
                            data:
                              {
                                labels:
                                  [
                                    "Jan",
                                    "Feb",
                                    "Mar",
                                    "Apr",
                                    "May",
                                    "Jun",
                                    "Jul",
                                    "Aug",
                                    "Sep",
                                  ],
                                datasets:
                                  [
                                    {
                                      label: 'Matched',
                                      data: "${getDummyNumbers.body}",
                                      backgroundColor: '#5542f6',
                                      barPercentage: 0.8,
                                      borderRadius: 3,
                                    },
                                    {
                                      label: "Enrolled",
                                      data: [65, 59, 80, 81, 56, 55, 40, 50, 60],
                                      backgroundColor: "${getDummyNumbers.body.length > 1 ? '#01a4ff' : 'yellow'}",
                                      barPercentage: 0.4,
                                      borderRadius: 10,
                                    },
                                  ],
                              },
                            options:
                              {
                                plugins: {
                                  title: {
                                    "display": false
                                  },
                                  tooltip: {
                                    callbacks: {
                                      label: function (context) {
                                        let label = context.dataset.label || '';

                                        if (label) {
                                            label += ': ';
                                        }
                                        if (context.parsed.y !== null) {
                                            label += new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(context.parsed.y);
                                        }
                                        return label;
                                      }
                                    }
                                  }
                                }
                              }
                          }
                    - Chart:
                        id: myDoughnutChart
                        config: |
                          {
                            type: 'doughnut',
                            title: "I am Doughnut",
                            data:
                              {
                                labels: ["Red", "Blue", "Yellow"],
                                datasets:
                                  [
                                    {
                                      label: "",
                                      data: "${getDummyNumbers.body?.slice(0, 3)}",
                                      backgroundColor:
                                        [
                                          "rgb(255, 99, 132)",
                                          "rgb(54, 162, 235)",
                                          "rgb(255, 205, 86)",
                                        ],
                                      hoverOffset: 4,
                                      borderWidth: 1,
                                    },
                                  ]
                              },
                            options:
                              {
                                plugins: {
                                  legend: {
                                    "display": false
                                  },
                                },
                                cutout: '50%'
                              },
                              plugins: [{
                              beforeInit: function(chart, options) {
                                      console.log('yolo');
                                  }
                              }]
                          }
                    - Chart:
                        id: myLineChart
                        config: |
                          {
                            type: 'line',
                            title: "I am Line",
                            data:
                              {
                                labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep"],
                                datasets:
                                  [
                                    {
                                      label: "legend is displayed",
                                      data: [65, 59, 80, 81, 56, 55, 40, 50, 60],
                                      fill: 'start',
                                      backgroundColor: 'rgba(255, 99, 132, 0.5)',
                                    },
                                  ]
                              }
                          }
        - Card:
            styles:
              maxWidth: unset
              width: unset
              gap: 10px
            children:
              - Text:
                  styles:
                    names: heading-3
                  text: Progress
              - Progress:
                  display: linear
                  filledPercentage: 50
                  styles:
                    color: ${colors.primary['600']}
                    thickness: 4
                    backgroundColor: lime
              - Progress:
                  display: linear
                  styles:
                    color: ${colors.primary['600']}
                    thickness: 4
                    backgroundColor: ${colors.light['300']}
              - Progress:
                  display: linear
                  filledPercentage: 0
                  styles:
                    color: ${colors.primary['600']}
                    thickness: 4
                    backgroundColor: ${colors.light['200']}
        - Card:
            styles:
              maxWidth: unset
              width: unset
              gap: 10px
            children:
              - Text:
                  styles:
                    names: heading-3
                  text: Collapsible Testing
              - Collapsible:
                  headerStyle:
                    headerBg: "black"
                    textColor: "#5DCDC8"
                    borderColor: "#5DCDC8"
                    borderWidth: 2
                  contentStyle:
                    contentBg: "black"
                  expandIcon:
                    name: Remove
                    color: white
                  collapseIcon:
                    name: Add
                    color: white
                  items:
                    - key: "1"
                      label: What house is Harry Potter in?
                      children:
                        Text:
                          styles:
                            color: white
                          text: Harry Potter is in Gryffindor.
                    - key: "2"
                      label: Which subject does Professor Flitwick teach?
                      children:
                        Text:
                          styles:
                            color: white
                          text: Professor Flitwick teaches Charms.
                    - key: "3"
                      label: Who is the half blood prince?
                      children:
                        Text:
                          styles:
                            color: white
                          text: The half blood prince is Severus Snape.
              - Accordion:
                  expandIconPosition: "end"
                  limitExpandedToOne: true
                  items:
                    - key: "key1"
                      label: Here is my label key 1
                      children:
                        Text:
                          text: Here is my value key 1
                    - key: "key2"
                      label: Here is my label key 2
                      children:
                        Text:
                          text: Here is my value key 2
                  onCollapse:
                    executeCode: |
                      console.log('HelloC', data)
        - Card:
            styles:
              maxWidth: unset
              width: unset
              gap: 10px
            children:
              - Text:
                  styles:
                    names: heading-3
                  text: Dropdown
              - MultiSelect:
                  label: Choose multiple
                  id: multiSelect1
                  styles:
                    multiSelectBackgroundColor: "khaki"
                    multiSelectBorderWidth: 4px
                    multiSelectBorderColor: "red"
                    multiSelectPadding: 10px
                    multiSelectMaxWidth: 200px
                    backgroundColor: "yellow"
                    selectedBackgroundColor: "green"
                    selectedTextColor: "orange"
                  data:
                    - label: Option 1
                      value: option1
                    - label: Option 2
                      value: option2
              - MultiSelect:
                  label: Choose multiple 2
                  id: multiSelect2
                  styles:
                    selectedBackgroundColor: "blue"
                    selectedTextColor: "aqua"
                  data:
                    - label: Option 1
                      value: option1
                    - label: Option 2
                      value: option2
                    - label: Option 3
                      value: option3
              - Dropdown:
                  id: myDropdown123
                  label: Simple
                  hintText: Hint Text
                  styles:
                    dropdownBorderWidth: 3px
                    dropdownBorderColor: "lime"
                    dropdownPadding: 10px
                    dropdownMaxWidth: 200px
                    dropdownMinHeight: 50px
                    dropdownBackgroundColor: "red"
                    backgroundColor: "yellow"
                  items:
                    - label: Option 1
                      value: 1
                    - label: Option 2
                      value: 2
              - Button:
                  label: Open Dropdown
                  onTap:
                    executeCode: |
                      console.log(myDropdown)
              - Dropdown:
                  label: Searchable
                  hintText: Search
                  autoComplete: true
                  hintStyle:
                    color: "red"
                    fontSize: 20px
                  items:
                    - label: Option 1
                      value: option1
                    - label: Option 2
                      value: option2
              - Dropdown:
                  value: 11
                  label: With item template
                  styles:
                    dropdownBackgroundColor: aqua
                    backgroundColor: purple
                  labelStyle:
                    color: green
                    fontSize: 20
                    backgroundColor: "lightgreen"
                    borderRadius: 10
                  item-template:
                    data:
                      [
                        { name: "hello", value: 11 },
                        { name: "buyyy", value: 22 },
                      ]
                    name: product
                    value: ${product.value}
                    template:
                      Text:
                        text: ${product.name}
                  items:
                    - label: Option 1
                      value: option1
                    - label: Option 2
                      value: option2
                  onChange:
                    executeCode: |
                      console.log('selected value', value)
              - Dropdown:
                  label: With the label widget
                  hintText: Hint Text
                  value: 111
                  items:
                    - label:
                        Text:
                          text: Here is my label 1
                      value: 111
                    - label:
                        Text:
                          text: Here is my label 2
                      value: 222
              - Dropdown:
                  label: Ability to stop clearing selection
                  hintText: Hint Text
                  allowClear: ${false}
                  styles:
                    dropdownBorderWidth: 3px
                  items:
                    - label: Option 1
                      value: 1
                    - label: Option 2
                      value: 2
        - Card:
            styles:
              maxWidth: unset
              width: unset
            children:
              - Form:
                  styles:
                    labelPosition: top
                    gap: 20px
                  children:
                    - Text:
                        styles:
                          names: heading-3
                        text: Date Picker
                    - Date:
                        label: Example 1 - Date picker
                        hintText: Placeholder value
                        showCalendarIcon: false
                        styles:
                          width: 300px
                    - Date:
                        label: Example 2 - Date picker with restricted range
                        initialValue: "2021-01-20"
                        firstDate: "2021-01-15"
                        lastDate: "2021-01-25"
                    - Date:
                        id: onChangeDemoDate
                        label: Example 3 - onChange
                        hintText: Select a date
                        onChange:
                          executeCode:
                            body: |-
                              console.log(onChangeDemoDate);
                              onChangeDemo.setText('You selected: ' + onChangeDemoDate.value);
                    - Text:
                        id: onChangeDemo
        - DateRange:
            htmlAttributes:
              data-testid: daterange-test
            id: dateRange1
            enabled: true
            suffixIcon:
              name: HomeOutlined
            onChange:
              executeCode:
                body: |-
                  console.log(dateRange1.value);
        - Button:
            id: helloText
            label: Hello
            onTap:
              executeCode: |
                onChangeDemoDate.setValue("02/12/2024")
        - TabBar:
            items:
              - label: Home
                widget:
                  Text:
                    text: Hello
              - label: About
                icon:
                  name: HomeOutlined
                widget:
                  Text:
                    text: Hello 222
            tabStyles:
              tabNavBackgroundColor: yellow
              tabNavPadding: 10px 5px
              tabBorderRadius: 10
              tabBackgroundColor: orange
              tabNavBottomBorderShow: false
              tabNavBorderRadius: 10
            styles:
              activeTabBackgroundColor: red
              activeTabColor: white
              inkBarShow: false
              tabContentHolderBackgroundColor: green
              tabContentHolderBorderRadius: 10
              tabContentHolderPadding: 10px 5px
              tabPosition: "stretch"
        - DataGrid:
            DataColumns:
              - label:
                  Row:
                    crossAxis: center
                    children:
                      - Text:
                          text: Disclaimer
                      - Icon:
                          name: ErrorOutline
                          color: red
                          onMouseEnter:
                            executeCode: |-
                              console.log('hovered')
              - label: Name
            item-template:
              data: [1, 2]
              name: dummyData
              template:
                DataRow:
                  onTap:
                    navigateScreen:
                      name: forms
                  children:
                    - Text:
                        text: ${dummyData}
                    - Collapsible:
                        expandIconPosition: "end"
                        items:
                          - key: "2"
                            label: Here is my label 2
                            children:
                              Text:
                                text: Here is my value 2
                        onCollapse:
                          executeCode: |
                            console.log('HelloC', data)
        - Card:
            styles:
              maxWidth: unset
              width: unset
            children:
              - Markdown:
                  text: |
                    ### Toggle Button
              - Text:
                  id: toggleButtonText
                  text: button 1
                  styles:
                    visible: false
              - ToggleButton:
                  id: toggleButtonWidget
                  styles:
                    margin: "12px 0px 10px 0px"
                    spacing: 0
                    runSpacing: 3
                    color: blue
                    borderColor: ${colors.gray['200']}
                    backgroundColor: "aqua"
                    selectedColor: red
                    selectedBackgroundColor: green
                    selectedBorderColor: yellow
                  value: ${toggleButtonText.text}
                  items:
                    - label: Button 1
                      value: button 1
                    - label: Button 2
                      value: button 2
                  onChange:
                    executeCode: |-
                      console.log('toggle button changed: ' + value);
              - ToggleButton:
                  allowMultiple: true
                  styles:
                    spacing: 6
                    runSpacing: 4
                    borderColor: ${colors.gray['200']}
                    borderRadius: 18
                    selectedColor: white
                    selectedBackgroundColor: ${colors.primary['700']}
                  items:
                    - label: Sun
                      value: Sun
                      icon:
                        name: CheckCircleOutlined
                    - label: Mon
                      value: Mon
                      enabled: false
                    - label: Tue
                      value: Tue
                      styles:
                        backgroundColor: yellow
                    - label: Wed
                      value: Wed
                    - label: Thu
                      value: Thu
                    - label: Fri
                      value: Fri
                    - label: Sat
                      value: Sat
                  onChange:
                    executeCode: |-
                      console.log('toggle button changed: ' + value);
        - Card:
            styles:
              maxWidth: unset
              width: unset
            children:
              - Markdown:
                  text: |
                    ### Slider
              - Slider:
                  id: sliderWidget
                  initialValue: [30, 40]
                  styles:
                    maxWidth: unset
                  dots: true
                  range: true
                  min: 20
                  max: 40
                  value: 20
                  divisions: 10
                  onChange:
                    executeCode: |
                      console.log('Slider value changed: ' + value);
                  onComplete:
                    executeCode: |
                      console.log('Slider value completed: ' + value);
              - Button:
                  label: checkvalue
                  onTap:
                    executeCode: |
                      console.log('Slider value: ' + sliderWidget.value);
        - Card:
            styles:
              maxWidth: unset
              width: unset
              gap: 10px
            children:
              - Markdown:
                  text: |
                    ### Switch
              - Switch:
                  enabled: true
                  size: small
                  value: true
                  leadingText: Set to true and requred
                  htmlAttributes:
                    title: tooltip text
        - Card:
            styles:
              width: unset
              maxWidth: unset
            children:
              - Stepper:
                  id: workflowStepper
                  activeStepIndex: ${ensemble.storage.get('activeIndex')}
                  styles:
                    connectorColor: black
                    connectorHeight: 4
                    backgroundColor: green
                    padding: 20
                    borderRadius: 10
                  steps:
                    - stepLabel: Review Match
                      contentWidget:
                        Text:
                          text: Step 0
                    - stepLabel: Review
                      contentWidget:
                        Text:
                          text: Step 1
                    - stepLabel: SubmitDocs
                      contentWidget:
                        Text:
                          text: Step 2
                    - stepLabel: Track
                      contentWidget:
                        Text:
                          text: Step 3
                    - stepLabel: Enroll
                      contentWidget:
                        Text:
                          text: Step 4
                  item-template:
                    data:
                      - name: Review Match
                        iconName: Balance
                      - name: Obtain Consent
                        iconName: VerifiedUserOutlined
                      - name: Submit Docs
                        iconName: Check
                      - name: Track
                        iconName: FingerprintOutlined
                      - name: Enroll
                        iconName: ThumbUpAltOutlined
                    name: step
                    template:
                      Row:
                        children:
                          - Icon:
                              name: ${step.iconName}
                          - Text:
                              text: ${step.name}
              - Button:
                  label: Next
                  onTap:
                    executeCode: |
                      workflowStepper.handleNext();
              - Button:
                  label: Prev
                  onTap:
                    executeCode: |
                      workflowStepper.handleBack();
        - Card:
            styles:
              maxWidth: unset
              width: unset
              gap: 10px
            children:
              - Text:
                  styles:
                    names: heading-3
                  text: Dynamic options Dropdown
              - Button:
                  label: load options
                  onTap:
                    invokeApi:
                      name: "getDummyProducts"
                      onResponse: |
                        ensemble.storage.set('dynamicDropdownOptions', response.body.products)
              - Dropdown:
                  label: With the label widget
                  hintText: Hint Text
                  value: 15
                  item-template:
                    data: ${ensemble.storage.get('dynamicDropdownOptions')}
                    name: product
                    value: ${product.id}
                    template:
                      Text:
                        text: ${product.title}
        - Card:
            styles:
              maxWidth: unset
              width: unset
              gap: 10px
            children:
              - Text:
                  styles:
                    names: heading-3
                  text: Custom widget in screen
              - Button:
        - Card:
            styles:
              maxWidth: unset
              width: unset
              gap: 10px
            children:
              - Text:
                  styles:
                    names: heading-3
                  text: Skeleton Widget
              - Skeleton:
                  useShimmer: true
                  styles:
                    height: 50px
        - Card:
            styles:
              maxWidth: unset
              width: unset
              gap: 10px
            children:
              - Text:
                  styles:
                    names: heading-3
                  text: Shape Widget
              - Shape:
                  useShimmer: true
                  styles:
                    height: 50px
        - Card:
            styles:
              maxWidth: unset
              width: unset
              gap: 10px
            children:
              - Text:
                  styles:
                    names: heading-3
                  text: QRCode Widget
              - QRCode:
                  id: qrcode
                  styles:
                    color: red
                    backgroundColor: yellow
                  value: sagar davara
              - Button:
                  label: Change QRCode value
                  onTap:
                    executeCode: |
                      qrcode.setValue('sagar davara 123')
              - QRCode:
                  icon: https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg
                  iconSize: 60
                  value: sagar davara
              - QRCode:
                  status: "scanned"
                  value: sagar davara
              - QRCode:
                  status: "expired"
                  value: sagar davara
                  onRefresh:
                    executeCode: |
                      console.log('refreshed')
        - Column:
            styles:
              padding: 20
            children:
              - Text:
                  text: Link Widget Examples
                  styles:
                    fontSize: 24
                    fontWeight: bold
                    marginBottom: 20

              - Card:
                  styles:
                    marginBottom: 20
                  children:
                    - Text:
                        text: Basic Internal Links
                        styles:
                          fontSize: 18
                          fontWeight: 600
                          marginBottom: 10
                    - Link:
                        url: /widgets
                        widget:
                          Text:
                            text: Go to Widgets Page
                    - Text:
                        text: " | "
                    - Link:
                        url: /forms
                        styles:
                          color: blue
                          hoverColor: red
                        widget:
                          Text:
                            text: Forms Page (with hover effect)

              - Card:
                  styles:
                    marginBottom: 20
                  children:
                    - Text:
                        text: External Links
                        styles:
                          fontSize: 18
                          fontWeight: 600
                          marginBottom: 10
                    - Link:
                        url: https://google.com
                        openNewTab: true
                        widget:
                          Text:
                            text: Google (opens in new tab)
                    - Text:
                        text: " | "
                    - Link:
                        url: mailto:test@example.com
                        widget:
                          Text:
                            text: Send Email

              - Card:
                  styles:
                    marginBottom: 20
                  children:
                    - Text:
                        text: Links with Custom Content
                        styles:
                          fontSize: 18
                          fontWeight: 600
                          marginBottom: 10
                    - Link:
                        url: /home
                        styles:
                          textDecoration: none
                          color: darkblue
                        widget:
                          Row:
                            children:
                              - Icon:
                                  name: home
                                  styles:
                                    marginRight: 8
                              - Text:
                                  text: Home Page
                                  styles:
                                    fontWeight: 500

              - Card:
                  styles:
                    marginBottom: 20
                  children:
                    - Text:
                        text: Link with Action
                        styles:
                          fontSize: 18
                          fontWeight: 600
                          marginBottom: 10
                    - Link:
                        url: /actions
                        onTap:
                          executeCode: |
                            console.log('Link clicked!');
                            ensemble.storage.set('lastClicked', 'Link to Actions');
                        widget:
                          Column:
                            children:
                              - Text:
                                  text: Actions Page (with console log)

              - Card:
                  styles:
                    marginBottom: 20
                  children:
                    - Text:
                        text: Dynamic Link with Inputs
                        styles:
                          fontSize: 18
                          fontWeight: 600
                          marginBottom: 10
                    - Button:
                        label: Set User ID
                        onTap:
                          executeCode: ensemble.storage.set('userId', 123)
                    - Text:
                        text: Refresh to see the Current User ID:${userId || 'not set'}
                    - Link:
                        url: /widgets
                        inputs: ${{"userId":ensemble.storage.get('userId')}}
                        widget:
                          Text:
                            text: Go to Widgets (with inputs)

              - Card:
                  children:
                    - Text:
                        text: Styled Links
                        styles:
                          fontSize: 18
                          fontWeight: 600
                          marginBottom: 10
                    - Row:
                        children:
                          - Link:
                              url: /test1
                              styles:
                                color: green
                                textDecoration: none
                                fontSize: 16
                              widget:
                                Text:
                                  text: Green Link
                          - Text:
                              text: " | "
                          - Link:
                              url: /test2
                              styles:
                                color: orange
                                textDecoration: underline
                                fontWeight: bold
                              widget:
                                Text:
                                  text: Orange Bold Link
                          - Text:
                              text: " | "
                          - Link:
                              url: /test3
                              styles:
                                color: purple
                                hoverColor: magenta
                                textDecoration: none
                                hoverTextDecoration: underline
                              widget:
                                Text:
                                  text: Purple Link (hover effects)

        - Row:
            children:
              - Search:
                  id: searchDefaultObject
                  value: # assuming this data is coming from server
                    id: 105
                    firstName: Emma
                    lastName: Wilson
                  styles:
                    width: 320px
                    height: 40px
                    borderRadius: 12
                    borderWidth: 2
                    borderStyle: solid
                    borderColor: "#B8BED6"
                  placeholder: Search
                  item-template:
                    data: |-
                      ${findUsers.body.users.map(user => ({id: user.id, firstName: user.firstName, lastName: user.lastName}))}
                    name: user
                    template:
                      SearchText:
                        inputs:
                          user: ${user}
                  selectedLabel:
                    SearchText:
                      inputs:
                        user: ${value.user}
                  searchKey: id
                  onSearch:
                    invokeAPI:
                      name: findUsers
                      inputs:
                        search: ${search}
                  onSelect:
                    executeCode: |
                      console.log(value)
                  onClear:
                    executeCode: |
                      console.log("Search cleared")
              - Text:
                  text: ${JSON.stringify(searchDefaultObject.value)}
              - Text:
                  text: ${JSON.stringify(findUsers.body.users.map((user) => user.id))}

SearchText:
  inputs:
    - user
  body:
    Text:
      text: ${user.firstName} ${user.lastName}
      styles:
        color: red

API:
  getDummyProducts:
    method: GET
    uri: https://dummyjson.com/products
  getDummyProductsByPaginate:
    method: GET
    uri: https://dummyjson.com/products?skip=${skip}&limit=${limit}
    inputs:
      - skip
      - limit
  getMockProducts:
    method: GET
    uri: https://661e111b98427bbbef034208.mockapi.io/products?sortBy=${sortBy}&order=${sortOrder}&limit=10
    inputs:
      - sortBy
      - sortOrder
  getDummyNumbers:
    method: GET
    uri: https://661e111b98427bbbef034208.mockapi.io/number?limit=10
    onResponse: |
      console.log('dummy number fetched')