Preview
Last updated
Last updated
The Preview function is a tool provided by our app builder that allows you to visualize and test your app's appearance and functionality before publishing it.
To enter the Preview function, locate the top right corner of the App Builder. You will find a prominent Preview button. In the Preview mode, you can see how your app looks like, interact with your app and explore its functionality. This helps you identify and address any inconsistencies, UI issues, or functional bugs in your app before publishing it.
On the far right of the preview screen, you'll find a bug icon. Click on the icon to open up the debug panel. Debug panel has 5 tabs, presenting action histories or the current variable value.
The Log tab displays all interactions that have happened -- including the event's Event Payload and the action's Transformed Parameter -- so you can check if your events are sending the correct values. In this example, after I enter "fe" in the input element and press "enter", I can see the search query "fe" passed to set sql parameter action, with the field "search" set as "fe." The content above the arrow is the event Press Enter and the content below the arrow is the action api_set_sql_parameter that the event triggers.
The Element tab lists all the elements and their relation. When you hover on an element, it will be highlighted in the preview.
The Page tab lists all the page data that you defined in Data Store, page level. You can see the variable's value by clicking its name.
The App tab lists all the app data that you defined in Data Store, app level. You can see the variable's value by clicking its name.
The Data Node tab lists all the Data Node in the app. By clicking Data Node's name, you can see a table to preview the data store in the Data Node.
