Tabular

Tabular Widget can used to get a tabular view of required filtered data on the Service Portal.

For details about the Use Case, refer to the graphics below:

 Configure Tabular widget

This section contains the list of steps using which Application Designer can add the widget in the Service Portal screen.

1. Navigate to Design Portal > Widgets > Add Widget.
    Figure: Adding Widgets
   
2. Customize the Service Portal by dragging the widget from the widget list screen.
   Figure: Tabular Widget
   
3. Click (Settings) icon to view the Properties pop-up.

   Figure: Modify the properties

   
   

You can view the following tabs on the Settings for this field:

• Properties
• Data Source
• Appearance

Properties

This section contains the list of properties using which the Application Designer can configure the respective widget feature. To know more about the fields that are available under the Properties section, see the Field Description given below.Figure: Properties

Field Description

Properties
Widget Type	Select Tabular Widget from the drop-down list. Figure: Tabular Widget
Widget Header	Enter a name to the widget according to the data to be configured in the widget Title textbox.  For example: Let us create Tabular Widget to show the tabular view of last 5 Incidents, so the widget title can be Last 5 Incidents. The name appears in the widget as shown below: Figure: Widget Title

Data Source 

Application Designer can configure internal or external widgets by selecting source type under the Data Source tab. You can select the Source from the drop-down list.
Figure: Data Source type

If you select Internal as Data Source type, then you need to select Source, Application, Module, Table, Form, Pagination Type and No. of Records from the screen. Refer to screenshot for more details. 

Figure: Internal Data Source
The table below contains the list of fields and their descriptions that are available under the Data Source section:

Field Description

Data Source
Internal	Select the Date Source as Internal from the drop-down list.
Application	Select the Application from which the data has to be fetched! Figure: Service Management The screen is shown with Service Management selected under the Application from the drop-down list.
Module	Select the Module from which the data has to be fetched. The drop-down list populates based on application selection. Here Incident is selected under the Module drop-down list. Figure: Module
Table	Specify the Table from the drop-down list. The drop-down list populates based on module selection. Here Manage Incidents is selected under the Table drop-down. Figure: Table
Form	Select the form which should open when clicked on ID of the records in the tabular widgets. The forms mapped for the table should be selected. This field will appear only after the Application is selected. Here Manage Incidents is specified under Form.
Open Mode	Select the mode of opening the records. You can select as Self Window or New Tab from the drop-down list. Figure: Open Mode
Columns	Define the columns of the Tabular data by selecting the fields from the drop-down list. You can define order by dragging and dropping the columns as shown in the GIF. Figure: Drag and drop the columns Give the display name to the column. The first column is defaulted as ID and it cannot be changed.Figure: Columns Here ID is the Display Name for the Column ID. You can add more fields by clicking the + icon in front of the field.
Records to be Displayed	Specify the number of records to be displayed in the Table.Figure: Records display  If Limited Records is selected, specify the number of records that should be displayed in single view. The screenshot shows the No. Of Records specified as 5. Refer to the screenshot for more details. Figure: Limited Records If Records to be Displayed is selected as Unlimited, then all the records load in a lazy load format based on the selected properties. You can display the records in Pagination or Virtual Scroll format. If you select the Pagination type as Pagination, you have to specify the number of Default Records Per Page for displaying the records. Here Pagination and 10 records per page are selected for the unlimited records. Figure: Unlimited Records For more details, see the screenshot below: Figure: Pagination For Pagination Type as the screen appears as shown below: Figure: Virtual Scroll To view the Tabular widget with unlimited records using Vertical Scroll option, see the GIF below: Specify the value you want to sort under Sort By field. For example Sort By as ID, Created on etc. Based on the field selected you can select Order Type as Ascending or Descending based on the Records.
Common Filter Field	Select the field from the drop-down list on which a common filter can be applied. For example, if you have a Tabular widget showing list of resolved incidents, you can apply the common filter to get the list of incidents created in last 10 days. Here under the Common Filter field Created On can be selected. In similar way, you add another Tabular widget showing list of incidents and select Updated On from the filter field. Figure: Common Filter For details about configuring filter, see Common Filters.

The section the list of steps using which the Application Designer can select configure the conditions and add the filter set for the Tabular widget.

Figure: Condition

The table below contains the list of fields and their descriptions that are available under the Conditions section:

Conditions

Add Filter Set

Click add filter set to add filter for the field, operator and values. Figure: Add Filter Set Refer to screenshot for more details. Figure: Conditions The screen below displays: Requestor with Dynamic as Operator and Logged in User as Value. Tenants with is as Operator and Information Technology as Value. If you want to add more conditions, click the + icon. You can also filter based on dot walk. Refer to the example screenshot below for field details.Figure: Dot walk-based filter set

For more information about Conditions, refer to Dynamic operators in Service Portal.

If you select External as the Source type, then it fetches the results from a third-party app. The screen contains the list of features using which Application Designeryou can select Source, API, Form, Pagination, and Condition.

Figure: Data source : External

The table below contains the list of fields and their descriptions that are available under the Data Source section:
Field Description

Data Source
External	Select the Date Source as External from the drop-down list. Here Column Config is selected from the API list.
API	Select the API to be configured for the widget.Figure: API
Get Response	Click the Get Response button to fetch data from third party applications. The data is fetched from the API selected and stored in a temporary table Figure: Get Response
Test Now	Preview the data fetched by clicking the Test Now button.
Form	Define the Form using which URL should open when you click on the data widget. Figure: Get the Response field
Records	Click Records to be Displayed to view the details of data captured from the API. Refer to section under Internal data source, for more details about displaying records per page. Figure: Records The response is presented in the table format and can be presented in ascending or descending order.

Appearance 

This section contains the list of features using which the Application Designer can select Icon, Title, Table Design, Header Text, Data Text, and Background.

Figure: Appearance
The table below contains the list of fields and their descriptions that are available under the Appearance section:

Field Description 

Appearance
Icon
Icon Upload	Select the Icon to be uploaded. Figure: Icon selection
Icon Position	Select the position for the icon by selecting the size and padding. Figure: Icon size and Padding
Widget Header
Text format	Select the preferred text format for the Widget Header. Figure: Text format
Header Seperator	Select the Border style, Width and Color for the Header Seperator. Figure: Header Seperator format
Table Design	Specify the appropriate table design by selecting from the Table Design Tabs.Figure: Table Design Select the background color of the table from color palette. Figure: Color The configured table with selected design appears as shown below:Figure: Table design
Header Text	Select the preferred text format for Header.Figure: Header Text See the below screenshot for more details. Figure: Header Text
Data text	Select the preferred data format for the columns. Figure: Data text format See the below screenshot for more details. Figure: Data text
Background
Background Type	Select the preferred background type. Figure: Background
Border
Border	Select the border style from the drop-down list. Figure: Border
Dimension	Select the widget's height and width from the drop-down list. You can set the height in pixels (px) and the width in both percentage (%) and pixels (px). Using a percentage for width allows the widget to fill the container's width.Figure: Dimension

 Click Save to save the configuration. The configured Tabular Widget appears as shown below.Figure: Tabular Widget

If you click Record ID present inside Tabular Widget, form related for selected record should be displayed in the same tab.