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.<br> \
        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.<br><br>\
        To 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`.<br><br>\
         1. 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,<br>\
         2. 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;"><br><br>\
        Follow the example above to create two attributes:<br><br>\
        **1.** Configure the **name** attribute:<br>\
        <span style="display:inline-block; width:16px;"></span>- type `name` and press `Enter`.<br>\
        <span style="display:inline-block; width:16px;"></span>- select `String` as its type, then press `Enter` to confirm.<br><br>\
        **2.** Set up the **price** attribute:<br>\
        <span style="display:inline-block; width:16px;"></span>- Enter `price` and press `Enter`.<br>\
        <span style="display:inline-block; width:16px;"></span>- Choose `Number` for the type, and press `Enter` to finalize.<br><br>\
        **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,
            },
          },
        ],
        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.<br><br> \
        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;">. <br><br> \
        Type **generate** and press Enter.',
        position: 'left',
        anchor: 'fileExplorer',
      },
      events: {
        validate: [
          {
            name: 'create method',
            editor: 'code',
            meta: {
              name: 'generate',
              message: {
                content: 'Make sure to create the Method.',
                type: 'error',
              },
            },
          },
        ],
      },
    },
    // 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\n\
          Click on `Save All` button.<br/><br/>',
        position: 'right',
        anchor: 'fileExplorer',
      },
      events: {
        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.<br/><br/>\
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: {},
    },
    // Create a Webform
    {
      highlight: ['fileExplorer'],
      dialog: {
        title: 'Creating a WebForm',
        content: 'To create a new webform, hover on the webform folder. <br><br>\
        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.<br><br>\
        Type the name ***Welcome*** as the name to the webform. <br><br>\
        The webform 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 webform "Welcome"',
                type: 'error',
              },
            },
          },
        ],
      },
    },
    // Components list Intro
    {
      highlight: ['Welcome-main', 'Welcome-components'],
      dialog: {
        title: 'How to add Components',
        anchor: 'Welcome-components',
        content: 'This is the list of available components.<br><br>\
        We 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.<br><br>\
        Drag & 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: 'Datasources',
        anchor: 'Welcome-datasources',
        content: 'For the _**DataTable**_ to work, it needs an _**Entity Selection DataSource**_.<br>\
        The following example shows how to create a datasource:<br>\
        <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;"><br>\
        Create a Datasource with name `items` , type `Entity Selection` & dataclass `WTItem`.',
        position: 'right',
      },
      events: {},
    },
    // Link Datasource.
    {
      highlight: ['Welcome-main', 'Welcome-datasources'],
      dialog: {
        title: 'Datasources',
        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;"><br>\
        In the example provided, you can see the method for linking a datasource to a component<br>\
        using the drag & drop feature. Now, please follow these steps:<br><br>\
        1. Drag the datasource named `items` to the _**DataTable**_.<br>\
        2. Additionally, drag the attributes `name` and `price` onto the _**DataTable**_.',
        position: 'right',
      },
      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 datasource and the attributes to the DataTable.',
                type: 'error',
              },
            },
          },
        ],
      },
    },
    // preview button.
    {
      highlight: ['Welcome-main', 'webform-preview-btn'],
      dialog: {
        title: 'Webform 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.<br><br>\
        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.',
              },
            },
          },
        ],
      },
    },
    {
      dialog: {
        title: 'Welcome tour completed',
        content: "Congratulations! You have completed the welcome tour. <br><br> \
        You are now ready to explore all the features and start getting the most of Qodly.<br><br>\
        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',
        },
      },
    ],
  }
}