Skip to main content
Version: v11.6.2

How Tos: UI Layouts

Adding Pages​

Most of the Projects need to have multiple pages and your Application needs to navigate between these pages. When you create a project a Main Page is generated by default.

  • You can add more Pages by clicking on the + next to the Main Page tab.
  • Give a name to the page and choose the type of the page. You can choose from page, partial, popover, header, topnav, leftnav, rightnav or footer.
  • Choose the page template and the page layout you want to use. Depending upon the type of the page being added the options are presented. See here for more details on the Page Layouts and Page Templates.
  • Once you have created the new page, an entry is created in the Files section of the Files and Services panel.
  • You can work on the new page just as we worked on the Main Page - drag and drop widgets, arrange them.
  • You can delete a page by clicking on the delete icon on the far right hand side of the screen.
  • When you run the project, the Main Page will be displayed first. Hence you need to add navigational capabilities to the Main Page to open the other pages.

Adding Partial Page​

WaveMaker Studio allows you to create partial pages, akin to page fragments, to reuse content snippets across all the pages of your project. You can embed a partial page in the content area of a supported widget or layout. The widget must support the Content property to embed a partial page. Partial pages allow you to efficiently maintain and reuse common content sections across the application. For instance, you can create partial pages for header, footer or login and embed them in all the pages of your application.

  • You can create a partial page by selecting the type as partial while creating a page
  • When creating content, partial pages are just like regular pages. You can drag and drop widgets and arrange them using layouts. Once the partial page is created, it will available in the Content property of the supported widgets and layouts for you to embed.
  • You can later edit the partial page just like a regular page by opening it from the Files section of the Files and Services Panel. Alternatively, you can also edit the partial page from any of the pages where it is embedded by clicking the Edit icon, as shown in the image below, on the section or container where the partial page is embedded. !
note

Changes that you make to a partial page impact all the pages where it is embedded.

Page​

  1. In the current page (say MyPage), select the page node from the left panel widgets tree
  2. In properties panel add the params under the Page Params section and save.
  3. While creating a navigation variable, select operation as goToPage and page as MyPage. Under the Data tab, we can view the params defined on the MyPage in above steps. These params can be bound to components in a different page and hence data can be passed from one page to another.

Partial​

  1. In a partial page (say MyPartial), select the partial node.
  2. In properties panel add params as for page above.
  3. In a different page, drop a container widget and select content as MyPartial.
  4. Below the 'content' property, list of params (defined in above steps) can be seen and can be bound to a data source. These values will be available to the partial page scope.