How to build dialogs

In this video, you will learn how to create dialogs in Centrldesk.

With dialogs you can guide users through your application. In this example, we want to open a dialog by clicking a button on a page and guide the user through several dialogs. So let's start building our dialogs:

Steps:

1. First we go to the page editor by clicking on the Edit Page button.
2. Add a button using drag and drop.
3. Select the button and change the name on the right side to "Open Dialog".
4. Optionally choose an icon for the button and change the color.
5. Switch to the Pages view on the left side.
6. Then click on "New Page".
7. The "Create App Component" page dialog is displayed.
8. Enter the value "Enter Text" for Name and confirm the dialog with "Create".
9. Add a text input to the page using drag and drop.
10. Add a button using drag and drop.
11. Select the button and change the name on the right side to "Go to second dialog".
12. Switch to the Pages view on the left side.
13. Then click on "New Page".
14. The "Create App Component" page dialog is displayed.
15. Enter the value "Enter Date" for Name and confirm the dialog with "Create".
16. Add a date picker to the page using drag and drop.
17. Add a button using drag and drop.
18. Select the button and change the name on the right side to "Close".
19. Switch to the Pages view on the left side.
20. Select the page "Home".
21. Select the "Open Dialog" button.
22. On the right side under the item Actions we now configure an action when clicking on the button.
23. Click Add next to On Click.
24. The Flow Editor opens.
25. On the left side, under App Components, we now drag and drop the "Pages" element into the center of the Flow Editor.
26. The "Use Page" dialog opens.
27. Select "Show Dialog Enter Text" on the left side and confirm with OK.
28. On the left side, under App Components, we now drag and drop the "Pages" element into the center of the Flow Editor.
29. The "Use Page" dialog opens.
30. Select "Show Dialog Enter Date" on the left side and confirm with OK.
31. On the left side, under Scope, we now drag and drop the "Page Control" element into the center of the Flow Editor.
32. The "Page Control" dialog opens.
33. Select "Validate Inputs" on the left side and confirm with OK.
34. Connect the submit output of the "Show Dialog Enter Text" block with the Input of the "Validate Inputs" block.
35. Connect the valid output of the "Validate Inputs" block with the Input of the "Show Dialog Enter Date" block.
36. Close the Flow Editor by clicking the Close button in the upper right corner.
37. Close the Page Editor by clicking the Close button at the top.
38. Now the home view of our application is displayed again.
39. Clicking on the "Open Dialog" button opens the first dialog with the input of text.
40. By clicking on the button "Go to second dialog" the second dialog with the date input is displayed.
41. Clicking the "Close" button closes the dialog.