Changes

When users log into your system, what will they see? The A '''Portal '''is the [[SmartSimple]] terminology for the graphical user interface that a [[User|user sees ]] will see upon login. The '''Portal '''interface will depend change for each user dependent on their roles [[User Role|role]] and what you , as [[Global User Administrator|System Administrator]], have configuredfor 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 also explore what options are available when creating a portal, and provide guidance on how best to use 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]] All the elements of a user's portal - such as the Main Menu links are displayed on the top header, what graphics or texts are displayed on each page, the user's personal menu items and more - are all highly configurable.

[[User Roles Role|User roles]] organize or group like users together, 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 and by department: accounting, sales, partners.

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. Iff 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 often have multiple roles(example I am an employee and grant manager).

If you are using the compact header (recommended) the user menu appears on the far right and will display your initials, name and possibly your 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.

{| class=====User Menu link types====="wikitable"|-!|Link types available in the user menu are as follows:Type!|Description|-=====||Organization Profile=====||

=====|-||Custom=====||This link type can take the user to any page within your system, for example, to go to the dashboards, enter “/iface/dashboard.jsp”. Note, always use relative URLs to ensure links work across servers and to ensure your system functions as expected.|-=====||Drop Down=====||Not recommended. This legacy setting was used with the default header and it enabled you to add a drop-down menu in the user menu.|-=====||Language=====||Use this link type to surface a language drop down on your portal. The user will be able to switch their portal into any language you have enabled. Note, if you choose to support multiple languages, you must also enter translations for your content into the system. For example, you will need to specify the translation for every menu link and section you have added to your portal. You can do this via a language drop down where you configured those assets. In other areas of the system, such as on custom field configuration pages, you will also need to provide a translation for every caption.|-=====||Change Password=====||This link type takes the user to the change password screen.|-=====||SmartFolder=====||This link type is used to surface a SmartFolder in your portal. For example, if you had resources in a SmartFolder such as help documentation, you could add this link to your user menu and the user could go direct to that SmartFolder and open it in the current window, a modal window or a new window.|-=====||User Profile=====||This link type takes the user to their personal profile. By default, if you have permission to edit the profile you will be taken directly into edit mode. You can toggle off this setting if you want to bring everyone to their profile in view mode.|}

* '''{| class="wikitable"|-!|Setting!|Description|-||Name''': ||used for reference not displayed to end user* '''|-||Title''': ||will display in the section* '''|-||Icon''': ||will display beside the title* '''|-||Description''': ||used for reference not displayed to end user* '''|-||Instruction''': ||used for adding text under the title|}

* '''{| class="wikitable"|-!|Setting!|Description|-||Width''': ||Used to control the width of a section. Generally, avoid using this setting as single column is preferred for usability and accessibility reasons. Keep in mind if you set a width it may look good on your screen but it will look poor for users with a different screens sizescreen sizes. We recommend you leave this setting empty so the section will render full screen. If you must add a width then use percentage so it will scale.* '''|-||Height''': ||Used to control the height of a section. Generally, avoid using this setting as well. Different users will have different screen resolutions so what looks good for you won’t necessarily look good for them. By default, the height of a section will be large enough to hold whatever content is inside. If you use this setting your content may cut off and you may get a scroll bar inside your section. If you must use this setting then enter a pixel value but generally leave it empty.* '''|-||Shadow and ||Turn off the shadow|-||Margin options''': ||Turn off the shadow and margin.* '''|-||Background color''': ||Control the background color of the section.|}

# Go to the main menu '''Main Menu''' or user menu '''User Menu''' link with the content type set to “Sections”'''Sections'''.

# Click '''Save'''.

# Click the preview '''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.

The White paper theme has no boxes. Everything is clean and white with extra padding and , content is bigger for better visibilityand 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:xxx.png|thumb|none|500px|Sample home page in white paper theme]] 

[[File:xxxPortal-website-home.png|thumb|none|500px|Sample home page in website theme]] Note: 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:xxxPortal-chart-options-bar.png|thumb|none|500px|List view charts chart Bar style in a section]] [[File:Portal-chart-options-bar-hor.png|thumb|none|500px|List view chart Horizontal bar style in a section]] [[File:Portal-chart-options-pie.png|thumb|none|500px|List view chart Pie style in a section]] [[File:Portal-chart-options-table.png|thumb|none|500px|List view chart Table style in a section]]

