Layouts
- 02 Jul 2024
- 6 Minutes to read
-
Print
-
PDF
Layouts
- Updated on 02 Jul 2024
- 6 Minutes to read
-
Print
-
PDF
Article summary
Did you find this summary helpful?
Thank you for your feedback
Layouts in Service Portal
In the Service Portal, Layout determines how different components, such as widgets and forms, are organized and displayed to users. The Layouts available under the Login Screen are summarized in the following table.
Table
| SL No | Layout type | Percentage |
|---|---|---|
| 1 |  Figure: Single column | 100% |
| 2 |  Fig: Two columns in 1:1 ratio | 50% - 50% |
| 3 |  Fig: Two columns in 1:4 ratio | 20% - 80% or 80% - 20% |
| 4 |  Fig: Two columns in 3:2 ratio | 60% - 40% |
| 5 |  Fig: Two columns in 3:1 ratio | 75% - 25% or 25% - 75% |
| 6 |  Figure: Three columns in 1:2:1 ratio | 25% - 50% - 25% |
| 7 |  Fig: Three columns in 1:1:1 ratio | 33% - 33% - 33% |
| 8 |  Fig: Four columns in 1:1:1:1 ratio | 25% - 25% - 25% - 25% |
| 9 |  Fig: Four columns in 1:1:1:1:1 ratio | 20% - 20% - 20% - 20% - 20% |
| 10 |  Fig: Four columns in 1:1:1: 1:1:1 ratio | 16% -16% -16% - 16% -16%-16% |
Panels in Service Portal
There are two types of Panels in Service Portal. They are:
- Accordion is used to present information hierarchically, where users can click on a section header to reveal its contents. This helps in organizing content that may have multiple sections or categories, making it easier for users to navigate and find relevant information.
- Tab is a user interface pattern that organizes content into separate sections or categories. Users can switch between Tabs to access different content without leaving the current page.
Figure: Panel (Accordion and Tab)
The configured Accordion and Tab appear on the consumer screen as shown below: 
User persona: Application Designer
Let us start customizing the Layouts, Accordion, and Tab and configure the columns to house the widgets.
Explore the following Use Case for customizing the Service Portal!
Use Case User persona: Analyst | Solution |
| Adam wants the portal screen to be organized with various widgets displaying critical information and actions. The analyst wants critical information to be displayed as numerical widgets at the top containing the incident information (open, closed, or pending) and graphical widgets at the bottom containing the incident categorization (incident to status and incident to workgroup). | In the Portal Builder, John can drag and drop the Layout element onto the canvas. The requirement is to place three numerical widgets at the top. So, to fulfill this 25%-25%-25% percent layout can be selected, dragged, and dropped in the container at the top. At the bottom, to divide the screen into two halves, he can drag the layout of 50%-50% to place the widgets. To enhance the design, he can assign different backgrounds to the top and bottom layouts. |
For details about the Use Case, refer to the graphics below:
Configure Layout
This section contains the list of steps using which Application Designer can configure the layouts in the Service Portal through the Design Portal screen.
Prerequisites
.png?sv=2022-11-02&spr=https&st=2024-11-21T18%3A07%3A40Z&se=2024-11-21T18%3A17%3A40Z&sr=c&sp=r&sig=3JlyJ5wXI8jHiFSc7Ve0XbqxTU8rtUgehaueFBtyYEM%3D)
- Application should be created.
- Domain, Sub Domain, Module, and Tenant values should be configured.
- Navigate to the
settings icon. - Select Design Studio > Application > Service Portal. Create a new Service Portal and configure the properties in General tab.
To configure the Layout, perform the following steps:
- Navigate to Design Service Portal > Layout.
- Under the Layout tab, you can view a list of layouts that can be dragged and dropped anywhere on the Service Portal.
- Drag and drop Layouts to the Service Portal as needed. The screenshot displays the layout with percentages of 100% and 50-50% (1 depicts 100%, and 2 depicts 50%-50%).
Figure: Drag and drop Layouts - Click Settings to configure the properties of the container. The screenshot of Properties tab appears as shown below.
Figure: Configuring the properties
- Type the name in the Layout Header textbox in the Properties pop-up window. Here Layout Header is specified as Layout name. You can click Show Layout Header to display the name on the screen. The header name will not be displayed in Customer screens.
Figure: Layout Header - Navigate to the Appearance tab for applying background to the Layout. A pop-up window appears as shown below.
Figure: Appearance
The table below contains the list of fields and their descriptions that are available under the Appearance section.Field Description
Field Description Background Background Type Give an appropriate background to the Properties. 
Figure: Background TypeTransparent If you select Transparent, then you can add transparency to the Background.
The screen appears as shown below:
Figure: Transparency
Use a slider to define the percentage of transparency.
For example, here Transparency is kept at 70 %.Solid If you select Solid, then you can select the color of the Background.
The screen appears as shown below:
Figure: Solid BackgroundImage Select Image if you want can upload the image to Background. Upload the image by browsing from the device.
The screen appears as shown below:
Figure: Image upload
The screen appears as shown:
Figure: Uploaded image padding
You can upload multiple images and add Transition Time as shown in the screenshot.
Figure: Multiple image uploadLayout Header Padding Add auto padding to the Top, Right, Bottom and Left by enabling the Padding switch in the Properties popup. The screen appears as: 
Figure: Enable auto padding
If you disable the Padding switch, you can adjust the Top, Right, Bottom and Left padding of the container as needed!
Figure: Disable auto padding Layout Header Separator Border Style the border by the selecting desired Border Type. The screenshot displays with Border style selected as Solid. 
Figure: Border styleWidth Select the thickness of the divider by selecting the appropriate option from the Width dropdown. 
Figure: Width dropdown Color Give the desired color for the border. You can click the default color cube to load the color palette and select the desired color tile. 
Figure: ColorPadding Layout Padding Select the padding for the margin for the Layout. 
Figure: Layout PaddingWidget Margin Select the width of the margin of the Widget. 
Figure: Widget MarginBorder Border Customize the border style by choosing your preferred type from the drop-down menu. Options include Dashed, Dotted, Solid, or None. 
Figure: BorderWidget Alignment Choose the desired alignment for the widget in a layout. 
Figure: Widget AlignmentThe below screenshots showcase the versatility of this widget alignment feature.
If aligned horizontally, widgets are arranged one below the other. Refer to screenshot.
Figure: Widget Alignment (Horizontal)
When vertically aligned, widgets will be displayed in a row, resembling the layout specified in the screenshot.
Figure: Widget Alignment (Horizontal) - Click Save to save the configuration. NoteYou can swap (top or bottom), clone, or delete the Layout by using the respective icons on the top right corner of the Service Portal. Refer to the screenshot for more details.
Figure: Swap clone and delete actionsConfigure Accordion
To configure the Accordion, perform the following steps:
- If you select Accordion under Panel, you can configure the Properties and Appearance by clicking the Settings icon as shown in the screenshot.
Figure: Accordion properties - Specify the values for Container Name and Layout Header based on the Accordion.
Figure: Configuring the Accordion properties - Navigate to the Appearance tab for applying background to the Accordion. A pop-up window appears as shown below.Figure: Appearance
For more details about the Appearance section, see Field Description.
Configure Tabs
To configure Tabs, perform the following steps:
- Add a layout and drop the Tab after selecting it from the Panel section.
Figure: Tab - You can add multiple Tabs and configure the Properties and Appearance by clicking Settings icon as shown in the screenshot.
Figure: Multiple Tabs - Click the Settings icon on Tab1. Edit Tab label name gets displayed on the icon.
Figure: Edit tab - Navigate to the Properties tab. The table below contains the list of fields and their descriptions that are available under the Properties section.
Figure: Properties
Refer to the Field Description for more details.
Field DescriptionProperties Title Enter the title for the Tab. 
Figure: Tab
Here it is titled as General.Icon Select an appropriate icon to the Tab based on the attribute. 
Icon Position Select the icon position from the drop-down list. You can select left or right based on the requirement. 
Figure: Icon PositionSort Order Define the sequence in which the tab should appear. 
Figure: Sort Order
For example, IT Services tab is defined with Sort Order as 1 and the HR Services tab is defined with Sort Order as 2. See the screenshot as shown below.
Figure: Sort Order 1
Figure: Sort Order 2 - Navigate to the Appearance tab for applying background to the Tabs. A pop-up window appears as shown below.
Figure: Appearance - Select the Background Type from the Background. A transparent or solid color or image or color icon can be selected for the background. Refer to the screenshot for more details.
Figure: Background Type - Click Save to save the Tab configurations.
Was this article helpful?