Configuring the Hitlist component

The Hitlist component shares the following configuration properties with the Search component:

• servicesUrl
• sessionId
• accessId
• repositoryName
• locale
• componentId
• componentPrefix

For details about these values, see the Search component configuration.

Hitlist configuration properties

The following table describes properties that are specific to the Hitlist component:

Property	Description	Values	Example
displayProperties	Defines a comma-separated list of properties that should be displayed in the hitlist. If a property is defined in this list, but it is not available in the search response data, then it will not be shown. All properties defined in this list are shown, unless they do not belong to any of the content types (default or custom) defined on the current repository. You can also define sub-properties to be shown. The shortName is displayed, and, in case icon is used as the display type, the related content icon is shown.	resource.mimeType - shows the mimeType value of the resource contained in the search results data. _type - displays information about the type of a given content (Content, Folder, or some other custom type).	displayProperties="name,active, createdAt,value,id,owner,resource.mimeType,_type"
displayWidths	Defines a comma-separated list of integer entries. It must contain the same entries that are set within the displayProperties configuration. It holds the widths (in pixel) of the columns within the hitlist. If 0 is used, then the remaining space is split between the properties containing 0 as the width size.	Numeric values separated by commas.	displayWidths="250,100,165,0,365,100,130,130"
displayTypes	Defines a comma-separated list of the entry types.	icon - icon is displayed in the cell text - (default value) a normal text is displayed, both- icon and text are shown money - money format is displayed in the cell.	displayTypes="text,icon,text,money,text, icon,icon,both"
showColumnCount	Configures whether the count column should be displayed as a column in the hitlist. If it is set to true, then the count column is displayed as the first column.	true (default) false	data-show-column-count="true"
showCountMessage	Configures whether the count message (Showing {0} rows), which appears beside the pagination buttons is to be displayed. If it is set to true, then the message is shown. If false, then it is hidden.	true false (default)	data-show-count-message="true"
dateTimeFormat	Configures the default date and time format. It has precedence over the dateTimeFormat present in the locale entries, which is the translation configuration for the UI components.		data-date-time-format="dd/MM/yyyy HH:mm"
booleanFormat	Configures a format for displaying boolean properties. Note that this behavior is applicable only if the displayType is not set to icon or both.	true and false separated by a comma yes and no separated by a comma.	data-boolean-format="yes,no"
moneyFormat	For properties configured with the DisplayType=money, this property defines a format for displaying the data in the cell within the hitlist.	The format needs to have the following details organized in this sequence: A decimal separator (is by default set a dot "."); A thousand separator (is by default set to a comma ","); A symbol for the currency (no default value); Position of the currency symbol (true- the symbol is displayed after the value, false - specifies the default behavior when the symbol is set in front of the value); A sign to show in front of the number if it is negative (is by default -). Setting this value to true will wrap negative numbers in parentheses (123,45). The number of decimals to display (by default, it is 2). Setting this value to false will display all values provided in the actual value. All these configurations must be split with a ^ symbol.	data-money-format=",^.^€^false^true^2" The resulting value can look as follows: € 1.226,72 € (2.286,91)
maxOpennedTabs	Configures the maximum number of tabs which are displayed in the hitlist. If this number is reached, the next time a new tab is required, the user will be presented with a UI for selecting which tab to close, in order for the new tab to be created. The user can still cancel closing, which will make more tabs then the max to be shown anyway.	10 (default)	data-max-openned-tabs="5"
menuProperty	Sets a name for the property which, on its column header in the hitlist, will present a 3 dots icon indicating a menu with operations for a user. By default, if this is not set, the menu is shown for the count column. If showColumnCount is set to false, then the name property is the default one.		data-menu-property="active"

Hitlist component configuration example

<!-- Place code into your HTML Body part -->

<!-- Define container size for UI Component -->
<div style="width: 100%; height: 500px;">
    <!-- UI Component - Hitlist -->
    <hitlist-element 
        id="d1-hitlist-component"
        data-log-level="info"
        data-session-id="20231116171002297-b6d90899-37e5-4966-9b4a-78b01c57f961"
        data-services-url="https://dev-phoenix-adx.staging.document.one/services/"
        data-show-last-page="false"
        data-display-properties="name,active,createdAt,number,value,id,owner,resource.mimeType,_type"
        data-display-widths="250,100,165,110,0,360,100,132,130"
        data-display-types="text,icon,text,text,text,text,icon,icon,both"
        data-component-prefix="d1-ui-hitlist/"
        data-repository-name="default"
    >
        <!-- UI Component - Load module (.js) and style (.css) -->
        <script src="https://dev-phoenix-adx.staging.document.one/services/d1-ui-hitlist/js/d1-hitlist-component.js" id="d1-hitlist-js" type="module"> </script>
        <link rel="stylesheet" type="text/css" href="https://dev-phoenix-adx.staging.document.one/services/d1-ui-hitlist/js/d1-hitlist-component.css">
        <link rel="stylesheet" type="text/css" href="https://dev-phoenix-adx.staging.document.one/services/d1-ui-hitlist/global.css">
    </hitlist-element>
</div>