How to create a website themed portal page

Overview

When a user logs into the system they are presented with an interface based on their permissions and what has been configured. The interface the user sees is referred to as a Portal.

A sample portal using the website theme with callouts for the Header, Main Menu link and two Sections.

Inside the portal you can create Main Menu links, these are text links that appear in the header. When a user clicks on a Main Menu Link, content you have configured for this link will display. Each Main Menu Link can have a different Theme. The Theme setting, changes the look of content within the portal Sections under a Main Menu link.

This article is about the portal theme called Website which is typically used for low usage or non-core staff users, such as applicants, employees, board members, etc . This theme is designed to have imagery such as graphical banners and image shortcuts.

In this article we will show you some examples of website themed portals and we will walk you through how to setup a sample portal that uses the website theme. You will need Global Administrator privileges to create and modify portals and to do the exercises in this wiki article.

Website theme portal samples

Here are some samples of portals using website themed sections:

A graphical banner with text template and shortcut section (with image shortcuts) , followed by another shortcut section (with text shortcuts and an aggregate shortcut). This portal design was designed for employees involved in CSR initiatives.

A graphical banner with text template, 3 shortcut sections with image shortcuts and icon shortcuts. This portal was intended for grant applicants.

A graphical banner with text template and a shortcuts section with image shortcuts, followed by a shortcut section with two text style shortcuts and one aggregate style shortcut. This portal was intended for employees.

A graphical banner with text and image shortcuts, followed by a shortcut section with aggregate shortcuts. This portal is intended for students applying for scholarships.

Configuration – Essentials

Before you create a main menu link using website theme

Follow the steps below to create a sample portal with a Main Menu link that uses the Website theme.

You must have Global Administrator privileges to create and modify portals. You will also need to have a Universal Tracking Application (UTA) configured within your system and you need to have a list views configured in that UTA.

We suggest you do the exercises in this article in the Portal Draft Mode of the Common role in your system. Assets created in the Draft Mode will not be overwritten daily, so you can work on these exercises over multiple days. Anything built in the draft mode, will not affect live users as long as you don’t deploy the changes. In addition assets created on the Common role can be easily shared amongst multiple roles so you don’t have to create and maintain the same content on multiple roles. Lastly when desired you can refresh the draft portal by overwriting everything on the draft portal with what is currently configured on the live portal.

Go to the draft portal of the common role

Do the following to get to the common role and enable draft portal:

1. Go to the Menu Icon and select Roles & Security.
2. Click the User Roles Link.
3. Click the Edit button for the Common role.
4. If you don’t see a tab called Draft Portal in the left navigation, click the button in the action bar below the header called Portal Draft Mode.
5. Now click the tab called Draft Portal in the left navigation.
6. Click the Refresh button. This will populate the draft portal with everything that is currently in the active portal.
7. Click Save.

At the end of this tutorial you will have created a sample main menu link using the website theme on the common portal and it will look like this:

You will create this main menu link using the website theme in this tutorial.

Download sample image files

1. Download the File:Website-portal-sample-images.zip used to create the image shortcuts and graphical banner .
2. Extract the images from the zip file onto your computer. On a PC this is typically done by right clicking the file and choosing Extract all. Then you select a location to extract the files to. Extracting files to the desktop will make the files easy to find. Your files will now appear in the location you chose.

Later in the tutorial we will upload the files you extracted in this step into your SmartSimple system.

Creating a main menu link on the common role draft portal

First we will create a Main Menu link on the Draft Portal of the Common role. Setup a main menu link by doing the following:

1. Go to the Menu Icon and select Roles and Security.
2. Click on the User Roles link.
3. Click the Edit button for the Common Role.
4. Click the Draft Portal tab on the left navigation.
5. Under Main Menu title bar click the Add Main Menu button looks like a plus sign.
   

   Add main menu button
6. For Caption enter Home.
7. For Content Type select Sections.
8. Click Save.
9. Change the Theme to Website.
10. Click Save.
11. In the Hierarchical Navigation near the top of the page click on Draft Portal - Common.
    

    Hierarchical Navigation
12. Click Preview in the submit bar at the bottom of the screen (a window will open showing you a preview of the common portal with your Main Menu Link titled Home).
13. Click on the Home Main Menu link in the header that we just created (the area under the header is white because we have not defined any sections inside our main menu link.)

Now we have created a Main Menu link in the draft portal for users, next we will add sections and content to our Main Menu link called Home.

Creating a section container

The first section we are going to create is called a Section Container. We will use this to create a graphical banner and it will contain other sections. Think of the section container as an empty box.

