Let’s start by first understanding what a Template is in Stadium.
The Template allows you to define the general layout of all your pages and allows you to add controls or functionality that should be present on all or a group of your pages. Every template has a PageContentPlaceholder where the the visited page’s content will be displayed.
All pages in Stadium can be assigned none or exactly one Template. In this blog post, we will add a header and side menu to the DefaultTemplate.
-
Create a new application
-
Rename StartPage to Page1, add a Label to it and set the Text to Page1 Content. Create another page, name it Page2, add a Label to it and set the Text to Page2 Content.
-
Open the DefaultTemplate found under Templates
-
On the DefaultTemplate, add a Container above the PageContentPlaceholder. Drag a Label into the Container and set the Text to MyApp Header.
-
To the left of the PageContentPlaceholder, add a Menu and set the Direction to TopToBottom. Also add 2 Items to the Menu. Set the first menu item’s Destination to
= `${Pages.Page1}. Set the second item’s Destination to= `${Pages.Page2}
-
Lastly, we want to add some styling to our page. To do this, select the application in the Application Explorer and check the ‘Enable Style Sheet’ property. This adds the StyleSheet into the Application Explorer. Select the StyleSheet and paste the following CSS into it.
/* Style the heading */
#DefaultTemplate_Container-container {
width: 100%;
background-color: #f15f90;
margin-top: 16px;
padding-left: 16px;
padding-bottom: 16px;
}
/* Style the heading label */
#DefaultTemplate_Container-container .label-container {
color: ivory;
font-size: 20px;
}
/* Style the PageContentPlaceholder */
body > div.container > .stack-layout-container:nth-of-type(2) > .display-inline-block {
margin-left: 16px;
width: unset;
}
- Now preview the app.
I attached the application below should you want to open it up and view it locally.
BuildDefaultTemplate.sapz (6.6 KB)