Page Layouts

The Page layouts tool is used to create customized versions of the main interface that people will see when they use their browser to access Smartabase. Page layouts help people navigate around the Smartabase site so it can be useful to customize the home page based on the tasks that people complete in Smartabase.

The screenshot above is an example of a simple page layout for coaches. Note that the reporting tools are easily accessible on the home page, and multiple data entry options are available in the dropdown tab at the top of the page.

The second example may be more appropriate for an athlete who predominantly uses Smartabase to enter information about themselves. Their most commonly used event form, Daily Diary, has been set as a favorite event and displayed on the home page for easy navigation.

If the athlete usually logs into Smartabase using the mobile application then they won’t see this page layout, but it can be useful to set up a layout for them in case they ever need to log in via the browser.

Assigning page layouts

You can apply page layouts to groups and roles. A page layout for a group means that anyone who is part of that group (as a coach or athlete) will see Smartabase according to the page layout settings. A parent group’s page layout automatically gets used for any subgroups unless they have their own page layout.

You can also set up page layouts for roles so that people with that role see its page layout.

If someone has multiple roles and each role has a different page layout, a page layout will be selected at random. Likewise, if an athlete is in multiple groups and there are different page layouts for each group, a page layout will be selected at random. Your Smartabase consultant can provide advice on how to configure roles and page layouts on your site to avoid this situation.

Page layouts for groups take precedence over page layouts for roles. This means that when someone with a role that has a page layout applied loads a group that also has a page layout, the page layout will update to that of the group. If someone doesn't have a page layout for their group or role, Smartabase will use the default page layout and the appearance specified by the site CSS in the Application details tool.

It is important that page layouts are not used with the intent of controlling access to system permissions. Page layouts change what someone sees, but not what abilities they have access to.

Creating page layouts

Administrators can create page layouts using the Page layouts tool in the administration interface. When creating a new page layout, you must specify a name for the page layout. The name of a page layout cannot be seen outside of the administration interface, so as long as the name is meaningful to you and any other administrators, there are no other considerations for naming a page layout. You may also add a description for the page layout but this is optional.

There are several features to customize your page layout:

• Tabs
• Small links
• Sections
• Customized site theming

Tabs

Tabs allow you to customize the tools that appear as buttons on the navigation bar in the web browser. These are located on the navigation bar between the header image and any drop-down menus. For example, the Athlete profiles tool has been added as a tab in the screenshot below. Tabs are labelled based on the tool and cannot be customized.

We recommend adding no more than four or five tabs as more can clutter the navigation bar.

Small links

Small links help you customize which links appear in the drop-down menu in the top right corner of the page. These are in addition to the help link (which brings you to the Smartabase Help Center) and log out function, which are enabled by default.

The screenshot below shows an example of small links where the Account tool has been included as a small link.

If people have access to their account page and messaging functionality as part of their role, then Account read and Messaging are useful additions as small links.

Sections

Sections are where you can make significant functional customizations to the main interface. Sections can be added as containers for home page tools or drop-down menus on the navigation bar. In the example of the coach layout shown earlier, the Data entry drop-down and Reporting container were both examples of sections. The section name is displayed on the home page as the section header or drop-down menu.

Each section contains buttons which can be customized depending on which tools you want to access. Without access to tools in the page layout, people will have difficulty performing any tasks within Smartabase. Often, sections are created to cluster tools that have common purposes. For example, you could create a reporting section with the Reports tool, the Excel reports tool and the Dashboards tool.

The screenshot below shows how favorite events can be displayed as buttons on the home page, as in the example of the athlete page layout earlier. The page layout consists of a section named My favorites which contains a button for favorite events. Each favorite event is displayed on the home page as a separate button.

Note that the Close and Tabs settings have not been enabled. Enabling the Close setting in a page layout will automatically collapse the section on the browser home page. By disabling the feature in our layout, the section will be expanded by default so that athletes will see their favorite events. The athlete can collapse and expand the section by clicking on the section header on the browser home page.

Enabling the Tabs setting will display the tools in a drop-down menu on the navigation bar. If the Tabs setting is not enabled, the section will appear as a container on the home page.

To display front page reports on the home page, you should not enable the Tabs setting.

The example below shows how the Data entry drop-down menu in our coach page layout is configured. Note that data entry features have been grouped together in the section and the Tabs setting has been enabled.

You can customize button labels within a section for both staff (i.e. coaches) and athletes by selecting Customize buttons to expand the settings. This may be appropriate if the default button label could be referred to differently for staff and athletes. For example, it may make more sense for the Athlete history button to be labelled My history for athletes since the data that they can view will be specific to them.

If the Name for athlete or Name for staff fields are left blank, the default tool name will be used. If you only want to customize the label for athletes, you can enter a custom Name for athlete and leave the Name for staff field blank.

In some instances, tools may be included in the page layout but are not shown on the home page. This can be because you don’t have the relevant system permissions in your role to view those tools or the tools are not applicable. For example:

• An athlete doesn’t have access to other athlete’s data so the Enter data for groups tool is not needed.
• You don’t have access to any appointment forms so the Enter appointment tool is not relevant.
• You don’t have any favorite events so none are displayed.

You can also choose to display a dashboard within a section. If buttons are included in the section as well, the dashboard will be displayed above the buttons. Only site owners will be able to add a dashboard to the page layout.

Since the dashboard must be loaded each time you navigate to the home page, we recommend limiting your page layout to one dashboard which has a reduced data source range. Your Smartabase consultant will be able to advise you on the suitability of your dashboard for the home page.

Customized site theming

Smartabase sites are styled according to the main site theme that is generated and uploaded by a Smartabase consultant. A custom CSS file can be uploaded for a page layout using the custom CSS field; however, this is not a process site administrators should normally set out to do without consulting their Smartabase consultant.

The background image and header image fields let you upload suitably sized and themed graphics for your page layout. As with the CSS file upload field, it's not mandatory to upload files to these fields. The main CSS, background image and header image for the site (or those of a parent group’s page layout, if set) will apply when these fields are empty.

Steps to create a page layout

1. Log in to the administration interface.
2. Select the Page layouts tool.
3. Click the Create a new page layout button.
4. Name the page layout.
5. Fill in the Description field (optional).
6. Select the Add tabs button to specify any tools you want to display as tabs on the navigation bar.
7. Select the Add small links button to specify any tools you want to display as small links.
8. Select the Add section button to create a new section. For each section:
   • Name the section.
   • If the section should be a drop-down menu on the navigation bar, tick the Tabs setting.
   • If the section is not a drop-down menu, indicate if the section should be collapsed by default by ticking the Close setting.
   • Add buttons for each tool to be displayed within the section.
   • Customize the name of the button (optional).
   • Determine the order of the buttons within the section by using the arrow buttons next to the button name
9. Determine the order of the sections within the page layout by using the arrow buttons next to the section name.
10. Customize the site theming if required (optional).
11. Click Save.
12. Add the roles or groups to which this page layout should apply.
13. Click Save.