1. Close the Preview window with the X in the top right of the window.
2. Click the Edit button (looks like a pencil) for the Main Menu section we created earlier called Home.
   

   The Edit button
3. Click the Add Section button looks like a plus button and is found under the Sections title bar.
4. For Name enter Graphical Banner.
5. For Type choose Section Container.
6. Leave the other fields blank.
7. Click Save.
8. Click on the tab called Display.
9. Click Save so you will be able to upload a background image.
10. On the Display tab again, for Background Image click the Browse button that looks like an open folder.
    

    The browse button
11. Select the image called banner-sample.jpg and click Open (these images have been provided above. See the instructions in the section above called Download Sample Image Files) .
12. Click the Upload button beside the Browse button (A preview of the image will appear).
    

    The upload button
13. For Background Position choose Bottom and Horizontal Center.
14. For Background Opacity move the slider all the way to the left where it says Low.
15. For Font Color enter these 6 digits 300130 (this will make the font color purple).
16. Click Save.

The display tab should look like this at this point:

The display tab

We have now created a Section Container with an image background and we have specified the text inside should be a dark purple. Next we will add a text section inside the section container.

Creating a text section inside the section container

1. On the General Tab of the Section Container we created above.
2. Click the Add Subsection button which looks like a plus sign under the title bar called Subsections.
3. For Name enter Welcome Text.
4. For Type leave it as Text Template.
5. For Title enter Welcome @firstname@ (this variable will display the users first name).
6. For Instruction enter Update your profile, then start your journey by applying for grant.
7. Click Save.
8. Click Draft Portal - Common in the Hierarchical Navigation Bar near the top of the page.

Now we have a graphical image banner with a text section inside it. Next we will create image shortcuts.

Creating an image shortcuts to the user’s profile

In this step we will create Image shortcuts on the common role. Please note if you have existing shortcut sections in the common role and you have not selected which shortcuts you want to appear in that section, then all the shortcuts on the role will show up in that section. If this scenario applies to you any new shortcuts you create will show up in your existing section. To fix this open the desired shortcut section and select the shortcuts you only want to display in that section. Once that is done new shortcuts you create will no longer automatically appear in that section which is recommended.

Create an image shortcut on the common role which will bring users to their profile by doing the following:

1. On the Common role click the Shortcuts tab in the left navigation menu.
2. Click the New Shortcut button in the action bar it looks like a plus sign.
   

   text
3. For Name enter Profile.
4. For Style select Image.
5. For Action Type select URL.
6. For URL click the URL Lookup which looks like binoculars (a modal window will open).
   

   text
7. For Select Object Type choose People.
8. For Select Action choose Edit My Profile.
9. Click Apply (the modal window will close and the URL will be populated with the correct link).
10. Click Save.
11. For Image click the Browse button (looks like an open folder, if you do not see the image browse button check that Image is selected for Style and then click Save.).
12. Select the image called shortcut-profile-sample.jpg (these images are provided. See the instructions in the section above called Download Sample Image Files) .
13. Click Ok.
14. Click the Upload button beside the Browse button (you will see an image thumbnail appear once the image is uploaded).
15. For Button Label enter Update Profile.
16. Click Save.

You now have an image shortcut that will enable the user to see and edit their profile. Next we will create an image shortcut that will take the user to a list view.

Creating an image shortcuts to a list view

Create an image shortcut to a List view so the user can select a program to apply to, by doing the following:

1. In the Common Role, click on Shortcuts in the left navigation.
2. Click the New Shortcut button.
3. For Name enter Apply.
4. For Style select Image.
5. For Action Type select System List View.
6. For System List View select an existing List View from the list.
7. For Button Label enter Apply to Grants.
8. Click Save.
9. For Image click the Browse button.
   

   The browse button
10. Select the image called shortcut-apply-sample.jpg (these images are provided. See the instructions in the section above called Download Sample Image Files).
11. Click Open.
12. Click the Upload button located beside the Browse button (the image preview will appear).
13. Click Save at the bottom of the page.

Now we have created two shortcuts for our portal, next we create a Shortcut section inside our Section container.

Creating a shortcut section inside the section container

When you create a shortcut section, we suggest you should always select the shortcuts you want to display in that section. If you select no shortcuts, all shortcuts will display. We will create a shortcut section inside our section container to hold the two image shortcuts we just created by doing the following:

