i4designer Knowledgebase

i4designer Pages management tutorials

Abstract

Check out this article and learn more details about the management of an i4designer project page, by following these step-based tutorials, carefully prepared for you!

When creating big-scale visualizations, the i4designer users can define a multi-layered project, by means of project pages. Besides the basic project pages, i4designer also allows the users the possibility to add responsive pages, based on breakpoints and a default page link.

Adding new pages to a Project
Abstract

Check out this article and learn how to start building your i4designer Project page structure, in just a few easy steps, by following up the described steps.

This tutorial will guide you through the steps required to customize a page structure, of your i4designer Project.

  1. Log into the i4designer Control Center and open a new project. The project is opened in Designer, having by default only one page (the "index" page).

  2. To start defining your Project page structure, switch to the Pages menu of the global actions area.

  3. In the Pages panel select the pages node and click on the Add file button. A new page, with a system-generated name, is added to the page's structure.

    Add_new_pages.jpg
  4. To customize the name of the pages hover them and click the Rename button.

    Rename_button.jpg
  5. After filling in the desired page names hit the Enter keyboard button. The changes are applied and pages are alphabetically ordered in the page structure.

Note

For this tutorial, we added three new pages, as follows: "page1", "page2" and "page3".

Page_structure.jpg
Adding new responsive pages to a Project
Abstract

Check out this article and learn how to manage your i4designer projects, while using responsive pages, in order to check the project's run-time resolution.

A Responsive page is basically a placeholder for certain breakpoints, allowing the users to check a project page run-time resolution, while the user is still in design mode.

This tutorial will guide you through the usage of Responsive pages, providing more details about the design-time properties.

Note

After adding the new pages, as described by the previous tutorial, let's proceed with populating each new page with a different component, as follows:

  • Add the Gauge component, on the "index" page.

    Index_page.jpg

    Index page

  • Add the Signal value component, on the next page.

    Page_1.jpg

    page1

  • Add the Image component, on the third page.

    Page_2.jpg

    page2

  • Add the Link button component, on the fourth page.

    Page_3.jpg

    page3

  1. After setting up the project page, return to the Pages menu and hover over the page's node.

    Add_responsive_page_file.jpg
  2. Click on the Add responsive page file button. A new responsive page, with a system-generated name, is added to the page's structure.

  3. To customize the name of the responsive page, hover it and click the Rename button. Click the Rename button, fill in the desired page name, and hit the Enter keyboard button.

    Rename_responsive_page.jpg
  4. After renaming the new Responsive page, select it from the pages list. The Responsive page Properties panel is opened.

    RespPage_properties.jpg

    Note

    The new Responsive page is, by default, set to display the default project, which in our case is the "index" page. To change the default page link, the user can click the Open file explorer button and chose another page from the page's structure.

    Change_default_page_link.jpg

    For the present tutorial, we will leave the DefaultPageLink as it is.

  5. Click on the Expand array list button, associated with the Breakpoints property.

    Expand_breakpoints_array_list.jpg
  6. Next, we will add three new breakpoints for our Responsive page, as follows:

    Tip

    At the level of Responsive page functionality, the scope of Breakpoints is to define a set of conditions, used to determine the following aspects of that page:

    • Width - sets the run-time page resolution, measured in pixels.

    • Page link - sets a direct link to an internal project page or to an external page.

    • Is external - toggles between internal and external page. If the toggle button is set to True, the page set at the Page link property will be considered as external.

    • Page parameters - allows the user with the possibility to parse custom parameters, by filing in the following parameter properties:

      • Parameter name - sets the name of the parameter;

      • Parameter value - sets the value of the parameter. The value-added here will be the value displayed at run-time, by a project component, when the Breakpoint width is reached.

    1. Click on the Add new item button, in order to add three Breakpoints.

      Add_breakpoints.jpg
    2. Expand the view of the first Breakpoint and change its Width property to 1200 pixels. Next, click on the Open file explorer button, and change the Page link to point to "page1".

      Breakpoint_1.jpg
    3. Expand the view of the second Breakpoint and change its Width property to 800 pixels. Next, click on the Open file explorer button, and change the Page link to point to "page2".

      Breakpoint_2.jpg
    4. Expand the view of the third Breakpoint and change its Width property to 600 pixels. Next, click on the Open file explorer button, and change the Page link to point to "page3".

      Breakpoint_3.jpg
    5. Make sure that your changes are saved.

  7. Next, return to the Pages menu entry and hover the Responsive page, in the pages structure view.

  8. Click on the Set startup page button.

    Set_responsive_page_as_default.jpg

    Tip

    By default, the "index" page is the project startup page. For this tutorial, we shall change this setting and make our Responsive page a startup page.

  9. After going through the above-listed steps, we can now check the design-time behavior of our new Responsive page, by selecting it from the page structure.

    1. The Default responsive page is set to display the "index" page.

      Default.jpg
    2. By clicking on the 1200px button, the second project page is displayed. The resolution of the drawing surface is updated accordingly.

      1200px.jpg
    3. By clicking the 800px button, the third project page is displayed. The resolution of the drawing surface is updated accordingly.

      800px.jpg
    4. By clicking the 600px button, the fourth project page is displayed. The resolution of the drawing surface is updated accordingly.

      600px.jpg
  10. Finally, trigger a project build and proceed with publishing your project, to the desired target environment.

    Tip

    For more details about the available project publishing methods, depending on your target environment, please also visit the dedicated tutorials, here.

  11. Now let's check the run-time project visualization

    1. Access the target environment and open your project visualization.

    2. By default, the index project page is displayed.

    3. If changing the browser resolution, when reaching a width of 1200 pixels, the second project page is displayed.

    4. If the resolution is adjusted to 800 pixels, the third project page is displayed.

    5. And finally, the fourth project page is displayed, when reaching a 600 pixels width resolution.

