Edit and Configure Pages
This document explains the features and function of the pages.
What is Pages?
The Pages is the core of the React web app. In pages, developers can customize UI components like changing text to button, or map out actions like navigation to different pages, and setting up Google authentication.
Introduction to pages - Configure components
Files fetched from Figma are displayed in pages.
It might take a few minutes to fetch details of your Figma file on pages when creating a new app.
Set homepage
The home screen is the first screen that appears when the app launches. They prepare the ground for your application while giving your app enough time to load.
Step 1:
On the page list, click on the Settings ⚙️ available in the right corner.
Step 2:
There you will have an option to set your Homescreen. Simply click on Change beside the Homescreen option and a dialog box will appear wherein you need to select a home page from the screens listed and click on Save & Close to save the selected page as your app’s Home screen.
Change name
Set an appropriate name for your page for better code readability.
Export page
The Export page allows you to generate the code for only selected pages. This way you can quickly get the UI code of your design and integrate it into your existing project.
How to sync and refresh Figma design?
The complete Figma design is available on Pages. However, if any changes are made to the original Figma file in the Figma account. Then developers need to click on the refresh icon to update those changes.
Upon refresh, the design in DhiWise is resynced with the design in Figma. However, any integrated actions are lost for the pages which were updated.
For example, if originally the page had a back slider component, but the updated design removed the slider component, then naturally the integrated action is removed as well.
Configure components
Most of your app development tasks happen in the page configure option, in which you get options such as change view and create action.
Layout tree
The Layout tree identifies the webpage's component along with type and structure e.g. in the below image, there is a Grid with many columns for which the layer hierarchy is as Column -> Grid -> Column -> Text -> Text.
Below components are auto-detected:
Row | Column | Stack | Text | Image | Button | List | Grid | Line | Input | FloatingInput | CheckBox | Radio | RatingBar | SelectBox | TextArea | Datepicker | Image | Switch | GoogleMap | PagerIndicator | Slider | RadioGroup | FloatingButton
If you feel the detected component type is incorrect, then with Change view you can change that component type into the correct one. For reference read
Got a question? Ask here.