Smartstaff
2,103
edits
Changes
m
===The Plan===
===Common Aggregated Portal vs Single Role Portals===
===Structure of the Portal===
There are also two styles of header, the default and the compact.
If you are using the compact header (recommended) the The user menu appears on the far right and will display your initials, name or photo. The user menu is intended to hold links that pertain to the user, such as updating the user’s profile, the user’s organization, and possibly switching the user’s language.
If you are using the compact header (recommended), the The main menu will appear in line with the user menu. You can have three types of content in the main menu. A single page, sections, and subtabs, which are a drop-down menu of links. Essentially you will have a combination of links and drop-down links. Each link will take the user to a location. The main menu is intended to hold links to UTAs or other specific areas of the system.
====Header Style Compact====
The compact header style displays everything in a single line. It features consistent interactions, takes up less vertical real estate and looks more modern. We suggest you turn on this system-wide setting, but be aware it will affect all users for all roles. To enable the compact header, go to menu icon > global settings > branding > toggle on Enable Compact header.
[[File:Portal-compact-vs-default.png|thumb|none|500px|Compact header and default header]]
====Header Style Default====
By default, your header will have a user menu and main menu that are separated. Some users find this confusing and cluttered so you may want to avoid this style of header.
===Creating a Page===Every portal is a collection of pages. To create a page for your portal, navigate follow these steps: # Navigate to '''Global Settings''' > '''Users''' tab > '''Portals''' and edit the desired portal. Alternatively, you can also reach edit a portal by going to '''Menu Icon''' > '''Roles and Security''' > '''User Roles''' and editing a role with an activated portal. # Under the '''Portal Page''' title bar, click the plus button to add a portal page. Give your page a '''Name''' and '''Caption'''. # If you don't want to display this new page in the top header, toggle off the setting '''Display As Header Link'''. You can still reference this page in a shortcut link, but it will no longer appear in the header.
===Creating a Section===Set To add sections to the page, set the '''Content Type''' to '''Sections. ''' to This will reveal theme theming options. Themes Themes can be used to specify a certain look and feel for the portal page. Certain classic themes (such as "''Traditional" '' or "''Whitepaper"'') do not come with pre-made section templates. However, newer themes (such as "''Website", "Overlook", "Portfolio"'', and "''Management"'') come with additional pre-made section templates that make it easy to customize a page to be a landing page, dashboard, profile, or event page.
You can create a section by clicking the add section button. Inside the section there are differing options based on the type you select. Not all options are available for all types. Typically, you will see the following:
====Default <u>'''Note:'''</u> the functionality and configuration options differ for each theme====The default theme has boxes around each section. This For example, in the ''Traditional'' theme enables you to fit more content inside can render a smaller area. Typically, this theme section in split screen whereas that is used for people who are managing many tasks and who need to see a lot of informationnot available in the ''Whitepaper'' or ''Website'' themes.
[[File:Portal-default-====Traditional Theme====The '''Traditional''' theme-homehas boxes around each section.png|thumb|none|500px|Sample home page in default This theme]]enables you to fit more content inside a smaller area. Typically, this theme is used for people who are managing many tasks and who need to see a lot of information.
Note[[File: Portal-default-theme-home.png|thumb|none|500px|Sample home page in the shortcut section I have toggled off margin and shadow for the shortcut section. This setting is found on the display tab of that section.<strong>Traditional</strong> theme]]
====White Paper Theme====The White paper theme has no boxes. Everything is clean <u>'''Note:'''</u> in the shortcut section I have toggled off margin and white with extra padding, content is bigger shadow for better visibility and text is aligned centerthe shortcut section. Typically, this theme This setting is used for people who are doing a few simple tasks or by those who like a more modern lookfound on the display tab of that section.
learn [[how to create ====Overlook Theme====The '''Overlook''' theme displays a website themed portal layout well-suited for dashboards and multiple columns that span the whole width of the page]].
Note: to create the top banner, I used ====Portfolio Theme====The '''Portfolio''' theme displays a section container and uploaded user-centric layout with a background image and set the background opacity to Low and changed the font color to white. These controls are found on the display tab of this section. Inside the sub section I created constrained width that includes a text template and set its width to 65% so the text does not cover the image at most resolutionsnew banner.
=== ===
→Structure of the Portal
=Overview=
A '''Portal '''is the [[SmartSimple]] terminology for the graphical user interface that a [[User|user]] will see sees upon login. The '''Portal '''interface will change for each user is dependent on their the [[User Role|user role]] and what you, as how that role has been configured by the '''[[Global User Administrator|Global Administrator]]''', have configured for that role. This article will give you an overview of how to easily configure your portals for your users with the portal builder. We will explore what options are available when creating a portal, and provide guidance on how best to utilize these options.
==Example of a Portal==
Once a user has been [[User#Activating a User|activated]], they will be able to [[Login Page|log into]] your SmartSimple [[instance]].
:: [[File:My CSR portal.png|700px|border]]
=Portal Building – Essentials=
==User Roles==
'''[[User Role|User roles]] ''' organize or group like similar users togetherand, and in conjunction with permissions and other logic, control what people can see and do in SmartSimple. ''' User Roles ''' group like people together and are additive, meaning that a user may possess multiple roles, so roles need not be mutually exclusive. Typically, we group users on what they will be doing. Example: applicants, reviewers, and approvers, and by department: accounting, sales, partners.Before you can build a portal, you need to define user roles in your system. You can define new user roles by going to the menu icon '''Menu Icon''' > '''Roles and Security ''' > '''User Roles'''.
Please note we take a most restrictive approach when it comes to permissions, so if you set one role to deny something, it will supersede all other permissions. This means if a user has 3 roles, and 2 roles have permission to do something but the third role does not, the user will not be able to do that action. So as a general practice it is better to add permission then to deny permission on a role. This way, the more roles you have, the more you can see and do in the system.
Before you start building a portal, plan out what each user will need to see and do in their portal.
Let’s use a grant applicant as an example. The grant applicant will likely need to be able to:
# See what funding programs are available and apply to those.
# See the status of their applications in progress and modify them.
# Update their profile and maybe /or their organization's profile.
# See a list of items that require their immediate attention, such as submitting a report or revising an application.
We can use the above to generate simple use cases for our sample grant applicant portal.
Now that we have '''User Roles ''' and we know what our users are going to do in the system, we can decide where we are going to create the portal.
There are two ways in which you can create a portal. You can create the portal on the Common role which is aggregated, meaning assets are shared across multiple roles, or you can create a portal on a single role. If you take this path, assets will not be shared and users will need to flip between roles.
This portal configuration is generally not recommended. With this option, you create a portal on each role. So, the applicant portal is built on the applicant role and the reviewer portal is built on the reviewer role. The drawback to this approach is that if you need to create a help link, you need to build it on each role. If you want to change the link you must go into each role to change it. If users have multiple roles, there is a drop down in the header that allows the user to switch between applicant and reviewer portals, but you only see one portal at a time and don’t have access to all the functionality that has been permissioned for you at one time. Although it is easy to understand and configure one portal per role, it is generally harder to maintain and provides a worse user experience, given people may have multiple roles (example I am an employee and grant manager).
The portal header consists of 3 elements: the Logo, the user menu and the main menu.
[[File:Portal-compact.png|thumb|none|500px|Default and compact headers with elementsElements of the header]]
====Logo====
By default, your system logo will appear in the top left of the header. This logo should be 112 pixels high by approximately 250 pixels wide in PNG format. The width of the logo can vary but the height is constant. Transparent background is recommended for your logo in case you want to have a colored background on your header.Optionally, you can choose to display an alternate logo by uploading a different logo into a SmartFolder and then choose the SmartFolder option.You can also specify a different logo from a SmartFolder for each language you support. SoFor example, users who speak Spanish can see a different logo than users who speak English.
====User Menu====
If you create a link here, try to keep the caption to a word or two, like “Edit Profile” or “My Profile”.
====Main Menu====
Note: keep in mind the only links that should be in the main menu are the most important links that need to be present all the time. If something does not need to be always visible you may want to make it a shortcut instead. If you do create main menu links, keep the amount of links around 5 or less for usability. More links increase cognitive strain on users so always try to keep portals simple. Also, try to keep the captions of these links to 1 or 2 words.
[[File:Portal-link-subtab.png|thumb|none|500px|Two types of main menu links the page and section or the sub tab]]
====The Body of the Portal====
We recommend creating sections in single column as they will render best on all screen sizes and this provides a better experience for people using assistive technology.
[[File:2021-07-ticket-125978-2.png|thumb|none|500px|Portal pages can be displayed or hidden in the header with the <strong>Display As Header Link</strong> toggle]]
[[File:Portal-themes.png|thumb|none|800px|List of available page themes]]
Once a theme has been chosen, you can continue to add sections to your page in one of three ways: * Manually add sections to your page* Add sections from a layout picker* Add sections from a template picker ==== =Creating Sections From Layout======Choosing a Section Theme===A layout picker allows you to designate certain areas of the page for different purposes. To create sections from the layout picker: # Click on the button pictured below labelled '''Create Sections from Layout'''. <br />[[File:Sections-from-layout.png|thumb|none|300px|Button for <strong>Create Sections from Layout</strong>]]Beyond choosing # This will surface the layout, picker where you can choose how to arrange the various sections on the page. Click the desired layout.<br />[[File:Layout Picker 3 lightbox.png|thumb|none|300px|Visual layout picker]]# Follow the prompts for each new subsection until you want your have completed all sections to look.There are three theme options: Default, White paper, and website. ===Creating Sections From Template===You can mix also create sections from templates that already have the section types defined. <u>'''Note:'''</u> The ''Traditional'' and match these ''Whitepaper'' themes at do not come with pre-defined templates. # Click on the page levelbutton pictured below labelled '''Create Sections from Template'''. <br />[[File:Portal-sections-from-template. So, png|thumb|none|300px|Button for '''Create Sections from Template''']]# This will surface the template picker where you can choose what kind of sections you could have a home want on the page that uses . Click the website theme desired template.# The page will refresh and then another page for applications in progress that uses you will see the predefined sections under the white paper theme'''Sections''' title bar. It's easy Click each section to customize them to flip between themes and see which will work best for youyour needs. ===Previewing a Section Theme===To change the theme for a sectionor simply preview a theme:
# Go to the '''Main Menu''' or '''User Menu''' link with the content type set to '''Sections'''.
# Click the '''Preview''' button.
You can try out different themes for each page this way. Note: the functionality and configuration options differ for each theme. For example, in the default theme you can render a section in split screen whereas that is not available in the white paper or website themes.
====Whitepaper Theme====The '''Whitepaper''' theme has no boxes. Everything is clean and white with extra padding, content is bigger for better visibility and text is aligned center. Typically, this theme is used for people who are doing a few simple tasks or by those who like a more modern look. [[File:Portal-default-white-paper-home.png|thumb|none|500px|Sample home page in white paper the <strong>Whitepaper</strong> theme]]
====Website Theme====
The website '''Website''' theme was designed with imagery in mind. This theme looks more like a website with graphical banners and image shortcuts. Typically, this theme is used for people like applicants or volunteers, and when you want to convey a brand feeling or tone. Learn [[how to create a website themed portal page]] [[File:Portal-website-home.png|thumb|none|500px|Sample home page in the <strong>Website</strong> theme]] <u>'''Note:'''</u> to create the top banner, I used a section container and uploaded a background image and set the background opacity to Low and changed the font color to white. These controls are found on the display tab of this section. Inside the sub section I created a text template and set its width to 65% so the text does not cover the image at most resolutions.
[[File:Portal-websiteoverlook-theme-home.pngjpg|thumb|none|500px800px|Sample home page in website with the <strong>Overlook</strong> theme]]
[[File:Portal-portfolio-theme-home.jpg|thumb|none|800px|Sample home page with the <strong>Portfolio</strong> theme]]
====Management Theme====
The '''Management''' theme comes with a constrained width and is suited for multiple column layouts with rounded corners and no drop shadows.
[[File:Portal-management-theme-home.jpg|thumb|none|800px|Sample home page with the <strong>Management</strong> theme]]
===Section Settings===
||Name
||used for reference not displayed to end user
|-
||Type
||define what kind of section this is
|-
||Title
After you have created a section you can move it to another location within your portal by using the move button in the submit bar.
===Portal Page Section Types===
Once you have created a main menu link and set it to sections, you have a number of section options. Below is an overview of each section option.
