welcometour.json5

{
  steps: [
    // welcome step
    {
      dialog: {
        title: 'Welcome to Qodly Studio',
        content: 'Qodly Studio allows you to quickly build Web applications for your Qodly Platform. \
        In this quick tour we will be showing some of Qodly Studio’s capabilities',
      },
      events: {
        pre: [
          {
            name: 'log',
            editor: 'studio',
            meta: {
              AID: 'UA-1-3',
            },
          },
        ],
      },
    },

    // Model Editor Opening
    {
      highlight: ['fileExplorer'],
      dialog: {
        title: 'Model Editor',
        anchor: 'fileExplorer',
        position: 'right',
        content: 'The model editor allows to define the Data Model.\
        \nTo open the model editor, click on <img src="https://raw.githubusercontent.com/4d/Web-studio-TIPS/main/assets/welcometour/model-editor-icon.png" width="90px" style="display:inline;"> icon',
      },
      events: {
        validate: [
          {
            name: 'open model-editor',
            editor: 'model',
            meta: {
              name: 'model',
              message: {
                content: 'Make sure you have opened the model editor.',
                type: 'error',
              },
            },
          },
        ],
      },
    },

    // Create Dataclass
    {
      highlight: ['model:sidebar:dataclass'],
      dialog: {
        anchor: 'model:sidebar:dataclass',
        position: 'right',
        title: 'Creating a Dataclass',
        content: 'In this example. we will create the DataClass `WTItem`.\
         \n\n1. Click on <img src="https://raw.githubusercontent.com/4d/Web-studio-TIPS/main/assets/welcometour/add-dataclass-icon.png" style="display:inline;height:24px;width:auto;"> icon,\
         \n2. Type **WTItem** **(case-sensitive)** as dataclass name, and press Enter.',
      },
      events: {
        validate: [
          {
            name: 'add model-dataclass',
            editor: 'model',
            meta: {
              name: 'WTItem',
              message: {
                content: 'Ensure you have a dataclass named "WTItem" (case-sensitive). If needed, you can rename or delete it.',
                type: 'error',
              },
            },
          },
        ],
        post: [
          {
            name: 'fit-view dataclass',
            editor: 'model',
            meta: {
              name: 'WTItem',
            },
          },
        ],
      },
    },

    // add attributes on dataclass.
    {
      highlight: ['model-dataclass-WTItem'],
      dialog: {
        anchor: 'model-dataclass-WTItem',
        position: 'right',
        title: 'Creating DataClass attributes',
        content: '<img src="https://raw.githubusercontent.com/4d/Web-studio-TIPS/main/assets/welcometour/add-attribute.gif" style="display:inline-block;text-align:center;height:144px;width:auto; margin:0px auto;">\
        \n\nFollow the example above to create two attributes:\
        \n\n**1.** Configure the **name** attribute:\
        \n- type `name` and press `Enter`.\
        \n- select `String` as its type, then press `Enter` to confirm.\
        \n\n**2.** Set up the **price** attribute:\
        \n- Enter `price` and press `Enter`.\
        \n- Choose `Number` for the type, and press `Enter` to finalize.\
        \n\n**Note**: Every DataClass is created with a default ID attribute.',
      },
      events: {
        pre: [
          {
            name: 'flags',
            editor: 'model',
            meta: {
              'dataclass.delete': false,
            },
          },
          {
            name: 'flags',
            editor: 'model',
            meta: {
              'dataclass.draggable': false,
            },
          },
          {
            name: 'open tab',
            editor: 'model',
            meta: {
              afterValidation: true,
            },
          },
        ],
        validate: [
          {
            name: 'compare editor',
            editor: 'model',
            meta: {
              expected: {
                name: 'WTItem',
                attributes: [
                  {
                    name: 'ID',
                    type: 'long',
                  },
                  {
                    name: 'name',
                    type: 'string',
                  },
                  {
                    name: 'price',
                    type: 'number',
                  },
                ],
              },
              skip: [],
              strict: false,
              message: {
                content: 'Make sure you have added both attributes in dataclass "WTItem"!',
                type: 'error',
              },
            },
          },
        ],
      },
    },
    // Create a method
    {
      highlight: ['fileExplorer'],
      dialog: {
        title: 'Creating a Method',
        content: 'Hover on the Methods folder. \
        To create a Method, Click on <img src="https://raw.githubusercontent.com/4d/Web-studio-TIPS/main/assets/welcometour/add-dataclass-icon.png" style="display:inline;height:24px;width:auto;">.  \
        Type **generate** and press Enter.',
        position: 'right',
        anchor: 'fileExplorer',
      },
      events: {
        validate: [
          {
            name: 'create method',
            editor: 'code',
            meta: {
              name: 'generate',
              message: {
                content: 'Make sure to create the Method.',
                type: 'error',
              },
            },
          },
        ],
        rollback: [
          {
            name: 'fit-view dataclass',
            editor: 'model',
            meta: {
              name: 'WTItem',
            },
          },
        ],
      },
    },
    // Inject script for generation
    {
      highlight: ['main-code-generate', 'fileExplorer', 'header-save-all'],
      dialog: {
        title: 'Generating Data',
        content: 'We need to generate random data for the DataClass **WTItem**. copy the code bellow to the code editor\n\n\
```4qs\n\
var counter: Integer\n\
var entity: cs.WTItemEntity\n\n\
for(counter,1,100,1)\n\
  entity = ds.WTItem.new()\n\
  entity.name="WTItem " + String(counter)\n\
  entity.price = (Random%(100))+1\n\
  entity.save()\n\
end\n\
```\n\nClick on `Save All` button.',
        position: 'right',
        anchor: 'fileExplorer',
      },
      events: {
        pre: [
          {
            name: 'open tab',
            editor: 'webform',
            meta: {
              name: 'generate',
              kind: 'method',
              afterValidation: true,
            },
          },
        ],
        validate: [
          {
            name: 'save all',
            editor: 'webform',
            meta: {
              message: {
                content: 'Make sure to click on the "Save All" button.',
                type: 'error',
              },
            },
          },
        ],
      },
    },
    {
      highlight: ['main-code-generate', 'fileExplorer'],
      dialog: {
        title: 'Generating Data',
        content: 'Hover on method in the Explorer.\
Click on <img src="https://raw.githubusercontent.com/4d/Web-studio-TIPS/main/assets/welcometour/run-method.png" style="display:inline;height:24px;width:auto;"> to run the Method.',
        position: 'right',
        anchor: 'fileExplorer',
      },
      events: {
        pre: [
          {
            name: 'open tab',
            editor: 'webform',
            meta: {
              name: 'generate',
              kind: 'method',
              afterValidation: true,
            },
          },
        ],
      },
    },
    // Create a Webform
    {
      highlight: ['fileExplorer'],
      dialog: {
        title: 'Creating a Page',
        content: 'To create a new Page:\
        \n- hover on the Page folder. \
        \n- Click on <img src="https://raw.githubusercontent.com/4d/Web-studio-TIPS/main/assets/welcometour/add-dataclass-icon.png" style="display:inline;height:24px;width:auto;"> icon.\
        \n- Type the name ***Welcome*** as the name to the page. \
        \n- The page will be opened automatically.',
        position: 'left',
        anchor: 'fileExplorer',
      },
      events: {
        validate: [
          {
            name: 'create webform',
            editor: 'webform',
            meta: {
              name: 'Welcome',
              message: {
                content: 'Make sure you have created the page "Welcome"',
                type: 'error',
              },
            },
          },
        ],
      },
    },
    // Components list Intro
    {
      highlight: ['Welcome-main', 'Welcome-components'],
      dialog: {
        title: 'How to add Components',
        anchor: 'Welcome-components',
        style: {
          maxHeight: '200px',
          overflowY: 'auto',
        },
        content: 'This is the list of available components.\
        \nWe will be using a DataTable <img src="https://raw.githubusercontent.com/4d/Web-studio-TIPS/main/assets/welcometour/wt-datatable.png" style="display:inline;height:32px;width:auto;"> to display the data.\
        \nDrag & Drop a DataTable from the list onto the canvas.',
        position: 'bottom',
      },
      events: {
        pre: [
          {
            name: 'flags',
            editor: 'webform',
            meta: {
              'sidebar.section.resizable': false,
            },
          },
        ],
        validate: [
          {
            name: 'compare editor',
            editor: 'webform',
            meta: {
              name: 'Welcome',
              expected: {
                type: {
                  resolvedName: 'Container',
                },
                children: [
                  {
                    type: {
                      resolvedName: 'DataTable',
                    },
                  },
                ],
              },
              skip: [],
              strict: false,
              message: {
                content: 'Drag & Drop the DataTable Component.',
                type: 'error',
              },
            },
          },
        ],
      },
    },
    // Create Datasource.
    {
      highlight: ['Welcome-main', 'Welcome-datasources'],
      dialog: {
        title: 'Qodly Source',
        anchor: 'Welcome-datasources',
        content: 'For the _**DataTable**_ to work, it needs an _**Entity Selection Qodly Source**_.\
        The following example shows how to create a Qodly Source:\
        <img src="https://raw.githubusercontent.com/4d/Web-studio-TIPS/main/assets/welcometour/create-datasource.gif" style="text-align:center;display:block;height:144px;width:auto;">\
        Create a Qodly Source with name `items` , type `Entity Selection` & dataclass `WTItem`.',
        position: 'right',
        style: {
          maxHeight: '200px',
          overflowY: 'auto',
        },
      },
      events: {},
    },
    // Link Datasource.
    {
      highlight: ['Welcome-main', 'Welcome-datasources'],
      dialog: {
        title: 'Qodly Source',
        anchor: 'Welcome-datasources',
        content: '<img src="https://raw.githubusercontent.com/4d/Web-studio-TIPS/main/assets/welcometour/dnd-datasource.gif" style="text-align:center;display:block;height:144px;width:auto;">\
        \nIn the example provided, you can see the method for linking a Qodly Source to a component\
        using the drag & drop feature. Now, please follow these steps:\
        \n1. Drag the Qodly Source named `items` to the _**DataTable**_.\
        \n2. Additionally, drag the attributes `name` and `price` onto the _**DataTable**_.',
        position: 'right',
        style: {
          maxHeight: '200px',
          overflowY: 'auto',
        },
      },
      events: {
        validate: [
          {
            name: 'compare editor',
            editor: 'webform',
            meta: {
              name: 'Welcome',
              expected: {
                type: {
                  resolvedName: 'Container',
                },
                children: [
                  {
                    type: {
                      resolvedName: 'DataTable',
                    },
                    props: {
                      datasource: 'items',
                      columns: [
                        {
                          title: 'Name',
                          source: 'name',
                        },
                        {
                          title: 'Price',
                          source: 'price',
                        },
                      ],
                    },
                  },
                ],
              },
              skip: [],
              strict: false,
              message: {
                content: 'Make sure you have attached the Qodly Source and the attributes to the DataTable.',
                type: 'error',
              },
            },
          },
        ],
      },
    },
    // preview button.
    {
      highlight: ['Welcome-main', 'webform-preview-btn'],
      dialog: {
        title: 'Page Preview',
        anchor: 'webform-preview-btn',
        content: 'The preview mode allows users to view the result of the page before it is fully rendered or published.\
        Click on the button the view the results.',
        position: 'bottom',
      },
      events: {
        validate: [
          {
            name: 'preview webform',
            editor: 'webform',
            meta: {
              name: 'Welcome',
              message: {
                content: 'Make sure you have clicked on preview button.',
              },
            },
          },
        ],
        rollback: [
          {
            name: 'exit preview',
            editor: 'webform',
            meta: {
              name: 'Welcome',
            },
          },
        ],
      },
    },
    {
      dialog: {
        title: 'Welcome tour completed',
        content: "Congratulations! You have completed the welcome tour.  \
        You are now ready to explore all the features and start getting the most of Qodly.\
        If you have any questions or feedback, don't hesitate to reach out to our support team. Happy exploring!",
        position: 'left',
      },
      events: {
        pre: [
          {
            name: 'log',
            editor: 'studio',
            meta: {
              AID: 'UA-1-4',
            },
          },
        ],
      },
    },
  ],
  labels: {
    previous: 'Previous',
    next: 'Next',
    skip: 'Skip',
    complete: 'Complete',
  },
  events: {
    skip: [
      {
        name: 'log',
        editor: 'studio',
        meta: {
          AID: 'UA-1-5',
        },
      },
    ],
  },
}