Configuring the Property Panel component

The Property Panel component shares the following configuration properties with the other UI components.

The following components are shared with the Search component:

• data-access-id
• data-repository-name
• data-locale
• data-component-id
• data-log-level
• data-session-id
• data-services-url

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

The following components are shared with the Hit list component:

• data-date-time-format
• data-display-properties

For details about these properties, see the Hit list component configuration.

data-display-properties specific details

For the data-display-properties, you can additionally specify an additional property in thecustomType.customParameter format, if you have custom content types available for your repository.

Thus, for example, if you have invoice as a content custom type, and invoiceType as a custom parameter available on the repository level in your Document.One system, you can specify an additional property Invoice.invoiceType in the data-display-properties.

Property Panel configuration components

The following parameters are specific to the Property Panel component:

Property	Description	Values	Example
data-show-flat	Defines whether to display flat PropertyPanel with Groups Info.	true false (default)	data-show-flat=true
data-show-alone-group	Defines whether to display group information.	true (default) false	data-show-alone-group=false

Property Panel component configuration example

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

<!-- Define container size for UI Component -->
<div style="width: 100%; height: 500px;">
    <!-- UI Component - Property Panel -->
    <property-element
        id="d1-property-component"
        data-log-level="info"
        data-locale="en"
        data-session-id="20231116171002297-b6d90899-37e5-4966-9b4a-78b01c57f961"
        data-services-url="https://dev-phoenix-adx.staging.document.one/services/"
        data-component-prefix="d1-ui-property/"
        data-display-properties="resource.mimeType,resource.name,resource.fileSize,resource.md5"
    >
        <!-- UI Component - Load module (.js) and style (.css) -->
        <script src="https://dev-phoenix-adx.staging.document.one/services/d1-ui-property/js/d1-property-component.js" id="d1-property-js" type="module"> </script>
        <link rel="stylesheet" type="text/css" href="https://dev-phoenix-adx.staging.document.one/services/d1-ui-property/js/d1-property-component.css">
        <link rel="stylesheet" type="text/css" href="https://dev-phoenix-adx.staging.document.one/services/d1-ui-property/global.css">
    </property-element>
</div>