dynaboard.yml

runtimeVersion: 0.4.1
name: Getting Started
description: ''
type: com.dynaboard/project
nodes:
  ROOT_NODE:
    type: ROOT_NODE
    name: ROOT_NODE
    slots:
      components:
        - nodeID: 61af232e-6b81-4544-8f00-c943e7c083a2
          orderKey: a0
      pages:
        - nodeID: 5aeb3de9-5348-4253-9b66-8f1c9d57b6a6
          orderKey: a0
        - nodeID: a58f0ad0-bc5d-417d-aace-8d94dffc2c7b
          orderKey: a0V
        - nodeID: 04ad44ef-195b-47a0-b261-f8bcb73fb459
          orderKey: a0l
      resources:
        - nodeID: 8f34af83-c724-4818-a0a9-4cbac532cfd5
          orderKey: a0
        - nodeID: 7818a6f7-3096-4a64-baf7-9fb2c3166de0
          orderKey: a1
        - nodeID: c038db71-e096-4432-bf8d-3e8bad052f6a
          orderKey: a2
        - nodeID: 1f81be44-bd5c-4161-a6e9-bebf92ca8a46
          orderKey: a3
  012aa7b7-a9d6-4e4b-a955-34295e508f10:
    type: LOCAL_VARIABLE
    name: isHovered
    properties:
      value: 'false'
  023e3997-1820-4356-8920-22a1e22776c1:
    type: TEXT
    name: textStepFirstComponentArea
    properties:
      fontSize: xl
      fontWeight: bold
      height: '2'
      isEnabled: '{{true}}'
      isVisible: '{{true}}'
      left: '4'
      maxHeight: none
      maxWidth: none
      minHeight: none
      minWidth: none
      showExternalIndicator: '{{false}}'
      textAlign: center
      top: '11'
      value: Drag a Component Here!
      width: '6'
  028529de-c8cf-4ea7-b57e-6e8467e32d35:
    type: CONTAINER
    name: spacer
    properties:
      isVisible: '{{true}}'
      isEnabled: '{{true}}'
      top: NaN
      left: NaN
      width: fill
      minWidth: none
      maxWidth: none
      height: 112px
      minHeight: none
      maxHeight: none
      backgroundColor: ''
      borderRadius: '0'
  04ad44ef-195b-47a0-b261-f8bcb73fb459:
    type: PAGE
    name: templates
    slots:
      canvas:
        - nodeID: 3273257f-e1c9-4698-92c2-c8d49cf3ff30
          orderKey: a0
        - nodeID: b46e2861-e155-4e98-94af-18fb160fe735
          orderKey: Zz
        - nodeID: 065f5066-9fc8-4136-a27c-82fccbfd31b1
          orderKey: a1
        - nodeID: 48d9fd9c-86a9-421f-9c3a-b7d595524ed1
          orderKey: ZzV
    properties:
      footerProps:
        element: ''
      headerProps:
        element: ''
      includeInSitemap: '{{true}}'
      layoutStyle: VERTICAL_STACK
      leftSidebarOpen: '{{true}}'
      leftSidebarProps:
        element: ''
      minWidth: 768px
      rightSidebarOpen: '{{true}}'
      rightSidebarProps:
        element: ''
      spacing: '8'
  065f5066-9fc8-4136-a27c-82fccbfd31b1:
    type: CONTAINER
    name: spacer
    properties:
      isVisible: '{{true}}'
      isEnabled: '{{true}}'
      top: NaN
      left: NaN
      width: fill
      minWidth: none
      maxWidth: none
      height: 80px
      minHeight: none
      maxHeight: none
      backgroundColor: ''
      borderRadius: '0'
  0a2f59fc-e7d1-4178-ac3d-09cb4c0e04f3:
    type: TEXT
    name: textHeader
    properties:
      fontSize: 3xl
      fontWeight: bold
      height: 60px
      isEnabled: '{{true}}'
      isVisible: '{{true}}'
      maxHeight: none
      maxWidth: none
      minHeight: none
      minWidth: none
      showExternalIndicator: '{{false}}'
      value: Welcome to Dynaboard!
      width: fill
  1e33b59d-d7b9-4230-bf59-6bd887aef34c:
    type: FUNCTION
    name: exampleDataBindingFunction
    properties:
      action:
        actionType: POP_TOAST
        dismissButton: Yum!
        duration: 5000
        message: I'm a {{inputStepBasicDataBinding.value || "Basic"}} toast!
        path: ''
        target: _self
        targetNode:
          ref: 8f34af83-c724-4818-a0a9-4cbac532cfd5
        variant: primary
      isEnabled: '{{true}}'
      loading: '{{false}}'
      runOnPageLoad: '{{false}}'
  1f81be44-bd5c-4161-a6e9-bebf92ca8a46:
    type: RESOURCE/ONE_TIME_PIN_AUTH
    name: oneTimePinAuth1
    properties:
      profiles:
        - environment: ''
          isSignInProvider: '{{true}}'
  27b866cc-0a43-4095-a3ef-950a03367663:
    type: TEXT
    name: textStepInteractingWithComponentsHeader
    properties:
      fontSize: xl
      fontWeight: bold
      height: '1'
      isEnabled: '{{true}}'
      isVisible: '{{true}}'
      maxHeight: none
      maxWidth: none
      minHeight: none
      minWidth: none
      showExternalIndicator: '{{false}}'
      value: 2) Interacting with Components
      verticalAlign: bottom
      width: '12'
  27d01e5e-95d7-4024-a816-c382f8b1fc69:
    type: TEXT
    name: textStepFirstComponentHeader
    properties:
      fontSize: xl
      fontWeight: bold
      height: '1'
      isEnabled: '{{true}}'
      isVisible: '{{true}}'
      maxHeight: none
      maxWidth: none
      minHeight: none
      minWidth: none
      showExternalIndicator: '{{false}}'
      value: 3) Add Your First Component
      verticalAlign: bottom
      width: '12'
  29bd4661-e2aa-40e0-bb02-df08e21ad388:
    type: TEXT
    name: textSubheader
    properties:
      height: 80px
      isEnabled: '{{true}}'
      isVisible: '{{true}}'
      maxHeight: none
      maxWidth: none
      minHeight: none
      minWidth: none
      renderMode: markdown
      showExternalIndicator: '{{false}}'
      styles: ''
      top: '5'
      value: >-
        This getting started guide is here to help you learn the ins and outs of
        Dynaboard in just a few minutes. Once you've learned the basics we have
        example apps, boilerplates, and [additional
        documentation](https://dynaboard.com/docs) to help you start building!
      verticalAlign: top
      width: fill
  30d8badd-70d9-4414-97b6-e07287e59f0c:
    type: TEXT
    name: textStepMakeThingsDynamicSubtitle
    properties:
      height: '7'
      isEnabled: '{{true}}'
      isVisible: '{{true}}'
      maxHeight: none
      maxWidth: none
      minHeight: none
      minWidth: none
      renderMode: markdown
      showExternalIndicator: '{{false}}'
      styles: ''
      top: '2'
      value: >-
        Now that you know how to interact with and select components to edit,
        let's learn more about how to make them dynamically respond to data! 


        Our "double-curly" syntax `{{ "{\{ \}\}" }}` lets you write code nearly
        anywhere you want (in nearly every property on both components and
        resources). We call this data binding, and we'll practice it in the next
        section. Switch back to `Test` mode and click the button below.
      verticalAlign: top
      width: '12'
  326d90c8-eb46-4b88-943d-a9545ac28c63:
    type: CHART
    name: chartAdvancedJS
    properties:
      allowLegend: '{{false}}'
      dataSource: |-
        {{
          Object.entries(
            getRandomExampleData.data.data.reduce((accumulator, currentValue) => {
              if (!accumulator[currentValue.accountType]) {
                accumulator[currentValue.accountType] = 1
              } else {
                accumulator[currentValue.accountType]++
              }
              return accumulator
            }, {})
          ).map((entry) => {
            return { accountType: entry[0], accountCount: entry[1] }
          })
        }}
      dimensions:
        - id: 410a976e-e589-4100-82b6-9b73aa074fe8
          key: Untitled Dimension 1
          lineShape: spline
          markerColor: purple.500
          mode: lines
          name: '# of Accounts'
          side: left
          type: bar
          yKey: accountCount
      height: '20'
      horizontalAxisTitle: Account Type
      isEnabled: '{{true}}'
      isInteractive: 'false'
      isVisible: '{{true}}'
      leftVerticalAxisTitle: '# of Accounts'
      maxHeight: none
      maxWidth: none
      minHeight: none
      minWidth: none
      title: Number of Accounts by Type
      top: '6'
      width: '12'
      xKey: accountType
  3273257f-e1c9-4698-92c2-c8d49cf3ff30:
    type: ITERATOR
    name: templateList
    properties:
      backgroundColor: none
      component: COMPONENT/61af232e-6b81-4544-8f00-c943e7c083a2
      data: |-
        [
          {
            templateImageLinkDark:
              "https://storage.googleapis.com/dynaboard-demo/TemplateImages/templateUsersDark.png",
            templateImageLinkLight:
              "https://storage.googleapis.com/dynaboard-demo/TemplateImages/templateUsersLight.png",
            templateTitleText: "User Admin Panel",
            templateDescText:
              "See how to build a data-driven UI in Dynaboard involving the data table.",
            cardLink: "https://dynaboard.new/dynaboard/dynaboard--data-table",
          },
          {
            templateImageLinkDark:
              "https://storage.googleapis.com/dynaboard-demo/TemplateImages/templateGPTDark.png",
            templateImageLinkLight:
              "https://storage.googleapis.com/dynaboard-demo/TemplateImages/templateGPTLight.png",
            templateTitleText: "GPT-3 Playground",
            templateDescText:
              "Get a head start on building your own GPT-3-powered application with a pre-built UI and included prompt examples.",
            cardLink: "https://dynaboard.new/dynaboard/dynaboard--gpt3-playground",
          },
          {
            templateImageLinkDark:
              "https://storage.googleapis.com/dynaboard-demo/TemplateImages/templateDemosDark.png",
            templateImageLinkLight:
              "https://storage.googleapis.com/dynaboard-demo/TemplateImages/templateDemosLight.png",
            templateTitleText: "Lightning Demos",
            templateDescText:
              "Experience a complete application that leverages Dynaboard's built-in KV store for application storage.",
            cardLink: "https://dynaboard.new/dynaboard/dynaboard--lightning-demos",
          },
          {
            templateImageLinkDark:
              "https://storage.googleapis.com/dynaboard-demo/TemplateImages/templateFeedDark.png",
            templateImageLinkLight:
              "https://storage.googleapis.com/dynaboard-demo/TemplateImages/templateFeedLight.png",
            templateTitleText: "Hacker News Clone",
            templateDescText:
              "Explore the advanced styling capabilities of Dynaboard, and see an example of a UI involving custom components.",
            cardLink: "https://dynaboard.new/dynaboard/dynaboard--hacker-news",
          },
          {
            templateImageLinkDark:
              "https://storage.googleapis.com/dynaboard-demo/TemplateImages/templateVizDark.png",
            templateImageLinkLight:
              "https://storage.googleapis.com/dynaboard-demo/TemplateImages/templateVizLight.png",
            templateTitleText: "Charts UI",
            templateDescText:
              "Dive into the charting capabilities of Dynaboard with a couple of different examples.",
            cardLink: "https://dynaboard.new/dynaboard/dynaboard--charts",
          },
          {
            templateImageLinkDark:
              "https://storage.googleapis.com/dynaboard-demo/TemplateImages/templatePrivateAppDark.png",
            templateImageLinkLight:
              "https://storage.googleapis.com/dynaboard-demo/TemplateImages/templatePrivateAppLight.png",
            templateTitleText: "Private App Boilerplate",
            templateDescText:
              "Learn how to build a private application in Dynaboard that requires authentication and how to secure it.",
            cardLink:
              "https://dynaboard.new/dynaboard/dynaboard--private-app-boilerplate",
          },
        ]
      distributeContent: around
      height: fill
      isEnabled: '{{true}}'
      isVisible: '{{true}}'
      layoutStyle: HORIZONTAL_STACK
      maxHeight: none
      maxWidth: none
      minHeight: none
      minWidth: none
      top: '6'
      width: fill
      wrapContent: wrap
  391855d8-83c4-421c-96ed-79d6be6f0d77:
    type: TEXT
    name: textStepFirstComponentBody
    properties:
      height: '6'
      isEnabled: '{{true}}'
      isVisible: '{{true}}'
      maxHeight: none
      maxWidth: none
      minHeight: none
      minWidth: none
      renderMode: markdown
      showExternalIndicator: '{{false}}'
      styles: ''
      top: '2'
      value: >-
        The data table, input, and dropdown are just a few of the UI components
        available in Dynaboard, so let's try adding some more components to this
        page. If you haven't already, switch back to `Edit` mode and check them
        out in the toolbar at the top of the screen.


        Once you've found a component you'd like to see, try dragging it into
        the container below. You can also delete the component by selecting it
        and pressing delete on your keyboard.
      verticalAlign: top
      width: '12'
  3dac381d-0c42-4b83-b852-d399441bf6a0:
    type: CONTAINER
    name: containerComponent
    slots:
      canvas:
        - nodeID: 023e3997-1820-4356-8920-22a1e22776c1
          orderKey: a0
    properties:
      backgroundColor: surface.200
      borderRadius: '0'
      gridRowHeight: '16'
      gridRows: '0'
      height: '18'
      isEnabled: '{{true}}'
      isVisible: '{{true}}'
      maxHeight: none
      maxWidth: none
      minHeight: none
      minWidth: none
      top: '9'
      width: '12'
  4298f146-c2ef-48a5-bebf-eca74cf71723:
    type: FUNCTION
    name: nextPage
    properties:
      action:
        actionType: NAVIGATE_TO_PAGE
        path: /templates
        target: _self
        targetNode:
          ref: 8f34af83-c724-4818-a0a9-4cbac532cfd5
      isEnabled: '{{true}}'
      loading: '{{false}}'
      runOnPageLoad: '{{false}}'
  4503712d-3187-402a-a8b4-4d37c68d14d9:
    type: TEXT
    name: textStepDataBindingInFunctionsHeader
    properties:
      fontSize: xl
      fontWeight: bold
      height: '1'
      isEnabled: '{{true}}'
      isVisible: '{{true}}'
      maxHeight: none
      maxWidth: none
      minHeight: none
      minWidth: none
      showExternalIndicator: '{{false}}'
      value: 2) Dynamic Behavior Inside of Functions
      verticalAlign: bottom
      width: '12'
  48d9fd9c-86a9-421f-9c3a-b7d595524ed1:
    type: TEXT
    name: textSubheader
    properties:
      isVisible: '{{true}}'
      isEnabled: '{{true}}'
      top: NaN
      left: NaN
      width: fill
      minWidth: none
      maxWidth: none
      minHeight: none
      maxHeight: none
      value: Click on a template to explore further.
      showExternalIndicator: '{{false}}'
      fontStyle: italic
  4bfa8df2-4df1-4a01-b8ea-3d6404038d18:
    type: TEXT
    name: descText
    properties:
      fontSize: sm
      height: '4'
      isEnabled: '{{true}}'
      isVisible: '{{true}}'
      maxHeight: none
      maxWidth: none
      minHeight: none
      minWidth: none
      renderMode: markdown
      showExternalIndicator: '{{false}}'
      styles: |-
        element.styles {
          padding-x: 8px;
        }
      top: '13'
      value: '{{ $props.templateDescText }}'
      verticalAlign: top
      width: '12'
  4dc07e3e-403d-499d-ad85-d8276a8b3bb6:
    type: INPUT
    name: inputStepBasicDataBinding
    properties:
      height: '2'
      isClearable: '{{false}}'
      isEnabled: '{{true}}'
      isRequired: '{{false}}'
      isVisible: '{{true}}'
      label: ''
      left: '2'
      maxHeight: none
      maxWidth: none
      minHeight: none
      minWidth: none
      placeholder: Basic
      top: '8'
      width: '10'
  51f3641d-40a2-427d-93b0-15de34669fc6:
    type: TEXT
    name: textStepAdvancedJSHeader
    properties:
      fontSize: xl
      fontWeight: bold
      height: '1'
      isEnabled: '{{true}}'
      isVisible: '{{true}}'
      maxHeight: none
      maxWidth: none
      minHeight: none
      minWidth: none
      showExternalIndicator: '{{false}}'
      value: 3) Advanced JavaScript Example
      verticalAlign: bottom
      width: '12'
  55ff6f4e-a38f-4649-aada-3ce074dce023:
    type: CONTAINER
    name: stepBasicDataBinding
    slots:
      canvas:
        - nodeID: d0d4161b-ad10-46a8-92ac-493b442caa22
          orderKey: Zx
        - nodeID: deacc279-17c8-47c2-ba93-28fa0bc45e3e
          orderKey: ZxV
        - nodeID: 4dc07e3e-403d-499d-ad85-d8276a8b3bb6
          orderKey: Zy
        - nodeID: 86be3c07-c257-4a81-ba5d-727e7f0b5fef
          orderKey: ZzV
    properties:
      backgroundColor: surface.100
      borderRadius: '5'
      gridRowHeight: '22'
      gridRows: '0'
      height: 364px
      isEnabled: '{{true}}'
      isVisible: '{{true}}'
      maxHeight: none
      maxWidth: none
      minHeight: none
      minWidth: none
      styles: |-
        element.styles {
          border-width: 1px;
          border-color: text.muted;
        }
      top: '11'
      width: fill
  56967eac-f86e-46b9-b5ff-5d9afe635432:
    type: CONTAINER
    name: stepLetsGetStarted
    slots:
      canvas:
        - nodeID: fedeac1a-159b-4e19-af31-49aab150ab28
          orderKey: Zv
        - nodeID: 76169d73-f4ef-4df8-99a4-0d46b3c50ab5
          orderKey: Zz
        - nodeID: 601de6dc-8e7d-4935-a2f1-11914abd9944
          orderKey: ZzV
    properties:
      backgroundColor: surface.100
      borderRadius: '5'
      gridRowHeight: '22'
      gridRows: '0'
      height: fill
      isEnabled: '{{true}}'
      isVisible: '{{true}}'
      left: NaN
      maxHeight: none
      maxWidth: none
      minHeight: none
      minWidth: none
      styles: |-
        element.styles {
          border-width: 1px;
          border-color: text.muted;
        }
      top: NaN
      width: fill
  590f0a9f-7b03-4cfc-a76c-79689c4a9e7c:
    type: CONTAINER
    name: stepFirstComponent
    slots:
      canvas:
        - nodeID: 391855d8-83c4-421c-96ed-79d6be6f0d77
          orderKey: Zz
        - nodeID: 27d01e5e-95d7-4024-a816-c382f8b1fc69
          orderKey: Zy
        - nodeID: 3dac381d-0c42-4b83-b852-d399441bf6a0
          orderKey: Zx
    properties:
      backgroundColor: surface.100
      borderRadius: '5'
      gridRowHeight: '22'
      gridRows: '0'
      height: 620px
      isEnabled: '{{true}}'
      isVisible: '{{true}}'
      maxHeight: none
      maxWidth: none
      minHeight: none
      minWidth: none
      styles: |-
        element.styles {
          border-width: 1px;
          border-color: text.muted;
        }
      top: '80'
      width: fill
  5aeb3de9-5348-4253-9b66-8f1c9d57b6a6:
    type: PAGE
    name: index
    slots:
      canvas:
        - nodeID: 0a2f59fc-e7d1-4178-ac3d-09cb4c0e04f3
          orderKey: Zr
        - nodeID: 29bd4661-e2aa-40e0-bb02-df08e21ad388
          orderKey: Zs
        - nodeID: 56967eac-f86e-46b9-b5ff-5d9afe635432
          orderKey: Zt
        - nodeID: f1ba9371-abac-423d-9f17-00e6a54e1a3a
          orderKey: Zu
        - nodeID: 590f0a9f-7b03-4cfc-a76c-79689c4a9e7c
          orderKey: Zv
        - nodeID: d0bb41c4-ad04-4d6e-868e-eec0f4d13c8c
          orderKey: Zx
        - nodeID: 8b7ab47e-914b-4e6e-82d7-8330106fa4c5
          orderKey: Zy
      functions:
        - nodeID: 8cba5efc-01ce-402f-832e-0ab517766f2d
          orderKey: a0
        - nodeID: 65bbb933-2f04-4796-afe7-506194721d32
          orderKey: Zz
    properties:
      layoutStyle: VERTICAL_STACK
      minHeight: 1280px
      minWidth: 768px
      styles: |-
        element.styles {

        }
      spacing: '8'
      headerProps: {}
      leftSidebarProps: {}
      rightSidebarProps: {}
      footerProps: {}
  601de6dc-8e7d-4935-a2f1-11914abd9944:
    type: INLINE_REACT
    name: iconStepLetsGetStarted
    properties:
      componentSource: |-
        return function Component() {
          return (
            <div className="size">
              <svg viewBox="0 0 16 16" focusable="false"><g fill="none" fill-rule="evenodd"><path fill="rgb(105, 103, 226)" d="M6.39694 0C5.51572 0 4.79694 0.718781 4.79694 1.6V8.95242L4.32073 8.47621C3.68578 7.84126 2.70809 7.84126 2.07315 8.47621C1.53992 9.00943 1.48033 9.85322 2.00651 10.6425C2.12544 10.8209 2.27822 11.0682 2.45695 11.3574L2.457 11.3575C2.87213 12.0293 3.4272 12.9276 4.02308 13.7157C4.45711 14.2897 4.94057 14.8459 5.45285 15.263C5.9572 15.6737 6.5512 16 7.19694 16H10.0769C11.252 16 12.3417 15.6326 13.1459 14.9366C13.9574 14.2344 14.4503 13.2201 14.4503 12V8C14.4503 7.11878 13.7315 6.4 12.8503 6.4C12.6303 6.4 12.4132 6.44623 12.2121 6.53067C12.0328 5.84327 11.4058 5.33335 10.6636 5.33335C10.4556 5.33335 10.2566 5.3734 10.074 5.44619C9.8886 4.76781 9.26606 4.2667 8.53027 4.2667C8.34342 4.2667 8.16388 4.29901 7.99694 4.35834V1.6C7.99694 0.718781 7.27816 0 6.39694 0ZM6.93027 5.86365C6.93027 5.86467 6.93027 5.86568 6.93027 5.8667L6.93027 8.53333C6.93027 8.82789 7.16905 9.06667 7.46361 9.06667C7.75816 9.06667 7.99694 8.82789 7.99694 8.53333V5.86495C7.9979 5.57362 8.23874 5.33336 8.53027 5.33336C8.82238 5.33336 9.0636 5.57458 9.0636 5.8667V6.9316L9.0636 6.93335V8.53335L9.0636 8.53336C9.0636 8.74213 9.18355 8.92288 9.35829 9.01046C9.43009 9.04644 9.51115 9.0667 9.59694 9.0667C9.78103 9.0667 9.94334 8.97342 10.0392 8.83156C10.0967 8.74644 10.1303 8.64382 10.1303 8.53336V8.53335V6.93335C10.1303 6.64124 10.3715 6.40002 10.6636 6.40002C10.9557 6.40002 11.1969 6.64124 11.1969 6.93335V8.53335C11.1969 8.82791 11.4357 9.06669 11.7303 9.06669C12.0248 9.06669 12.2636 8.82791 12.2636 8.53335L12.2636 8.53333V8C12.2636 7.74083 12.5241 7.46667 12.8503 7.46667C13.1424 7.46667 13.3836 7.70789 13.3836 8V12C13.3836 12.9133 13.0231 13.6323 12.4479 14.13C11.8655 14.6341 11.0352 14.9333 10.0769 14.9333H7.19694C6.90934 14.9333 6.55163 14.7821 6.12635 14.4358C5.70901 14.096 5.28491 13.6159 4.8739 13.0723C4.30692 12.3225 3.81624 11.5272 3.41222 10.8723L3.4122 10.8723C3.21937 10.5598 3.04627 10.2792 2.89403 10.0508C2.73854 9.81759 2.70253 9.63454 2.70811 9.51184C2.71364 9.39048 2.76036 9.29749 2.82739 9.23046C3.04578 9.01207 3.34809 9.01207 3.56648 9.23046L4.95315 10.6171C5.10568 10.7697 5.33507 10.8153 5.53437 10.7327C5.73366 10.6502 5.8636 10.4557 5.8636 10.24V1.6C5.8636 1.30789 6.10482 1.06667 6.39694 1.06667C6.68905 1.06667 6.93027 1.30789 6.93027 1.6V5.86365Z"></path></g></svg>
            </div>
          )
        }
      height: '3'
      isEnabled: '{{true}}'
      isVisible: '{{true}}'
      left: '11'
      maxHeight: none
      maxWidth: none
      minHeight: none
      minWidth: none
      styles: |-
        .size {
          width: 64px;
          height: 64px;
        }
      top: '3'
      width: '1'
  61af232e-6b81-4544-8f00-c943e7c083a2:
    type: COMPONENT
    name: templateCard
    slots:
      canvas:
        - nodeID: fe6a3b00-f219-4206-84f0-43573e303287
          orderKey: Zx
      functions:
        - nodeID: b42829d1-aa52-43c2-8ee4-9ea82493b792
          orderKey: a0
        - nodeID: 9418e4db-0967-4db8-9668-306a872d2f98
          orderKey: a1
        - nodeID: 9f82d272-1437-45d7-9c81-75a56afce5fb
          orderKey: a2
      variables:
        - nodeID: 012aa7b7-a9d6-4e4b-a955-34295e508f10
          orderKey: a0
    properties:
      height: 338px
      maxWidth: 420px
      minWidth: 340px
      overflow: visible
      width: '{{ $app.viewportWidth < 1024 ? ''340px'' : ''420px'' }}'
      props:
        - id: a7f3279e-01e7-4743-adb1-a2631c4743c0
          key: templateImageLinkDark
          displayName: ''
          description: ''
          propType: string
          defaultValue: >-
            https://dynaboard.app/_next/image?url=https%3A%2F%2Fapp-cdn.dynaboard.app%2Fportal-app%2F_next%2Fstatic%2Fmedia%2FtemplateGPTDark.70117c38.png&w=640&q=75
        - id: ae03d5ff-200e-4df5-8533-de4012932243
          key: templateImageLinkLight
          description: ''
          propType: string
          defaultValue: >-
            https://dynaboard.app/_next/image?url=https%3A%2F%2Fapp-cdn.dynaboard.app%2Fportal-app%2F_next%2Fstatic%2Fmedia%2FtemplateGPTLight.eb1c3bb2.png&w=640&q=75
        - id: 25b7aa4b-d5d2-4f97-8dfd-6567560c78b7
          key: templateTitleText
          displayName: Template Title
          description: ''
          propType: string
          defaultValue: Example Template
        - id: 5b1ce7b8-352d-49e1-9bd6-21d09982ece6
          key: templateDescText
          displayName: Template Description
          description: ''
          propType: string
          defaultValue: >-
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua.
        - id: faa65410-677a-4307-b04b-a4a9ae7f2fb4
          key: cardLink
          displayName: link
          description: ''
          propType: string
          defaultValue: https://dynaboard.new/
  652f196d-4253-4f9c-85b8-1f844f60937f:
    type: CONTAINER
    name: stepNextUp
    slots:
      canvas:
        - nodeID: b64f391f-38be-4947-bf38-496abb546f3a
          orderKey: Zy
        - nodeID: 83ec7aea-9262-46aa-a18f-4badca4579e2
          orderKey: Zz
        - nodeID: f9f22903-fa56-4182-b327-af0acdec0d36
          orderKey: a0
    properties:
      backgroundColor: surface.100
      borderRadius: '5'
      gridRowHeight: '22'
      gridRows: '0'
      height: 220px
      isEnabled: '{{true}}'
      isVisible: '{{true}}'
      maxHeight: none
      maxWidth: none
      minHeight: none
      minWidth: none
      styles: |-
        element.styles {
          border-width: 1px;
          border-color: text.muted;
        }
      top: '102'
      width: fill
  65bbb933-2f04-4796-afe7-506194721d32:
    type: FUNCTION
    name: getRandomExampleData
    properties:
      action:
        actionType: PERFORM_REQUEST
        body: ''
        bodyType: application/json
        headers: []
        method: GET
        path: '?size=30'
        targetNode:
          ref: c038db71-e096-4432-bf8d-3e8bad052f6a
      isEnabled: '{{true}}'
      loading: '{{false}}'
      runOnPageLoad: true
  73db1033-fbf3-4277-8ec1-b75de844859d:
    type: TEXT
    name: textHeader
    properties:
      fontSize: 3xl
      fontWeight: bold
      height: 60px
      isEnabled: '{{true}}'
      isVisible: '{{true}}'
      maxHeight: none
      maxWidth: none
      minHeight: none
      minWidth: none
      showExternalIndicator: '{{false}}'
      value: Make Apps Dynamic with {{ "{{ Code \}}" }}
      width: fill
  76169d73-f4ef-4df8-99a4-0d46b3c50ab5:
    type: TEXT
    name: textStepLetsGetStartedBody
    properties:
      height: '11'
      isEnabled: '{{true}}'
      isVisible: '{{true}}'
      maxHeight: none
      maxWidth: none
      minHeight: none
      minWidth: none
      renderMode: markdown
      showExternalIndicator: '{{false}}'
      styles: ''
      top: '2'
      value: >-
        In order to get started, switch to `Test` mode by clicking the button in
        the floating action bar at the bottom of the screen.


        `Test` mode lets you test and use UI components. Once you have swapped
        modes, scroll down to the next section to see some UI components in
        action.
      verticalAlign: top
      width: '9'
  7818a6f7-3096-4a64-baf7-9fb2c3166de0:
    type: RESOURCE/TYPESCRIPT_CLIENT
    name: typescriptClient1
  781e9c93-ea0f-4707-a7d6-d9a76fc41f84:
    type: TEXT
    name: textStepMakeThingsDynamicTitle
    properties:
      fontSize: xl
      fontWeight: bold
      height: '1'
      isEnabled: '{{true}}'
      isVisible: '{{true}}'
      maxHeight: none
      maxWidth: none
      minHeight: none
      minWidth: none
      showExternalIndicator: '{{false}}'
      value: '4) Next: Make Apps Dynamic with {{ "{{ Code \}}" }}'
      verticalAlign: bottom
      width: '12'
  7e0ee4db-ca2e-4b47-8b08-e060969c486e:
    type: TEXT
    name: textStepAdvancedJSBody
    properties:
      height: '3'
      isEnabled: '{{true}}'
      isVisible: '{{true}}'
      maxHeight: none
      maxWidth: none
      minHeight: none
      minWidth: none
      renderMode: markdown
      showExternalIndicator: '{{false}}'
      styles: |-
        :root {
          /* https://developer.mozilla.org/en-US/docs/Web/CSS/:root */
        }

        a {
          color: #6968C3;
          font-weight: 400;
          text-decoration: underline;
        }

        h1, h2, h3 {
          font-weight: 400;
          margin-bottom: 5px;
        }

        h4, h5, h6 {
          font-weight: 500;
          margin-bottom: 5px;
        }

        p {
          line-height: 1.8;
        }

        ol {
          margin-top: 10px;
        }

        ul {
          margin-top: 10px;
        }

        li {
          line-height: 1.6;
        }

        li em {
          line-height: 1.6;
        }

        code {
          padding: 0px 4px;
          border-radius: 4px;
        }
      top: '2'
      value: >-
        So far, we’ve only returned a basic string value inside of a data
        binding. However, it’s possible to do much more. In the example below,
        we’re mapping over and returning a JSON object to populate the chart.
      verticalAlign: top
      width: '12'
  83ec7aea-9262-46aa-a18f-4badca4579e2:
    type: TEXT
    name: textStepNextUpBody
    properties:
      height: '3'
      isEnabled: '{{true}}'
      isVisible: '{{true}}'
      maxHeight: none
      maxWidth: none
      minHeight: none
      minWidth: none
      renderMode: markdown
      showExternalIndicator: '{{false}}'
      styles: |-
        :root {
          /* https://developer.mozilla.org/en-US/docs/Web/CSS/:root */
        }

        a {
          color: #6968C3;
          font-weight: 400;
          text-decoration: underline;
        }

        h1, h2, h3 {
          font-weight: 400;
          margin-bottom: 5px;
        }

        h4, h5, h6 {
          font-weight: 500;
          margin-bottom: 5px;
        }

        p {
          line-height: 1.8;
        }

        ol {
          margin-top: 10px;
        }

        ul {
          margin-top: 10px;
        }

        li {
          line-height: 1.6;
        }

        li em {
          line-height: 1.6;
        }

        code {
          padding: 0px 4px;
          border-radius: 4px;
        }
      top: '2'
      value: >-
        Data binding and functions go together hand-in-hand as a way to pass
        data back and forth between the UI of your application and back-end
        resources. The templates on the next page provide different examples of
        how this works in practice.
      verticalAlign: top
      width: '12'
  8463cf78-496e-4757-bfcc-af3ba1a79ae8:
    type: TEXT
    name: textStepInteractingWithComponentsBody
    properties:
      height: '5'
      isEnabled: '{{true}}'
      isVisible: '{{true}}'
      maxHeight: none
      maxWidth: none
      minHeight: none
      minWidth: none
      renderMode: markdown
      showExternalIndicator: '{{false}}'
      styles: ''
      top: '2'
      value: >-
        Below we have a small user account management example that includes a
        data table, text input, and dropdown. With `Test` mode selected choose
        an account type, search for an account owner, or sort the data table.
      verticalAlign: top
      width: '12'
  86be3c07-c257-4a81-ba5d-727e7f0b5fef:
    type: TEXT
    name: textStepBasicDataBindingBody2
    properties:
      height: '4'
      isEnabled: '{{true}}'
      isVisible: '{{true}}'
      maxHeight: none
      maxWidth: none
      minHeight: none
      minWidth: none
      renderMode: markdown
      showExternalIndicator: '{{false}}'
      styles: ''
      top: '12'
      value: >-
        To see how it works select the header of this section. Once you've
        selected it, look in the `Value` field under the `Content` section in
        the properties panel on the right side of the screen.
      verticalAlign: top
      width: '12'
  8b7ab47e-914b-4e6e-82d7-8330106fa4c5:
    type: CONTAINER
    name: spacer
    properties:
      isVisible: '{{true}}'
      isEnabled: '{{true}}'
      top: NaN
      left: NaN
      width: fill
      minWidth: none
      maxWidth: none
      height: 192px
      minHeight: none
      maxHeight: none
      backgroundColor: ''
      boxShadow: '0'
      borderRadius: '0'
  8cba5efc-01ce-402f-832e-0ab517766f2d:
    type: FUNCTION
    name: nextPage
    properties:
      action:
        actionType: NAVIGATE_TO_PAGE
        path: /dynamic
        target: _self
        targetNode:
          ref: 8f34af83-c724-4818-a0a9-4cbac532cfd5
      isEnabled: '{{true}}'
      loading: '{{false}}'
      runOnPageLoad: '{{false}}'
  8f34af83-c724-4818-a0a9-4cbac532cfd5:
    type: RESOURCE/BROWSER
    name: browser1
  9418e4db-0967-4db8-9668-306a872d2f98:
    type: FUNCTION
    name: onHover
    properties:
      isEnabled: '{{true}}'
      loading: '{{false}}'
      action:
        code: isHovered.value = true
        targetNode:
          ref: 7818a6f7-3096-4a64-baf7-9fb2c3166de0
        actionType: CALL_CLIENT_FUNCTION
      runOnPageLoad: '{{false}}'
  968665fc-0536-405a-ab31-861ead1f98db:
    type: TEXT
    name: titleText
    properties:
      fontSize: xl
      fontWeight: bold
      height: '2'
      isEnabled: '{{true}}'
      isVisible: '{{true}}'
      maxHeight: none
      maxWidth: none
      minHeight: none
      minWidth: none
      showExternalIndicator: '{{false}}'
      styles: |-
        element.styles {
          padding-x: 8px;
        }
      top: '11'
      value: '{{$props.templateTitleText}}'
      verticalAlign: bottom
      width: '12'
  97c5eeb2-6924-4130-806f-eb8abd4c2a8f:
    type: MEDIA
    name: coverImage
    properties:
      height: '10'
      isDisabled: '{{false}}'
      isEnabled: '{{true}}'
      isVisible: '{{true}}'
      maxHeight: none
      maxWidth: none
      minHeight: none
      minWidth: none
      styles: |-
        element.styles {
          border-radius: 2px;
          box-shadow: 0 0 0 1px {{$app.colorMode === 'dark' ? 'rgba(255, 255, 255, 0.2)' : 'rgba(0, 0, 0, 0.2)' }};
        }
      type: image
      url: >-
        {{ $app.colorMode === 'dark' ? $props.templateImageLinkDark :
        $props.templateImageLinkLight }}
      width: '12'
  9a8d82c6-efab-42c6-a742-e05e3f310737:
    type: CONTAINER
    name: stepAdvancedJS
    slots:
      canvas:
        - nodeID: 51f3641d-40a2-427d-93b0-15de34669fc6
          orderKey: Zw
        - nodeID: 7e0ee4db-ca2e-4b47-8b08-e060969c486e
          orderKey: ZwV
        - nodeID: 326d90c8-eb46-4b88-943d-a9545ac28c63
          orderKey: Zx
        - nodeID: ae3a9824-13d0-4c6b-bc7a-1d2fb4dd8ba7
          orderKey: Zz
    properties:
      backgroundColor: surface.100
      borderRadius: '5'
      gridRowHeight: '22'
      gridRows: '0'
      height: 684px
      isEnabled: '{{true}}'
      isVisible: '{{true}}'
      maxHeight: none
      maxWidth: none
      minHeight: none
      minWidth: none
      styles: |-
        element.styles {
          border-width: 1px;
          border-color: text.muted;
        }
      top: '58'
      width: fill
  9f82d272-1437-45d7-9c81-75a56afce5fb:
    type: FUNCTION
    name: onLeave
    properties:
      isEnabled: '{{true}}'
      loading: '{{false}}'
      action:
        code: isHovered.value = false
        targetNode:
          ref: 7818a6f7-3096-4a64-baf7-9fb2c3166de0
        actionType: CALL_CLIENT_FUNCTION
      runOnPageLoad: '{{false}}'
  a58f0ad0-bc5d-417d-aace-8d94dffc2c7b:
    type: PAGE
    name: dynamic
    slots:
      canvas:
        - nodeID: 73db1033-fbf3-4277-8ec1-b75de844859d
          orderKey: Zw
        - nodeID: d6ece88b-6cb6-48a8-b9d4-1cc58e027bd8
          orderKey: ZwV
        - nodeID: 55ff6f4e-a38f-4649-aada-3ce074dce023
          orderKey: Zy
        - nodeID: c78855dc-87d5-45ef-8dc0-5c933e7ef00a
          orderKey: ZyG
        - nodeID: 9a8d82c6-efab-42c6-a742-e05e3f310737
          orderKey: ZyV
        - nodeID: 652f196d-4253-4f9c-85b8-1f844f60937f
          orderKey: Zz
        - nodeID: 028529de-c8cf-4ea7-b57e-6e8467e32d35
          orderKey: a0
      functions:
        - nodeID: 4298f146-c2ef-48a5-bebf-eca74cf71723
          orderKey: Zy
        - nodeID: abf20f79-e93b-4b3c-90dd-824d8e434e05
          orderKey: Zz
        - nodeID: 1e33b59d-d7b9-4230-bf59-6bd887aef34c
          orderKey: a0
    properties:
      includeInSitemap: '{{true}}'
      layoutStyle: VERTICAL_STACK
      minHeight: 1964px
      minWidth: 768px
      spacing: '8'
      headerProps: {}
      leftSidebarProps: {}
      rightSidebarProps: {}
      footerProps: {}
  a9c92a59-ccd1-44fd-9754-04929855e061:
    type: TEXT
    name: textStepDataBindingInFunctionsBody
    properties:
      height: '3'
      isEnabled: '{{true}}'
      isVisible: '{{true}}'
      maxHeight: none
      maxWidth: none
      minHeight: none
      minWidth: none
      renderMode: markdown
      showExternalIndicator: '{{false}}'
      styles: ''
      top: '2'
      value: >-
        Data binding also works inside of functions that aren’t already
        JavaScript (it is typically not necessary inside TypeScript functions).
        The button below is attached to a function that opens a toast message.
      verticalAlign: top
      width: '12'
  abf20f79-e93b-4b3c-90dd-824d8e434e05:
    type: FUNCTION
    name: getRandomExampleData
    properties:
      action:
        actionType: PERFORM_REQUEST
        body: ''
        bodyType: application/json
        headers: []
        method: GET
        path: '?size=20'
        targetNode:
          ref: c038db71-e096-4432-bf8d-3e8bad052f6a
      isEnabled: '{{true}}'
      loading: '{{false}}'
      runOnPageLoad: '{{true}}'
  ae3a9824-13d0-4c6b-bc7a-1d2fb4dd8ba7:
    type: TEXT
    name: textStepAdvancedJSBody2
    properties:
      height: '3'
      isEnabled: '{{true}}'
      isVisible: '{{true}}'
      maxHeight: none
      maxWidth: none
      minHeight: none
      minWidth: none
      renderMode: markdown
      showExternalIndicator: '{{false}}'
      styles: |-
        :root {
          /* https://developer.mozilla.org/en-US/docs/Web/CSS/:root */
        }

        a {
          color: #6968C3;
          font-weight: 400;
          text-decoration: underline;
        }

        h1, h2, h3 {
          font-weight: 400;
          margin-bottom: 5px;
        }

        h4, h5, h6 {
          font-weight: 500;
          margin-bottom: 5px;
        }

        p {
          line-height: 1.8;
        }

        ol {
          margin-top: 10px;
        }

        ul {
          margin-top: 10px;
        }

        li {
          line-height: 1.6;
        }

        li em {
          line-height: 1.6;
        }

        code {
          padding: 0px 4px;
          border-radius: 4px;
        }
      top: '27'
      value: >-
        You can see what the code looks like by selecting the chart and going to
        the `Data Source` under the `Data` panel on the chart.
      verticalAlign: top
      width: '12'
  b1d8f4ab-d246-4c87-942a-3c4ee43d450c:
    type: DATA_TABLE
    name: dataTableStepLoadingData
    properties:
      autoColumns: false
      autoselectFirstRow: '{{false}}'
      columns:
        - header: accountID
          accessor: accountID
          id: a38a63d3-568a-4983-aba9-2f554178b991
          width: 0
          minWidth: 15
          renderAs: default
          dateTimeFormat: MMMM dd, y 'at' ttt
          widthUnit: '%'
          minWidthUnit: '%'
          isVisible: 'true'
          allowSortBy: 'true'
          linkTarget: _blank
          buttonText: Button
          onButtonClick: null
        - header: accountOwner
          accessor: accountOwner
          id: ff47e8c8-b5ec-4682-a768-0fc9775d7338
          width: 0
          minWidth: 15
          renderAs: default
          dateTimeFormat: MMMM dd, y 'at' ttt
          widthUnit: '%'
          minWidthUnit: '%'
          isVisible: 'true'
          allowSortBy: 'true'
          linkTarget: _blank
          buttonText: Button
          onButtonClick: null
        - header: accountType
          accessor: accountType
          id: 69c247b2-edd0-4216-92c6-3b663ae4da19
          width: 19
          minWidth: 15
          renderAs: default
          dateTimeFormat: MMMM dd, y 'at' ttt
          widthUnit: '%'
          minWidthUnit: '%'
          isVisible: 'true'
          allowSortBy: 'true'
          linkTarget: _blank
          buttonText: Button
          onButtonClick: null
        - header: accountTotal
          accessor: accountTotal
          id: befcf09a-fa32-4a8a-b01a-e55baa11b23c
          width: 13
          minWidth: 15
          renderAs: default
          dateTimeFormat: MMMM dd, y 'at' ttt
          widthUnit: '%'
          minWidthUnit: '%'
          isVisible: 'true'
          allowSortBy: 'true'
          linkTarget: _blank
          buttonText: Button
          onButtonClick: null
        - header: currencyName
          accessor: currencyName
          id: fc121056-0a0c-41d4-89a7-567871103377
          width: 17
          minWidth: 15
          renderAs: default
          dateTimeFormat: MMMM dd, y 'at' ttt
          widthUnit: '%'
          minWidthUnit: '%'
          isVisible: 'true'
          allowSortBy: 'true'
          linkTarget: _blank
          buttonText: Button
          onButtonClick: null
        - header: currencyCode
          accessor: currencyCode
          id: 4d86d3a6-8366-4e86-a89b-5680cb21e2f1
          width: 15
          minWidth: 15
          renderAs: default
          dateTimeFormat: MMMM dd, y 'at' ttt
          widthUnit: '%'
          minWidthUnit: '%'
          isVisible: 'true'
          allowSortBy: 'true'
          linkTarget: _blank
          buttonText: Button
          onButtonClick: null
        - header: currencySymbol
          accessor: currencySymbol
          id: df7998a9-88ca-4f00-b24e-c470b04313da
          width: 0
          minWidth: 15
          renderAs: default
          dateTimeFormat: MMMM dd, y 'at' ttt
          widthUnit: '%'
          minWidthUnit: '%'
          isVisible: 'false'
          allowSortBy: 'true'
          linkTarget: _blank
          buttonText: Button
          onButtonClick: null
      data: |-
        {{
          getRandomExampleData.data.data
            .filter((item) => {
              return dropdownAccountType.value
                ? item.accountType === dropdownAccountType.value
                : true
            })
            .filter((item) => {
              return item.accountOwner
                .toLowerCase()
                .includes(inputStepInteractingWithComponents.value.toLowerCase())
            })
        }}
      flatten: '{{false}}'
      height: '21'
      isEnabled: '{{true}}'
      isVisible: '{{true}}'
      maxHeight: none
      maxWidth: none
      minHeight: none
      minWidth: none
      paginationEnabled: '{{false}}'
      top: '9'
      width: '12'
  b42829d1-aa52-43c2-8ee4-9ea82493b792:
    type: FUNCTION
    name: navigateToLink
    properties:
      action:
        actionType: NAVIGATE_TO_PAGE
        path: '{{$props.cardLink}}'
        target: _blank
        targetNode:
          ref: 8f34af83-c724-4818-a0a9-4cbac532cfd5
      isEnabled: '{{true}}'
      loading: '{{false}}'
      runOnPageLoad: '{{false}}'
  b46e2861-e155-4e98-94af-18fb160fe735:
    type: TEXT
    name: textHeader
    properties:
      fontSize: 3xl
      fontWeight: bold
      height: 60px
      isEnabled: '{{true}}'
      isVisible: '{{true}}'
      maxHeight: none
      maxWidth: none
      minHeight: none
      minWidth: none
      showExternalIndicator: '{{false}}'
      value: 🔍 Let's Explore Templates!
      width: fill
  b4c6c983-f33a-490b-9f5d-90d5e3c900b9:
    type: TEXT
    name: cardLink
    properties:
      height: '16'
      href: '{{$props.cardLink}}'
      isEnabled: '{{true}}'
      maxHeight: none
      maxWidth: none
      minHeight: none
      minWidth: none
      renderMode: link
      showExternalIndicator: '{{false}}'
      target: _blank
      textDecorationLine: underline
      value: ''
      width: '12'
      onHover:
        function:
          ref: 9418e4db-0967-4db8-9668-306a872d2f98
      onLeave:
        function:
          ref: 9f82d272-1437-45d7-9c81-75a56afce5fb
  b51f3f6c-56a1-496c-b5f2-f28b3a5137c0:
    type: TEXT
    name: textStepInteractingWithComponentsInfo
    properties:
      height: '9'
      isEnabled: '{{true}}'
      isVisible: '{{true}}'
      maxHeight: none
      maxWidth: none
      minHeight: none
      minWidth: none
      renderMode: markdown
      showExternalIndicator: '{{false}}'
      styles: ''
      top: '31'
      value: >-
        All components have either a `.data` property or `.value` property that
        becomes the displayed data. In the case of the table above we've
        dynamically loaded data from a function. Try switching back to `Edit`
        mode and selecting the table to see its properties.


        If you checked out the `.data` property of the table above, you probably
        noticed something interesting. That's our "double-curly" syntax! It lets
        you write TypeScript / JavaScript in locations where it isn't normally
        possible to load dynamic data.


        _We'll cover how the data table reacts in real-time to input field
        changes on the next page._
      verticalAlign: top
      width: '12'
  b64f391f-38be-4947-bf38-496abb546f3a:
    type: TEXT
    name: textStepNextUpHeader
    properties:
      fontSize: xl
      fontWeight: bold
      height: '1'
      isEnabled: '{{true}}'
      isVisible: '{{true}}'
      maxHeight: none
      maxWidth: none
      minHeight: none
      minWidth: none
      showExternalIndicator: '{{false}}'
      value: '4) Next: Get Started Quickly with Templates'
      verticalAlign: bottom
      width: '12'
  b94b1e88-800f-483c-a759-12fc670b8020:
    type: DROPDOWN
    name: dropdownAccountType
    properties:
      allowClearing: '{{true}}'
      caseSensitiveMatching: '{{false}}'
      enableFilter: '{{false}}'
      fuzzyMatching: '{{true}}'
      height: '2'
      isEnabled: '{{true}}'
      isRequired: '{{false}}'
      isVisible: '{{true}}'
      label: Account Type
      left: '7'
      maxHeight: none
      maxWidth: none
      minHeight: none
      minWidth: none
      top: '7'
      values: |-
        {{
          [
            ...getRandomExampleData.data.data.reduce((acc, current) => {
              return acc.add(current.accountType)
            }, new Set()),
          ]
        }}
      width: '6'
  c038db71-e096-4432-bf8d-3e8bad052f6a:
    type: RESOURCE/HTTP
    name: randomDataAPI
    properties:
      profiles:
        - baseURL: https://random-dynaboard.vercel.app/api/v2/finance
          environment: ''
          headers:
            - key: Content-Type
              value: application/json
  c1af4bdd-aacf-4d28-bcb9-8bc7ccade3ec:
    type: TEXT
    name: textStepDataBindingInFunctionsBody2
    properties:
      height: '4'
      isEnabled: '{{true}}'
      isVisible: '{{true}}'
      maxHeight: none
      maxWidth: none
      minHeight: none
      minWidth: none
      renderMode: markdown
      showExternalIndicator: '{{false}}'
      styles: ''
      top: '11'
      value: >-
        To see how it works, select the function in the bottom left corner of
        the screen under the `Page Functions` panel named
        `exampleDataBindingFunction`.
      verticalAlign: top
      width: '12'
  c78855dc-87d5-45ef-8dc0-5c933e7ef00a:
    type: CONTAINER
    name: stepDataBindingInFunctions
    slots:
      canvas:
        - nodeID: 4503712d-3187-402a-a8b4-4d37c68d14d9
          orderKey: Zy
        - nodeID: a9c92a59-ccd1-44fd-9754-04929855e061
          orderKey: ZzG
        - nodeID: dfb50d60-c27d-49bd-8e40-63436a68d44d
          orderKey: ZzK
        - nodeID: c1af4bdd-aacf-4d28-bcb9-8bc7ccade3ec
          orderKey: ZzO
    properties:
      backgroundColor: surface.100
      borderRadius: '5'
      gridRowHeight: '22'
      gridRows: '0'
      height: 348px
      isEnabled: '{{true}}'
      isVisible: '{{true}}'
      maxHeight: none
      maxWidth: none
      minHeight: none
      minWidth: none
      styles: |-
        element.styles {
          border-width: 1px;
          border-color: text.muted;
        }
      top: '35'
      width: fill
  d0bb41c4-ad04-4d6e-868e-eec0f4d13c8c:
    type: CONTAINER
    name: stepMakeThingsDynamic
    slots:
      canvas:
        - nodeID: e45f1ae2-44eb-43e4-80eb-9b2978a3b080
          orderKey: a0
        - nodeID: 30d8badd-70d9-4414-97b6-e07287e59f0c
          orderKey: Zz
        - nodeID: 781e9c93-ea0f-4707-a7d6-d9a76fc41f84
          orderKey: Zy
    properties:
      backgroundColor: surface.100
      borderRadius: '5'
      gridRowHeight: '22'
      gridRows: '0'
      height: 284px
      isEnabled: '{{true}}'
      isVisible: '{{true}}'
      left: NaN
      maxHeight: none
      maxWidth: none
      minHeight: none
      minWidth: none
      styles: |-
        element.styles {
          border-width: 1px;
          border-color: text.muted;
        }
      top: NaN
      width: fill
  d0d4161b-ad10-46a8-92ac-493b442caa22:
    type: TEXT
    name: textStepBasicDataBindingHeader
    properties:
      fontSize: xl
      fontWeight: bold
      height: '1'
      isEnabled: '{{true}}'
      isVisible: '{{true}}'
      maxHeight: none
      maxWidth: none
      minHeight: none
      minWidth: none
      showExternalIndicator: '{{false}}'
      value: 1) A {{inputStepBasicDataBinding.value || "Basic"}} Example
      verticalAlign: bottom
      width: '12'
  d6ece88b-6cb6-48a8-b9d4-1cc58e027bd8:
    type: TEXT
    name: textSubheader
    properties:
      height: 96px
      isEnabled: '{{true}}'
      isVisible: '{{true}}'
      maxHeight: none
      maxWidth: none
      minHeight: none
      minWidth: none
      renderMode: markdown
      showExternalIndicator: '{{false}}'
      styles: ''
      top: '5'
      value: >-
        Dynamic data binding using the "double-curly" syntax `{{ "{\{ code goes
        here \}\}" }}` is a core feature of building interactive Dynaboard apps.
        At a high level, interpolation lets you write JavaScript or TypeScript
        snippets and include their dynamic output almost anywhere.
      verticalAlign: top
      width: fill
  d8353231-00f6-46b7-a2fe-b4e8b7f9b616:
    type: INPUT
    name: inputStepInteractingWithComponents
    properties:
      height: '2'
      isClearable: '{{false}}'
      isEnabled: '{{true}}'
      isRequired: '{{false}}'
      isVisible: '{{true}}'
      label: Search
      maxHeight: none
      maxWidth: none
      minHeight: none
      minWidth: none
      placeholder: Owner Name
      top: '7'
      width: '6'
      accessoryLeft: icon
      accessoryLeftIcon: MagnifyingGlassIcon
  deacc279-17c8-47c2-ba93-28fa0bc45e3e:
    type: TEXT
    name: textStepBasicDataBindingBody
    properties:
      height: '4'
      isEnabled: '{{true}}'
      isVisible: '{{true}}'
      maxHeight: none
      maxWidth: none
      minHeight: none
      minWidth: none
      renderMode: markdown
      showExternalIndicator: '{{false}}'
      styles: ''
      top: '2'
      value: >-
        One common use of data binding is to have UI components update in
        real-time in response to data from functions, inputs, or other
        components. In this example we’ve connected the title of this section to
        the text input below (and given it a default value). Try typing in the
        input below:
      verticalAlign: top
      width: '12'
  dfb50d60-c27d-49bd-8e40-63436a68d44d:
    type: BUTTON
    name: buttonPopExampleToast
    properties:
      backgroundColor: purple.500
      height: '2'
      isEnabled: '{{true}}'
      isLoading: '{{false}}'
      isVisible: '{{true}}'
      left: '5'
      maxHeight: none
      maxWidth: none
      minHeight: none
      minWidth: none
      onClick:
        function:
          ref: 1e33b59d-d7b9-4230-bf59-6bd887aef34c
      text: Yum! Toast
      top: '7'
      width: '4'
  e45f1ae2-44eb-43e4-80eb-9b2978a3b080:
    type: BUTTON
    name: buttonStepMakeThingsDynamic
    properties:
      backgroundColor: purple.500
      height: '2'
      isEnabled: '{{true}}'
      isLoading: '{{false}}'
      isVisible: '{{true}}'
      left: '5'
      maxHeight: none
      maxWidth: none
      minHeight: none
      minWidth: none
      onClick:
        function:
          ref: 8cba5efc-01ce-402f-832e-0ab517766f2d
      text: Let's Make Things Dynamic!
      top: '9'
      width: '4'
  f1ba9371-abac-423d-9f17-00e6a54e1a3a:
    type: CONTAINER
    name: stepInteractingWithComponents
    slots:
      canvas:
        - nodeID: d8353231-00f6-46b7-a2fe-b4e8b7f9b616
          orderKey: Zy
        - nodeID: 8463cf78-496e-4757-bfcc-af3ba1a79ae8
          orderKey: ZwG
        - nodeID: 27b866cc-0a43-4095-a3ef-950a03367663
          orderKey: Zw
        - nodeID: b1d8f4ab-d246-4c87-942a-3c4ee43d450c
          orderKey: Zv
        - nodeID: b94b1e88-800f-483c-a759-12fc670b8020
          orderKey: Zu
        - nodeID: b51f3f6c-56a1-496c-b5f2-f28b3a5137c0
          orderKey: ZwV
    properties:
      backgroundColor: surface.100
      borderRadius: '5'
      gridRowHeight: '22'
      gridRows: '0'
      height: 920px
      isEnabled: '{{true}}'
      isVisible: '{{true}}'
      maxHeight: none
      maxWidth: none
      minHeight: none
      minWidth: none
      styles: |-
        element.styles {
          border-width: 1px;
          border-color: text.muted;
        }
      top: '24'
      width: fill
  f9d9207d-1b57-4bed-bd20-85144cfa8339:
    type: TEXT
    name: forkText
    properties:
      isVisible: '{{true}}'
      isEnabled: '{{true}}'
      top: '11'
      left: '9'
      width: '4'
      minWidth: none
      maxWidth: none
      height: '2'
      minHeight: none
      maxHeight: none
      styles: |-
        element.styles {
          padding-x: 8px;
        }
      value: Fork →
      showExternalIndicator: '{{false}}'
      fontSize: sm
      textAlign: right
      verticalAlign: bottom
      fontWeight: bold
      color: '{{isHovered.value ? ''text.primary'' : ''text.muted''}}'
  f9f22903-fa56-4182-b327-af0acdec0d36:
    type: BUTTON
    name: buttonNextUp
    properties:
      backgroundColor: purple.500
      height: '2'
      isEnabled: '{{true}}'
      isLoading: '{{false}}'
      isVisible: '{{true}}'
      left: '5'
      maxHeight: none
      maxWidth: none
      minHeight: none
      minWidth: none
      onClick:
        function:
          ref: 4298f146-c2ef-48a5-bebf-eca74cf71723
      text: Explore Templates
      top: '6'
      width: '4'
  fe6a3b00-f219-4206-84f0-43573e303287:
    type: CONTAINER
    name: cardContainer
    slots:
      canvas:
        - nodeID: 97c5eeb2-6924-4130-806f-eb8abd4c2a8f
          orderKey: a0
        - nodeID: 968665fc-0536-405a-ab31-861ead1f98db
          orderKey: Zz
        - nodeID: 4bfa8df2-4df1-4a01-b8ea-3d6404038d18
          orderKey: ZzV
        - nodeID: b4c6c983-f33a-490b-9f5d-90d5e3c900b9
          orderKey: Zw
        - nodeID: f9d9207d-1b57-4bed-bd20-85144cfa8339
          orderKey: Zx
    properties:
      backgroundColor: surface.200
      borderRadius: 6px
      boxShadow: >-
        0 0 0 1px {{$app.colorMode === 'dark' ? 'rgba(255, 255, 255, 0.2)' :
        'rgba(0, 0, 0, 0.2)' }}, 0 2px 4px rgba(0, 0, 0, 0.4)
      gridColumnGap: ''
      gridRowGap: ''
      height: '16'
      isEnabled: '{{true}}'
      isVisible: '{{true}}'
      maxHeight: none
      maxWidth: none
      minHeight: none
      minWidth: none
      overflow: hidden
      padding: '8'
      width: '12'
  fedeac1a-159b-4e19-af31-49aab150ab28:
    type: TEXT
    name: textStepLetsGetStartedHeader
    properties:
      fontSize: xl
      fontWeight: bold
      height: '1'
      isEnabled: '{{true}}'
      isVisible: '{{true}}'
      maxHeight: none
      maxWidth: none
      minHeight: none
      minWidth: none
      showExternalIndicator: '{{false}}'
      value: Let's get started!
      verticalAlign: bottom
      width: '12'