Using the layout settings
Abstract

Check out this article and learn how to take advantage of the Page mode and Layout mode properties to build a more responsive project, from a layout point of view.

This article will guide you through the needed steps to take advantage of the Page mode and the Layout mode properties, in order to design a better and more responsive project.

The main goals of this tutorial are to:

  • have a component, pinned as a header and stretched horizontally

  • have a component, pinned as a footer and stretched horizontally

  • have the main area between the header and the footer, featuring a tab component capable of stretching to the remaining content of the page.

If you are interested in designing such a page for your project, please proceed as follows:

  1. Open a new i4designer project, in design-mode.

  2. By default, the Page Properties panel is displayed.

    Page_properties_panel.jpg
  3. Change the Page mode setting and select the "stretched page" option.

    stretched_page.jpg
  4. Go to the Pages menu and add a new folder. For this tutorial, the folder name will be set as "Widgets".

    Add_page_folder.jpg
  5. Under the Widgets folder add three new pages, as follows:

    Add_widget_pages.jpg
    1. the "Content" page

    2. the "Header" page

    3. the "Footer" page

  6. Select the Content page in edit mode. Since it will be used as the main page frame, set the Page mode property to the drawing page option. Add your project components to the page and configure them as desired.

    Content_page.jpg
  7. Select the Header page in edit mode and set the Page mode property to the drawing page option. Add your project components to the page and make sure to pin them to the top of the page, using the Layout mode property.

    Header_page.jpg
  8. Select the Footer page in edit mode and set the Page mode property to the drawing page option. Add your project components to the page and make sure to pin them to the bottom of the page, using the Layout mode property.

    Footer_page.jpg
  9. Next, return to the main project page (the Index page) and add three Frame components, as follows:

    1. The first frame will be used as a header, so set the Layout mode property to the Dock top option. To establish a link between the Header page and the Header frame, set the Page link property to point to the Header widget page.

      Header_frame.jpg
    2. The second frame will be used as the mainframe, so set the Layout mode property to the Stretched option. Further on, using the Margin property, adjust the position of the frame. To establish a link between the Content page and the Content frame, set the Page link property to point to the Content widget page.

      Content_frame.jpg
    3. The third frame will be used as a footer, so set the Layout mode property to Dock bottom option. To establish a link between the Footer page and the Footer frame, set the Page link property to point to the Footer widget page.

      Footer_frame.jpg

    Warning

    Please notice that the contents of the widget pages will be cut down from view if the space allocated to the frame is exceeded.

    Example_1.jpg

    For example, if the Header page contains a larger component, the run-time project will not display it, or cut it down.

    Example_2.jpg
  10. Build and publish the project.

    Tip

    For more details on how to publish projects, please visit the dedicated tutorials, here.

  11. Finally, open your visualization, and let's check the run-time results.

    Visualization.jpg