Portals¶
The ReactClient user interface for end users (such as agents and supervisors) is widely customizable in terms of appearance, layout and behavior. This article introduces you to creating portals (user interface pages) and portlets (elements that can be placed on a portal).
Portal is a web page created in the administration environment in which agents, supervisors and other end users work. Portlets are individual elements on a portal page, such as a call bar, data grid, chart, etc.
The basic type of portlet is Container, which can contain additional portlets. For example, if you set styling for one container to 4/12 and to 8/12 width for another, you will create a basic user interface structure with a narrower container on the left and a wider one on the right. Each additional portlet should be placed in one of the containers.
For example, a portal called Home that looks for the user like:
![../../_images/portal-example1.png](../../_images/portal-example1.png)
consists of several containers to which various portlets or other containers have been added. Each of them with its own styling and behavior settings.
To get from the portal view to the portal edit mode, use the small button in the bottom-right corner. The previous example of the Home portal then looks as follows in this mode:
![../../_images/portal-example1-decomposed.png](../../_images/portal-example1-decomposed.png)
For example, a navigation set to be displayed in black for a group with portals called Home, Calls, Tickets etc. looks as follows:
![../../_images/portal-example1-navigation.png](../../_images/portal-example1-navigation.png)
It is created in the administration as follows:
![../../_images/portal-example1-in-admin.nol10n.png](../../_images/portal-example1-in-admin.nol10n.png)
A navigation group forming the user interface for agents is usually named main
. Another navigation group for supervisors is usually named sup
.
Each portal has an anchor, which is used as a fragment in the portal URL (the part after #
). For instance, the default
anchor is usually the home page of the main
group. Anchors with the sup_
prefix (e.g. sup_agents
) usually indicate a group of portals for supervisors.
If ReactClient is available to others at, for example, http://demo.frontstage.cc/ReactClient/
, then the URL to the default
portal has the URL of http://demo.frontstage.cc/ReactClient/Pages/Portal.html#default
.
![../../_images/url.png](../../_images/url.png)
Editing the portal¶
If you look at the portal pages that you just created, you will find that they are empty. Depending on the purpose, they must be fitted with suitable portlets. Alternatively, you may want to modify existing portals – remove a portlet, change the appearance, layout, etc.
Users who are assigned the role of ShowContentPage
with permission of AllowWrite
or higher will see a small button at the bottom right to enter the portal edit mode.
![../../_images/portal-empty.nol10n.png](../../_images/portal-empty.nol10n.png)
Click on to display four new buttons
that allow you:
add a new portlet. You can choose its name and styling. The portlet type is set as the default name. You must then complete the settings of the added portlet according to its type.
open the portal in a new window in the view mode. It only shows the saved changes.
quit editing and go to the view mode. If there are any unsaved changes, then instead of
in the bottom-right corner, you can see the
buttons on the page. You can thus see your changes and save them immediately.
Save changes but do not exit the edit mode.
Important
The changes that you make will be applied to all users who use the portal. These are not changes just for the current user!
In the edit mode, a set of buttons appears at the top right of each portlet header
![../../_images/portlet-edit-buttons.png](../../_images/portlet-edit-buttons.png)
and the buttons have the following meanings:
Deletes the portlet from the portal. Note that in the case of Container it will delete all portlets in it.
Moves the portlet to another container.
Moves the portlet within the same container to the left before or to the right after the other portlets.
Displays the portlet settings.
Container type portlets allow another portlet to be added into them.
Styling¶
ReactClient uses the Bootstrap framework for CSS layout styling. You set the layout by applying the Bootstrap CSS classes for grids to the portlet.
Note
Responsive styling and the Bootstrap Grid is a complex and extensive topic. For you to fully understand it, we recommend that you read the official documentation or choose from a number of available books and articles.
To put it simply, Bootstrap grids divide the available screen width into 12 notional columns. In portlet styling, you specify how many columns out of 12 at which screen resolution the portlet should occupy. When you set the portlets to have an overall width greater than 12 (they do not fit in a single row), they are arranged under one another.
![../../_images/bootstrap-grids-explained.en.png](../../_images/bootstrap-grids-explained.en.png)
The width class has its name in the form of col-screen-width
, where:
the screen is the device screen size –
xs
for very small screens (cell phones),sm
for small ones (cell phone or small tablet),md
for medium screens (large tablet or computer), andlg
for large ones (widescreen),the width is the number of twelfths of the available width.
Example:
col-md-4
sets 4 columns on a medium and large screen.col-md-4 col-xs-12
sets the width of 4 columns on a medium or large screen, and the width of 12 columns on a very small and small screen.
This helps you obtain a layout responsive to the browser window size and a suitable element arrangement for both large and small displays.
![../../_images/responsive-portal.nol10n.gif](../../_images/responsive-portal.nol10n.gif)