--- title: Working with Page Settings - Home Page slug: neurons-for-itsm/admin-user-help/enu/latest/working-with-page-settings-home-page createdAt: 2026-07-14T19:16:41.864Z --- **Role**: Administrator **Minimum Version**: Ivanti Neurons for ITSM 2024.2. Home Page provides you through configuring and customizing the Home page in the Ivanti Self Service Management Portal (SSMP) using the Page Designer. Including how to: - Add, edit, and organize sections and modules - Manage page layouts - Apply role-based and device-based visibility - Export and import page templates :::ExpandableHeading{isOpen="true"} ## Accessing the Home Page Settings 1. Log in to Neurons for ITSM Self Service portal as an Administrator. 2. Click **Edit Page** at the top right corner. The **Page Designer** opens. 3. Select the **Home** page from the **Page Selector** dropdown. 4. Select the page view you want to edit from the **View Selector** dropdown **Desktop**, **Mobile**, or **Tablet**. 5. Select the **Page Settings** tab. ***Page Designer Settings Displayed for the Home Page:*** ::Image[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/2mGU54CfO-U7RmpmsI8YE_pagedesigneroverview.png" alt="Page Designer with numbered annotations to describe the different sections of the user interface." position="flex-start" size="40" initialPath="../../Resources/Images/SelfServiceMgmt-images/page_designer_overview.png" githubPath="Content/Resources/Images/SelfServiceMgmt-images/page_designer_overview.png" showCaption="false" width="1905" height="871" darkWidth="1905" darkHeight="871"} ::: ::::ExpandableHeading{isOpen="true"} ## Understanding the Page Designer Interface The Page Designer interface includes: - **Page Settings and Global Settings** tabs: - **Page Setting** Select to access the **Sections/Rows** and **Module** element lists. - **Global Settings** Select to access settings that apply to the entire page. - **Design panel**: To build and preview your page layout. - **Settings panel**: Configure properties for sections, rows, and modules. - **Page functions**: ::Image[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/Y6bmFNMgCE8ydQ5NioYdx_pagefunctionsupdatedview.png" position="flex-start" size="40" initialPath="../../Resources/Images/SelfServiceMgmt-images/page_functions_updated_view.png" githubPath="Content/Resources/Images/SelfServiceMgmt-images/page_functions_updated_view.png" showCaption="false" width="568" height="48" darkWidth="568" darkHeight="48" indent="1"} :::Paragraph{listStyleType="disc" indent="2"} **Page selector**: Use the **Page Selector** dropdown to edit required page. ::: :::Paragraph{listStyleType="disc" indent="2"} **Role selector**: Use the **Role Selector** to modify role template. ::: :::Paragraph{listStyleType="disc" indent="2"} **Organization selector**: Use the **Organization selector** to edit required organization template. ::: :::hint{type="info"} The **Config Homepage for MSP** global constant must be enabled (set to True) to view the **Organization selector**. For information on global constants, refer to [Working with Global Constants](docId\:mirDh_rHcg0jeI2i56fMm). ::: - **View selector**: Use the **View Selector** dropdown to select change between different devices; select **Desktop**, **Mobile** or **Tablet**. - **Page Actions** :  ![](https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/6Y3CXnznsB0yUr-ceVBjG_image.png) :::Paragraph{listStyleType="disc" indent="2"} **Exit**: Click **Exit** button, to navigate back to the configuration console. ::: :::Paragraph{listStyleType="disc" indent="2"} **Actions**: Select to save and continue editing the page, delete the draft page, export the page, or import a page. ::: :::Paragraph{listStyleType="disc" indent="2"} **Preview**: Preview the current section and module design. In preview, select **Back to edit mode** to return to editing. ::: :::Paragraph{listStyleType="disc" indent="2"} **Publish**: To publish the page with updated information. ::: :::Paragraph{listStyleType="disc" indent="2"} **Discard**: Discards all edits that you have made during the editing session. For information on the **Global Settings** tab, refer to [Configuring Global Settings](docId\:xD7J2mCEw9T7j1ouDcKgP). ::: :::: :::ExpandableHeading{isOpen="true"} ## Managing Page Lifecycle Actions - After you complete all settings, click **Publish** to apply all page and global settings - You can also click the **Preview** button to review changes before publishing. - To save it as a draft, click the **Actions** dropdown, and then select **Save and continue editing** to save work without publishing. - **Page selector**: Use the **Page Selector** drop-down list to display the page you want to edit. - **Role selector**: Use the **Role Selector** to select the role template you want to edit. - **Organization selector**: Use the **Organization selector** to select the organization template you want to edit. ::: The **Page Settings** tab contains the following page elements: ::::ExpandableHeading{isOpen="true"} ## Adding Sections/Rows Use the **Sections/Row** tab to add sections, and specify background colors and images. You can also drag the modules onto existing sections to rearrange them within the layout. 1. Click **Sections/Rows**. 2. You can add 1-column, 2-column, 3-column, and 4-column sections to your page design based on your requirements. 3. Drag the sections onto the page, the **Drop Modules here** box appears, allowing you to drag the modules you want to create for your page design. 4. Configure section properties in the Settings Panel. :::Paragraph{indent="1"} The **Settings** panel appears. ::: :::Paragraph{indent="1"} Enter the following details. ::: | Field | Description | | ----------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Name | Enter a name for the section. | | Number of columns | Select the number of columns to display in the section. | | Background Color | Select a background color for the section.
Use the **Background image** toggle icon to enable or disable the background image. You can also edit or delete the image based on your requirement. Click **Add image** and select an image for the background. | | Background Width | Background width.
Use the **Rounded Corners** toggle icon to enable or disable rounded corners. | | Responsive | Under **Responsive**, two options are displayed:
**Hide on Desktop**: Enable or disable to hide or show the entire section/row only in desktop view.
**Hide on Mobile**: Enable or disable to hide or show the entire section/row only in Mobile view. | The following buttons are also available in the Sections/Rows: - :inlineImage[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/9rBCH5rShdTGsXxTBlToA_clone-icon.png" alt caption size="10" width="16" height="16"} to clone a widget. - :inlineImage[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/tkJaqfnAdxHmNjT3GHsmp_rearrange-section-icon.png" alt caption size="10" width="16" height="17"} to arrange the section. - :inlineImage[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/SIpod-GC-4pB3lxOg84Mu_delete-section-icon.png" alt caption size="10" width="14" height="16"} to delete the section. :::: :::::ExpandableHeading{isOpen="true"} ## Adding Modules Use the **Modules** tab to create custom widgets, hero banners, search bar, add text and media, and quick links. **To add a Hero banner** The Hero Banner is a drag-and-drop module used to create static or dynamic banners. It supports multilingual content, call-to-action buttons, carousel layouts, and responsive visibility. 1. Click **Modules**. 2. Drag the **Hero Banner** onto the page. :::Paragraph{indent="1"} The Settings panel appears on the right side of the page. ::: :::Paragraph{indent="1"} Specify the following details. ::: | Field | Description | | -------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Name | Name of the banner. Select the** Static **or **Dynamic** options based on your requirements.
The **Static **option enables you to use different colors, title text, and Call-to-Action (CTA)links, which can add a banner in the carousel view.
The **Dynamic** option allows you to configure a banner with the help of different business objects, sorting criteria, and number of items to display. | | Add image | Add an image for the banner. | | Color | Select a color for the banner. | | Use color as image overlay | Enable this option to overlay the image with the selected color. The color is added as an opaque layer over the image. | | Title text | Enter a title for the banner.
The **Translator** enables you to select a language and enter a translation for the title text. | | Title text & CTA alignment | Select the alignment from the dropdown list. | | Show call to action link | Enable this option to show the action link as a link button on the banner. | | Call to action text | Enter text to display on the link button. | | Call to action link | Enter the link for the action. | | Add Banner | Click to add another banner to the section. When an additional banner is added, individual settings for this banner are displayed in the **Settings** panel. | | Responsive | **Hide on Desktop**: Enable or disable to hide or show the entire section/row only in desktop view.
**Hide on Mobile**: Enable or disable to hide or show the entire section/row only in Mobile view. | 3. \[Optional] You can perform below operations: - To add additional banners, click **Add Banner** in the **Settings** section. - To remove a banner, click **Remove Banner** in the **Settings** section. - To remove all the banners, click the **Remove Module** in the **Settings** section. - Recommended formats for all the banners are **.png**, **.jpeg**, **.gif**, and **.svg** - Recommended dimensions for the banner are **width = 1920px** and **height** = **512px** for large size, **256px** for medium size, and **128px** for small size. :::hint{type="info"} - The maximum supported file size for banner images is **2 MB**. If the uploaded file exceeds this limit, the system displays an error message. - To use **.svg** files in banner configurations, you must first add **\*.svg** to the list of allowed attachment types. By default, **.svg** is not included in the out-of-the-box (OOTB) list. If it is not added, the application will display an error when you attempt to upload the file. To enable it, refer to [Allowed File Extensions](docId\:F2BRlKzLiGLkWD1PioVDv), and add **\*.svg** to the list. ::: ::::ExpandableHeading{isOpen="true"} ## To add a List widget Use the **List** widget to display data from **Saved Search**, **Service Catalog**, **My Items**, **Favorites**, and **Validation List** and list their results. ### Add a List widget 1. Click **Modules**. 2. Under the **Widgets** section, drag the **List** icon to the page section. 3. To configure the **List** widget, edit **Settings** panel. - Enter **Name** and **Widget Title**. - Select one of the following option from the **Get data from** dropdown menu: - Select **Saved Search** to configure the **List** widget by selecting a **Business Object**, and select the **Saved Search** based on that business object. You can also **Sort order** in **Ascending** and **Descending** order. - Select **Service Catalog** to configure **List** with a **Saved Search** based on the service catalog. - Select **My Items** to list your items based on the filter from **From Search** in the **My Items** workspace. You can also **Sort By** based on a item and **Sort order** in **Ascending** and **Descending** order. - Select **Favorites** to list Service Requests that are marked as favorite in the service catalog. :::hint{type="info"} By default Favorites is disabled here, enable Favorites in the Service Catalog workspace to reflect Favorites here. For more information refer to [Enabling or disabling the Favorites icon from the Page Designer:](docId\:DZL1lgjSJDuy7hScJOsdD). ::: - Select **Validation List** to fetch data from a **Validation List** of a **Business Object**. - Define the **Number of items to display/Limit** to limit the list. Check **Show Count** to show the total number of items in the list. :::hint{type="info"} The show count is only for configuration with the following data-sources: **MyItems**, **Service Catalog**, and** Favourites**. ::: - Click the **Options** to define actions for the Header, individual Items, or see all links. Each option determines how users can navigate to workspaces, items, or filtered views. :::Paragraph{indent="2"} ***Options for List module*** ::: ::Image[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/o_h7ExgIzhxlpaZ9oAFJv_page-designer-click-options.png" position="flex-start" size="90" initialPath="../../Resources/Images/SelfServiceMgmt-images/page-designer-click-options.png" githubPath="Content/Resources/Images/SelfServiceMgmt-images/page-designer-click-options.png" showCaption="false" width="1857" height="705" darkWidth="1857" darkHeight="705" indent="2"} | Field | Description | | ----------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Header Click** | Defines the action for the list header. The header can open a page, dashboard, workspace, or trigger an action.
**Target** - Specifies the destination type: **Self Service** or **URL**.
**Workspace** - Select the target workspace, for example Service Catalog.
**Command** -Select the action to perform, for example Open Item workspace. | | **Item Click** | Defines the action for an individual item in the list. The action can open item details or trigger a specific action.
**Target** - Specifies the destination type: **Self Service** or **URL**.
**Workspace** - Select the target workspace, for example Service Catalog.
**Command** - Select the action to perform, for example Create Request Offering.
**Item** - Select the specific item in an action, for example Address change. | | **See all Click** | Defines the action for the **View All** link. Opens a full list or a filtered view using a preset filter, Filter ID, or saved search.
**Target** - Specifies the destination type: **Self Service** or **URL**.
**Workspace** - Select the target workspace, for example My Items.
**Command** - Select the action to perform, for example View Items from My Items workspace.
**Item** - Select the specific item, for example Data Backup. | :::Paragraph{indent="1"} In the Options, the adjacent field of the **Command** dropdown changes based on the selection. It can appear as an **Item** dropdown, a **Filter** dropdown, or a **Rec ID** textbox. For filter-based options in the Command dropdown, the adjacent field appears as a Filter dropdown. For certain View or Open command options, the adjacent field appears as an Item dropdown. ::: :::Paragraph{indent="1"} For example, when you select the **Knowledge Base** workspace and **View Filtered Knowledge**, the adjacent field is a **Filter** dropdown. ::: :::hint{type="info" indent="1"} If no option is selected in the **Item** dropdown, when a user click an item, it opens the defined item record. ::: ::Image[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/toLeewBK_OgYDlT179jNN_page-designer-options-page.png" position="flex-start" size="80" initialPath="../../Resources/Images/SelfServiceMgmt-images/page-designer-options-page.png" githubPath="Content/Resources/Images/SelfServiceMgmt-images/page-designer-options-page.png" showCaption="false" width="1497" height="555" darkWidth="1497" darkHeight="555" indent="2"} :::Paragraph{indent="2"} Starting with Release 2026.1, the **Options** window displays all filters associated with the selected workspace when executing filter-based commands. The available filters include **Favorites**, **Most Popular**, and **Pending Approval**. ::: :::Paragraph{indent="2"} When you select any open item based option in the **Command** dropdown for any workspace, the adjacent dropdown displays **Items**. The dropdown lists up to 50 items. If the required item is not listed, enter the item name in the search box to find and select it. ::: :::Paragraph{indent="2"} When **URL** is selected as the target, the system automatically applies the configured filter to the results, ensuring consistent behavior across all navigation methods. ::: :::Paragraph{indent="2"} To support backward compatibility, after upgrading to version 2026.1, the **Item** dropdown displays the **Rec ID** instead of the item name if the existing configuration includes only a Rec ID. To modify the item and display the name, reselect the item from the dropdown and save the configuration. ::: :::Paragraph{indent="2"} When you select a workspace option from the **Command** dropdown, users are navigated to the corresponding workspace. If the workspace used in the click fields, such as Header click, or item click, or view all click, matches the workspace used in the saved search dropdown options selected in the Settings column, the selected filters are retained and applied when the workspace opens. ::: :::Paragraph{indent="2"} If the workspace option used in the click fields is different from the workspace associated with the **Saved search** dropdown options selected in the **Settings** column, the workspace opens using its default filter behavior. ::: :::Paragraph{indent="2"} To set up custom navigation apart from navigating to workspace or using default filter behavior, select the required option in the **Command** dropdown, and then choose the appropriate option in the adjacent Item or **Filter** dropdown. ::: :::Paragraph{indent="2"} If any click, such as **Header click**, **Item click**, or **View All** click, is configured to use **Service Catalog** as the data source and **Most Popular** as the saved search, you can update the link to display the required page, such as the **My Items** workspace with the Service Requests filter applied. ::: :::Paragraph{indent="2"} To configure this, select the desired click, select **My Items** from the **Workspace** dropdown, select **View Filtered Items List** from the **Command** dropdown, and then choose **Service Requests** from the **Filter** dropdown. ::: ### Configure the card layout 1. Select the checkbox next to the dropdown menu to show the particular field in the card. :::hint{type="info" indent="1"} The dropdown fields in the **Configuration Card** shows only when at least one record is added for the respective configuration. Otherwise it displays "**no data to display**" in the dropdown. ::: 2. Select the **Target** for the parameter. Selecting a parameter for the **Title** field is mandatory. 3. Enable **Icon** and **Star Ratings** to show in the card. ::Image[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/J4BSDOyHchp5kb1FO1OyU_config-card.png" position="flex-start" size="80" initialPath="../../Resources/Images/SelfServiceMgmt-images/config-card.png" githubPath="Content/Resources/Images/SelfServiceMgmt-images/config-card.png" showCaption="false" width="844" height="267" darkWidth="844" darkHeight="267"} 4. Edit labels using the **Configure Label** icon :inlineImage[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/CsTxo_uG46mmtZ7M3Q4Gv_config-label-icon.png" alt caption size="10" width="13" height="13"}. :::Paragraph{indent="2"} To localize the label, select **Translator**. ::: ::Image[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/s91S1AOm798o4plUtau8m_label-translator.png" position="flex-start" size="80" initialPath="../../Resources/Images/SelfServiceMgmt-images/label-translator.png" githubPath="Content/Resources/Images/SelfServiceMgmt-images/label-translator.png" showCaption="false" width="431" height="248" darkWidth="431" darkHeight="248" indent="2"} 5. Select the** Language** and enter the **Translated Text** to translate. ::Image[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/bh2P6yxgh0EpDVwVMIWcM_label-translation.png" position="flex-start" size="80" initialPath="../../Resources/Images/SelfServiceMgmt-images/label-translation.png" githubPath="Content/Resources/Images/SelfServiceMgmt-images/label-translation.png" showCaption="false" width="431" height="401" darkWidth="431" darkHeight="401"} 6. Use **Empty Text** to show a specific words if the item is empty. 7. You can also **Preview** the item based on the parameters selected in the **Configured Card** section. ::Image[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/gXRG5ciSaE1MM9arLORlm_preview-card.png" position="flex-start" size="70" initialPath="../../Resources/Images/SelfServiceMgmt-images/preview-card.png" githubPath="Content/Resources/Images/SelfServiceMgmt-images/preview-card.png" showCaption="false" width="827" height="168" darkWidth="827" darkHeight="168"} 8. Click **Save as custom widget** to save the list as a custom widget. 9. You can also hide the list based on **Hide on Desktop** or **Hide on Mobile**. :::hint{type="info"} You can configure and view the list widget in the Self Service even when there is no data to show or render. ::: :::: ::::ExpandableHeading ## To add a Text box 1. Click **Modules**. 2. Under **Widgets**, drag the **List** icon to the page section. The Settings panel appears on the right side on the page. 3. Enter the following: - **Name** of the text box and **Widget Title**. - Select the **Title Alignment** as **Center**, **Left**, or **Right** for the title. - Pick a **Title Color**. - Widget Height: - Select **Auto** to automatically assign the text box height. - Select **Custom** to specify the height of the widget (pixels). - Click **Add Content** to open the text editor. In this you can configure the: - Font size, color and format, add lists, links, and background color for the content. - Localization of the content by selecting the **Language** and enter the **Translated Text** to translate. ::Image[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/CQmt7vC_kSkL0qF-3jGaR_language-selector-text-box.png" position="flex-start" size="70" initialPath="../../Resources/Images/SelfServiceMgmt-images/language-selector-text-box.png" githubPath="Content/Resources/Images/SelfServiceMgmt-images/language-selector-text-box.png" showCaption="false" width="1920" height="1031" darkWidth="1920" darkHeight="1031"} :::hint{type="info"} For each language you have to manually enter the localized or the translated content. ::: :::Paragraph{listStyleType="disc" indent="2"} Select the required Responsiveness of the widget: ::: :::Paragraph{listStyleType="disc" indent="3"} **Hide on Desktop**: Enable or disable to hide or show the entire module only in desktop view. ::: :::Paragraph{listStyleType="disc" indent="3"} **Hide on Mobile**: Enable or disable to hide or show the entire module only in Mobile view. ::: :::: ::::ExpandableHeading ## To add an HTML Text box 1. Click **Modules**. 2. Under **Widgets**, drag the **List** icon to the page section. :::Paragraph{indent="1"} The Settings panel appears on the right side on the page. ::: 3. Enter the following: - **Name** of the HTML text box and **Widget Title**. - Pick a **Title Color**. - Select the **Title Alignment** as **Center**, **Left**, or **Right** for the title. - Widget Height: - Select **Auto** to automatically assign the text box height. - Select **Custom** to specify the height of the widget (pixels). - Click **Add Content** to open the HTML text editor. In this you can configure the: - Font size, color and format, add lists, links, background color, and the custom HTML code. - Localize the content by selecting the **Language** and enter the **Translated Text** to translate. ::Image[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/obbNdtLk-UwytKQ13qyAS_language-selector.png" position="flex-start" size="80" initialPath="../../Resources/Images/SelfServiceMgmt-images/language-selector.png" githubPath="Content/Resources/Images/SelfServiceMgmt-images/language-selector.png" showCaption="false" width="1920" height="1031" darkWidth="1920" darkHeight="1031"} :::hint{type="info"} For each language you have to manually enter the localized or the translated content. ::: :::Paragraph{listStyleType="disc" indent="2"} Select the required Responsiveness of the widget: ::: :::Paragraph{listStyleType="disc" indent="3"} **Hide on Desktop**: Enable or disable to hide or show the entire module only in desktop view. ::: :::Paragraph{listStyleType="disc" indent="3"} **Hide on Mobile**: Enable or disable to hide or show the entire module only in Mobile view. ::: :::: :::ExpandableHeading ## To add a Search bar 1. Click **Modules**. 2. Under **Text and Media**, drag the **Search** icon onto the page. The Settings panel appears on the right side on the page. 3. Specify the following: - Name - PlaceHolder text - Search Bar Size 4. This step is optional. Enable the **Show common search** toggle icon to display the common search items, and enable the **Show trending common keyword before a user starts typing** toggle icon to display the common and trending keywords before you start typing the keywords. ::: ::::ExpandableHeading ## To add List Use **List** widget to fetch search data based on **Saved Search**, **Service Catalog**, **My Items**, **Favorites**, and **Validation List** and list their results. 1. Click **Modules**. 2. Under **Widgets** section, drag the **List** icon to the page section. 3. To the configure **List** widget, edit the **Settings** panel. - Enter **Name** and **Widget Title**. - Select one of the following option from **Get data from** dropdown: - Select **Saved Search** to configure **List** with selecting a **Business Object** and a **Saved Search** based on that business object. You can also **Sort order** in **Ascending** and **Descending** order. - Select **Service Catalog** to configure **List** with a **Saved Search** based on the service catalog. - Select **My Items** to list your items based on the filter from **From Search** in My Items workspace. You can also **Sort By** based on a item and **Sort order** in **Ascending** and **Descending** order. - Select **Favorites** to list Service Requests that are marked favorite in the service catalog. :::hint{type="info"} By default Favorites is disabled here, enable Favorites in the Service Catalog workspace to reflect Favorites here. For more information see [Enabling or disabling the Favorites icon from the Page Designer:](docId\:DZL1lgjSJDuy7hScJOsdD). ::: - Select **Validation List** to fetch data from a **Validation List** of a **Business Object**. - Define the **Number of items to display/Limit** to limit the list. - You can define **Actions** and **Visual Layout** by clicking the **Options** button. - Click **Save as custom widget** to save the list as a custom widget. - You can also hide the list based on **Hide on Desktop** or **Hide on Mobile**. :::: ::::ExpandableHeading ## To add custom widgets 1. Click **Modules**. 2. Under Widgets, drag the **List** icon. :::Paragraph{indent="1"} The Text box appears. ::: :::Paragraph{indent="1"} Specify the following details: ::: :::Paragraph{listStyleType="disc" indent="2"} Name ::: :::Paragraph{listStyleType="disc" indent="2"} Widget Title ::: :::Paragraph{listStyleType="disc" indent="2"} get data ::: :::Paragraph{listStyleType="disc" indent="2"} Saved Search ::: :::Paragraph{listStyleType="disc" indent="2"} Sort by and Sort order ::: :::Paragraph{listStyleType="disc" indent="2"} Number of items to display/Limit ::: 3. This step is optional. Click **Options** to select the following options: - Header click - Item click - See all click - Title - Description - Text 4. This step is optional. Click **Save as custom widget** to save the widget. :::Paragraph{indent="1"} The saved widget appears under custom widgets. ::: :::: :::ExpandableHeading ## To add Quick Links Use Quick Links to display useful links to Business Objects, workspaces or web pages. Quick Links can be displayed in your page design as lists, tiles, or a carousel. 1. Click **Modules**. 2. Under **Widgets**, drag the **Quick Links** icon into the section you want them to appear. 3. In the **Settings** panel, specify the following: | Field | Description | | -------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Name | The name displayed on the **Quick Links** box tab - shown in the **Page Designer** only. | | Widget Title | A title for the **Quick Links** widget. The title is shown on the published page (default name is Quick Links). | | Layout options | Select a layout option from the dropdown list - **List**, **Tile**, **Carousel**, or **Button Group** | | Alignment | Only displayed for the **Tile** layout. Select the link display alignment. | | Show Thumbnail | This option is only displayed for the **Tile**, **Carousel**, and **Button Group** layouts. Using this you can display links as thumbnails. Enabling this option displays additional configurable options when configuring links in step 4 below. | | Number of items to display | The number of links to display in the widget. If you add additional links in the link **Options** editor, you may need to increase this value to ensure the additional links are displayed. | | Add Links | Opens the link **Options** editor where you configure each individual link, or add additional links. | | Hide on Desktop | Enable to hide the link section in desktop view. | | Hide on Mobile | Enable to hide the link section in mobile view. | 4. Click **Add Links** to add a **Title** for each individual quick link, the **Link type**, **Link to** details, and configure the link placement, title background color, and title font color. | Field | Description | | -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | Title | Name for the link. | | Translator | Click to select a translation language and provide a translation for the title text. | | Link Type | Select the link type from the dropdown list. | | Link To | Define the destination for the link. This is dependent on the selection you make in the **Link Type** dropdown list, for example, a URL, workspace or Business Object. | | RecId | This parameter is displayed if you select a Business Object in the **Link to** dropdown list. Enter the RecId of the Business Object. | | New Window | Only displayed for a **URL** link type. Select to open the link in a new browser window. | | Title Placement | Only displayed for**Tile**, **Carousel**, and **Button Group** layouts. Select the link title alignment. | | Title Background | Only displayed for **Tile**, **Carousel**, and **Button Group** layouts. Click to open the color editor and define the link title background color. | | Title Font Color | Only displayed for **Tile**, **Carousel**, and **Button Group** layout. Click to open the color editor and define the link title font color. | | Thumbnail Type | Only displayed if you enable the **Show Thumbnail** option. Select the thumbnail type from the dropdown list, can be an icon or image.
Recommended thumbnail icon dimensions are **48px x 48px** and the thumbnail image renders as stretched to size of **Tile**, **Carousel**, or **Button Group** layouts. | | Change | Only displayed if you enable the **Show Thumbnail** option. Click to select a different icon or an image for the thumbnail. | | Thumbnail Background | Only displayed if you enable the **Show Thumbnail** option. Click to open the color editor and define the thumbnail background color. | 5. Click **Ok**. 6. Below are the screenshot of the all the layout options in Quick Links. - List View ::Image[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/xps8aLi1OWv5BHQlWBc54_list-view-of-quick-links.png" position="flex-start" size="40" initialPath="../../Resources/Images/buttons/Allowed Tag/Allowed Tag/List View of Quick Links.png" githubPath="Content/Resources/Images/buttons/Allowed Tag/Allowed Tag/List View of Quick Links.png" showCaption="false"} - Tile View ::Image[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/Hsk8RMmawHmdntMpZTyN-_tile-view-of-quick-links.png" position="flex-start" size="40" initialPath="../../Resources/Images/buttons/Allowed Tag/Allowed Tag/Tile View of Quick Links.png" githubPath="Content/Resources/Images/buttons/Allowed Tag/Allowed Tag/Tile View of Quick Links.png" showCaption="false"} - Carousel View ::Image[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/fgjLaa6z0y2vGGd3BGkBM_carousel-view-in-quicklinks.png" position="flex-start" size="40" initialPath="../../Resources/Images/buttons/Allowed Tag/Allowed Tag/Carousel View in QuickLinks.png" githubPath="Content/Resources/Images/buttons/Allowed Tag/Allowed Tag/Carousel View in QuickLinks.png" showCaption="false"} - Button Group ::Image[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/raAlBwDTcahMDIHwbd17x_button-view-in-quick-links.png" position="flex-start" size="40" initialPath="../../Resources/Images/buttons/Allowed Tag/Allowed Tag/Button View in Quick Links.png" githubPath="Content/Resources/Images/buttons/Allowed Tag/Allowed Tag/Button View in Quick Links.png" showCaption="false"} ::: :::ExpandableHeading ## Recommended Image Sizes and Layout Dimensions for Quick Links To maintain alignment and responsiveness across different layouts and screen resolutions, use the following specifications for Quick Links widgets. **Button Group Layout** - **Thumbnail Size:** (Width) 48px × (Height) 48px **Tiles Layout** (when multiple tiles are used) - **Tile Size:** (Width) 226px × (Height) 168px **Carousel Layout** - **Fixed Height:** 168px | Screen Resolution (x) | 1 Column (0.75 × x) | 2 Columns (0.45 × x) | 3 Columns (0.30 × x) | | --------------------- | ------------------- | -------------------- | -------------------- | | 1920px (Full HD) | 1440px | 864px | 576px | | 1600px | 1200px | 720px | 480px | | 1440px | 1080px | 648px | 432px | | 1366px | 1025px | 615px | 410px | | 1280px | 960px | 576px | 384px | The recommended widths for the Carousel layout are calculated as a percentage of the screen resolution: - **One-column layout:** 75 percent of screen width - **Two-column layout:** 45 percent of screen width - **Three-column layout:** 30 percent of screen width These values are approximations intended to optimize alignment and visibility across common screen resolutions. Using proportional widths ensures that carousel content is not cut off or overly compressed when rendered on different devices. ::: ::::: ::::ExpandableHeading ## Export and Import Page Settings Save customized page settings as a template with the Export and Import feature in the Page Designer. You can make changes such as adding or removing widgets and modifying widget settings. **To export the page settings** 1. In Page Designer, click **Page Settings**, and select Workspace from the dropdown. 2. Make the required changes and click **Publish**. 3. Click **Actions** and select **Export** to save the template. :::hint{type="info" indent="1"} Exporting the page settings packages the entire template with all the page elements and media files such as images, icons, logos, or any attachments. ::: **To import the page settings template** 1. In Page Designer, click **Page Settings**, and select workspace from the dropdown list. 2. Click **Actions** and select **Import**. 3. Locate the saved page settings file and click **Yes** to confirm the overwrite the **Import Changes**. 4. Click **Ok** to confirm successful import 5. Click **Publish** to apply the configuration to the **Page Settings**. :::Paragraph{indent="1"} Optionally, click **Save and Continue** to keep changes as a draft or click **Delete Draft** to discard the changes. ::: :::hint{type="info" indent="1"} Importing the template automatically fetches and renders the entire template, including all the page elements and media files such as images, icons, logos, or attachments. ::: ::::