'''Show New Button''': this option enables the user to create a new record from your list view. For example, if I am looking at a list of level 1 applications, you can allow the user to create a new level 1 application from this section.<br/>

Show list [[File:Portal-new-and-search.png|thumb|none|500px|List view with new button and search and call outs]]

The list view mixed record section type enables you to create a list view composed of different record types. Generally used to create a single task list of all your to-dos, without the clutter and effort of creating each individual list as its own section in your portal. To setup:

# Repeat for each list view you want in your mixed record type section (example UTA, User, Organization)note: list views must have a filter.# Select the number of columns desired(if you have enabled default buttons they will appear in the first column) .

Note: the intent of this section type is to display a list of records from multiple areas and give users an easy way to go to a record so they can edit it. You are also expected to make sure the list views you choose have the same number of columns with the same type of information in the same columns. For example, if I combine 3 list views the first column in all of them should hold something like the name or title of the object.<br>  '''Row Clickable''': this option enables the user to be able to open the record by clicking anywhere on the row. If this option is toggled on you do not have to surface an open button on the row.<br> 

[[File:xxxPortal-mixed-record.png|thumb|none|500px|Mixed record type section typeshowing a list of users organizations and grants in the same section]]

[[File:xxxPortal-media.png|thumb|none|500px|Media section type]]

The section container type is different than the other section types as it is used to control the layout of sections. Typically, the section container is used to hold another section. For example, in the website theme, you might use a section container to display a background image across the full width of the page. Then you might place a text section inside this container and restrict its width to 70% of the page. This would give you a banner with an image background and text overlaying that image , but the text would be constrained, so the user could see more of the background image.

[[File:xxxPortal-section-contain.png|thumb|none|500px|Section container with a text type section inside]]

 ====Section in tabs====This section type is used to display multiple sections within a single section. For example, you could have a section called applications and then within that section, you could have a number of tabs such as Applications in progress, applications in review and applications funded. The user can click on any tab to see the corresponding list view.[[File:xxxPortal-section-tabs.png|thumb|none|500px|Section in tabs]]

You can select which shortcuts you want to appear in which section via a lookup. This way you can have multiple shortcut sections with differing shortcuts in each. If you do not select any shortcuts, all shortcuts you have permission to see will display. We recommend only putting one style of shortcut in each section, example have a section of only image shortcuts or only icon shortcuts. Mixing and matching of shortcut styles should generally be avoided. [[File:Portal-shortcuts-default.png|thumb|none|500px|Icon, aggregate and text style shortcuts as they appear in the Default theme. Mixing and matching of shortcut styles in a single section should generally be avoided.]] [[File:xxxPoral-shortcuts-whitepaper.png|thumb|none|500px|Shortcut Icon, aggregate and text style shortcuts as they appear in the White Paper theme. Mixing and matching of shortcut styles in a single sectionshould generally be avoided.]]

# If you are in the common role (recommended) you can choose with which user roles you want to preview the portal with.

Although preview is a good and quick way to see how your changes are affecting your portal , you still need to test with an actual user. Always setup an actual test user the same way you will setup set up real users and test the portal using that user as well. When testing you may want to use the Chrome browser with incognito mode to ensure you don’t get any session bleed from your administrator account. If anything seems to behave in an unexpected way, close your browser , and clear your browser cache and then try again. You can clear your browser cache by CTRL + SHFT + Delete.

Whenever you make a change in the portal builder , it is instantly pushed live to all the users of your system. If your system is already live, you are going to want to configure and test without pushing those changes live. To do this , enable draft mode. In draft mode , you can make a copy of your existing portal, change it as you see fit, test it and then promote the draft version to live when you are ready.

To enable draft mode and deploy to live:

# If you do not see draft portal in the left navigation , click the Arcadia Portal Draft Mode button in the action bar# Click refresh button ; this replaces anything in your draft portal with a copy of whatever is currently configured in the live portal

# Preview like you normally do. When you are ready to make the draft portal live , click deploy in the submit bar.