1. In the Common role click on the Draft Portal tab in the left navigation.
2. Under the Main Menu title bar click the Edit button for the Main Menu link called Home.
3. Under the title bar called Sections click the Edit button for Graphical Banner.
4. Under the title bar called Subsections click the Add Subsection button.
5. For Name enter Banner Shortcuts.
6. For Type select Shortcuts.
7. Leave the other fields blank.
8. At the bottom of the page for Selected Shortcuts click the Lookup (if you do not select shortcuts using this lookup all shortcuts will appear).
9. Check the shortcuts with the name Apply and Profile that we created earlier then click the Ok button.
10. Click Save.
11. Click Draft Portal - Common in the Hierarchical Navigation at the top of the page.
12. Click the Preview button in the submit bar at the bottom of the page.
13. Click the Main Menu link called Home in the header to see how our portal looks now.

Your portal should look like the below at this stage.

A graphical banner with a text and shortcut section

Now that we have added a shortcut section to our graphical banner, next we will add two aggregate style shortcuts in a new section below.

Creating an aggregate style shortcut using count

The aggregate style shortcuts are linked to a list view and are designed to show the Count, Sum or Average. Set these up by doing the following:

1. In the Common role click on the Shortcuts tab in the left navigation.
2. Click the New Shortcut button.
3. For Name and Title enter Applications in progress.
4. For Style select Aggregate.
5. Select an existing System List View.
6. Select an Aggregation Column (you could select something like name).
7. For Aggregation Type select Count.
8. Toggle on Link to List view. This way when the shortcut is clicked it will take you to the list view so users can apply.
9. Click Save.

Creating an aggregate style shortcut using sum

The Sum aggregation type is typically used to show a total of funding dollars, people helped or other totals. Set this up by doing the following:

1. In the Common role click on the Shortcuts tab in the left navigation.
2. Click the New Shortcut Button.
3. For Name and Title enter Approved grants to date.
4. For Style select Aggregate.
5. For System List View select an existing list view.
6. For Aggregation Column select something with a dollar value such as amount requested.
7. For Aggregation Type select Sum.
8. For Number Format select Currency.
9. Toggle on Link to List View so the user can go to the list view.
10. Click the Save button at the bottom of the page.

Now you have two aggregate type shortcuts. Next we will add them to a new section in our portal.

Create a shortcut section and add aggregate shortcuts

We will now create a second shortcut section outside the section container which will contain only aggregate shortcuts.When you have more than a few shortcuts we recommend adding multiple shortcut sections. For example you might want to have one section for all your image type shortcuts and a second section for all your aggregate type shortcuts. Create the new shortcut section with aggregate shortcuts by doing the following:

1. In the Common role select Draft Portal in the left navigation.
2. Under the Main Menu title bar click the Edit button for Home.
3. Under the Sections title bar click the Add Section button that looks like a plus sign.
4. For Name enter Secondary Shortcuts.
5. Change the Type to Shortcuts.
6. Under the Shortcut Settings title bar click the Lookup button (looks like binoculars) for Selected Shortcuts.
7. Select the two aggregate shortcuts we created earlier named Applications in progress and Approved grants to date.
8. Click OK.
9. Click Save.
10. Click on the Display tab and for Background Color enter E0EEFF this will change the background of this section to a light blue.
11. Click Save.
12. Click the Draft Portal - Common in the Hierarchical Navigation bar at the top.
13. Click the Preview button in the submit bar at the bottom of the page.
14. Click the Main Menu link called Home.

Now you can see aggregate shortcuts displaying the amount of applications in progress and the dollar value of those applications. Next we are going to add a chart that will show applications by status.

Creating a section type of chart

If you have users that are working with multiple applications in multiple statuses you may want to consider using a chart to visualization the status of their applications. You can add a chart by doing the following:

1. In the Common Role select Draft Portal in the left navigation.
2. Under the Main Menu title bar click the Edit button for Home.
3. Under the Sections title bar click the Add Section button.
4. For Name enter Chart.
5. For Type select Chart.
6. For Chart List View select your desired list view. It must have a column with the status and a column with the amount requested.
7. For Chart Title enter My Applications by Status.
8. Leave Chart Type set to Bar.
9. For X-Axis choose the Status.
10. For X-Axis Label enter Status.
11. For Y-Axis choose the amount requested.
12. For Y-Axis Label enter Amount Requested.
13. Leave Aggregation set to Sum.
14. Click the Save button.
15. To preview the portal click on Draft Portal - Common in the hierarchical Navigation.
16. Click the Preview button at the bottom of the page.
17. Click the Main Menu link called Home in the header.

Congratulations you have now created a sample Main menu link using the website theme and other features.