Skip to main content

📑 Pages & Screens

Managing your application's pages and screens is a fundamental aspect of app development. AppStruct simplifies this process by providing Pages & Screens section, enabling you to efficiently generate, organize, and configure different screens within your app.

Overview​

AppStruct's Pages & Screens section is designed to address the common challenges faced by no-code builders in creating and organizing multiple screens. This section allows you to:

  • View All Pages: Access a comprehensive list of all screens within your project.
  • Add New Screens: Easily create new screens tailored to your app's requirements.
  • Modify Screen Types: Customize the functionality and behavior of each screen.
  • Duplicate or Remove Screens: Streamline your workflow by copying or deleting screens as needed.

Accessing Pages & Screens​

To begin managing your app's pages and screens, follow these steps:

Step 1: Open Pages & Screens

  1. Locate the Pages & Screens Icon:
    • In the Menu Bar on the left side of the Workspace, find the Pages & Screens icon.
  2. Click to Open:
    • Click on the Pages & Screens icon to open the section. This action will display all the existing pages of your application on the Canvas.

Step 2: Navigate Your Pages

  1. View Pages on the Canvas:
    • Once opened, the Pages & Screens section displays all your app's pages on the Canvas area.
    • Each screen is labeled with its respective Page Name located at the upper-left corner of the device screen representation.
  2. Utilize the Pages Tree:
    • On the Left Toolbar, a Pages Tree is displayed, showcasing all pages in a hierarchical structure.
    • Icons next to each page name indicate the Screen Type (e.g., Home, Settings, Profile), facilitating quick identification and navigation.

Adding a New Screen​

Step 1: Initiate Screen Creation

  1. Click on "Add Screen":
    • In the Pages & Screens section, locate and click the "Add Screen" button. This button positioned under the Pages Tree or within the main panel.

Step 2: Configure the New Screen

  1. Fill in Screen Details:
    • A "New Screen" pop-up dialog will appear.
    • Enter Screen Name: Provide a descriptive name for your new screen (e.g., "User Profile", "Settings", "Checkout").
  2. Create the Screen:
    • After entering the screen name, click the "Create Screen" button.
    • The new screen will be added to both the Pages Tree and the Canvas, allowing immediate access for further customization.

Changing Screen Type​

AppStruct allows you to define and modify the type of each screen to align with its intended functionality.

Step 1: Select the Desired Screen

  1. Choose from Pages Tree or Canvas:
    • Navigate to the Pages Tree in the Left Toolbar or directly on the Canvas.
    • Click on the screen you wish to modify to highlight and settings will open automatically.

Step 2: Modify Screen Type

  1. Access Screen Settings:
    • With the screen selected, the Left Toolbar will display settings specific to that page.
  2. Change Screen Type:
    • Locate the "Screen Type" dropdown menu within the settings.
    • Click on the dropdown to view available screen types (e.g., Home, Login, Profile, Settings, Custom).
  3. Select New Type:
    • Choose the desired screen type from the dropdown.
    • The screen's functionality and available components will adjust based on the selected type.

Copying or Deleting a Screen​

Step 1: Select the Screen to Modify

  1. Choose the Screen:
    • In the Pages Tree or on the Canvas, click on the screen you intend to copy or delete to highlight it.
  2. Copy the screen:
  • With the screen selected, click on the "Copy Screen" button located within the Left Toolbar.
  1. Duplicated screen:
    • A duplicate of the selected screen, including all its components and design elements, will appear in the Pages Tree and Canvas with a numer indicating duplication (e.g., "Screenname-1", “Screenname-2”).

Step 3: Deleting the Screen

  1. Initiate Delete Action:
    • With the screen selected, click on the "Delete Screen" button located within the Left Toolbar or as an option in the screen's context menu.

Additional Features​

Organizing Screens

  • Rearrange Screens:
    • Drag and drop screens within the Pages Tree to reorder them according to your workflow preferences.
  • Set Initial Screen:
    • Define which screen users see first upon launching the app by naming it as the Initial or Welcome Screen.
  • Link Screens:
    • Establish navigation flows by linking buttons or actions on one screen to navigate to another, ensuring a cohesive user experience.

Need Assistance?​

If you encounter any challenges or require further guidance while building your app, please refer to the Documentation or, contact our support team at [email protected].

Happy Building with AppStruct!