|
| 1 | +# Dynamic Dataset Detail Component - Frontend Configuration Guide |
| 2 | + |
| 3 | +## Overview |
| 4 | + |
| 5 | +This guide provides details on configuring the **Dynamic Dataset Detail Component** on the frontend. This component can be customized to display dataset information in various templates and layouts based on your needs. |
| 6 | +The configuration needs to be provided or mounted in `/src/config/frontend.config.json` |
| 7 | + |
| 8 | +## Configuration guide |
| 9 | + |
| 10 | +The `datasetDetailComponent` field allows you to customize the display of dataset details using 4 template types. Each template type is rendered based on the order property, which determines the display priority. The available template types are listed in the Component Configuration Table. |
| 11 | + |
| 12 | +You can define labels directly using the `label/source` property, or use them as keys for localization. If no localization configuration is provided, the template will fall back to using the `label/source` as the default value. |
| 13 | + |
| 14 | +The `enableCustomizedComponent` flag enables or disables the dynamic component. If set to false, the default dataset detail component will be used. In the customization field, you can provide configuration for the components, including their types, labels, and other settings. |
| 15 | + |
| 16 | +Below you can find the example configuration, but for more advanced customizations, refer to the Component Configuration Table for detailed options on each template type and field configuration. |
| 17 | + |
| 18 | +```json |
| 19 | +"datasetDetailComponent": { |
| 20 | + "enableCustomizedComponent": true, |
| 21 | + "customization": [ |
| 22 | + { |
| 23 | + "type": "regular", |
| 24 | + "label": "General Information", |
| 25 | + "order": 0, |
| 26 | + "fields": [ |
| 27 | + { |
| 28 | + "element": "text", |
| 29 | + "source": "datasetName", |
| 30 | + "order": 0 |
| 31 | + }, |
| 32 | + { |
| 33 | + "element": "copy", |
| 34 | + "source": "pid", |
| 35 | + "order": 1 |
| 36 | + }, |
| 37 | + { |
| 38 | + "element": "text", |
| 39 | + "source": "description", |
| 40 | + "order": 2 |
| 41 | + } |
| 42 | + ] |
| 43 | + }, |
| 44 | + { |
| 45 | + "type": "attachments", |
| 46 | + "label": "Scientific Metadata", |
| 47 | + "order": 1, |
| 48 | + "options": { "limit": 10, "size": "large" } |
| 49 | + }, |
| 50 | + { |
| 51 | + "type": "scientificMetadata", |
| 52 | + "label": "Scientific Metadata", |
| 53 | + "viewMode": "table", |
| 54 | + "order": 2 |
| 55 | + }, |
| 56 | + { |
| 57 | + "type": "datasetJsonView", |
| 58 | + "label": "Metadata JSON view", |
| 59 | + "order": 3 |
| 60 | + } |
| 61 | + ] |
| 62 | +} |
| 63 | +``` |
| 64 | + |
| 65 | +## Component Configuration Table |
| 66 | + |
| 67 | +| **Template Type** | **Configurable Fields** | **Field Description** | **Configurable Options** | **Example** | |
| 68 | +| ---------------------- | ----------------------- | --------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------- | ------------------------------------------------------------------------ | |
| 69 | +| **regular** | **label** | Title for the section that can be customized. | - `label`: Custom label for the section (e.g., "General Information") | `"label": "General Information"` | |
| 70 | +| | **order** | Controls the display order of the Regular section in the UI | - `order`: Integer, determines position in the UI | `"order": 0` | |
| 71 | +| | **fields** | List of fields to display within the section. It should contain an array of objects, each with `element`, `source`, and `order` fields. | | `{"fields": [{"element": "text", "source": "datasetName", "order": 0}]}` | |
| 72 | +| | - **element** | Defines the type of data to display in the row (e.g., text, copy, tag, linky, date). | - `element`: Field type (e.g., `text`, `copy`, `tag`, `linky`, `date`) | `"element": "text" ` | |
| 73 | +| | - **source** | Specifies the dataset property to display, and it must match a field in the `OutputDatasetDto` . | - `source`: Dataset property name | `"source": "datasetName"` | |
| 74 | +| | - **order** | Controls the display order of the field in the fields. | - `order`: Integer, defines the sequence of fields in the UI. Lower values appear first. | `"order": 1` | |
| 75 | +| **attachments** | **label** | Custom label for the section that can be configured. | - `label`: Custom title for the attachments section (e.g., "Gallery") | `"label": "Scientific Metadata"` | |
| 76 | +| | **order** | Controls the display order of the attachments section in the UI. | - `order`: Integer, determines sequence within the template. | `"order": 1` | |
| 77 | +| | **options** | Allows configuration for the display of attachments. | | `{"options": {"limit": 10, "size": "large"}}` | |
| 78 | +| | **options.limit** | Limits the number of items to display in the attachment section. | - `limit`: Number of items to display (e.g., 10). | `"limit": 10` | |
| 79 | +| | **options.size** | Configures the display size of attachments (small, medium, or large). | - `size`: Display size (small, medium, large). | `"size": "small"` | |
| 80 | +| **scientificMetadata** | **label** | Customizable label for the scientific metadata section. | - `label`: Custom section title (e.g., "Scientific Metadata") | `"label": "Scientific Metadata"` | |
| 81 | +| | **viewMode** | Defines how the scientific metadata is rendered (as a table, JSON, or tree view). | - `viewMode`: `table`, `json`, or `tree` | `"viewMode": "table"` | |
| 82 | +| | **order** | Controls the display order of the scientific metadata section. | - `order`: Integer, determines position in the UI | `"order": 2` | |
| 83 | +| **datasetJsonView** | **label** | Label for the JSON view section. | - `label`: Custom section title (e.g., "Metadata JSON view") | `"label": "Metadata JSON view"` | |
| 84 | +| | **order** | Controls the display order of the dataset JSON view. | - `order`: Integer, determines position in the UI | `"order": 3` | |
| 85 | + |
| 86 | +--- |
| 87 | + |
| 88 | +## Template Types Example Preview |
| 89 | + |
| 90 | +- **regular:** Displays dataset properties in configurable rows. |
| 91 | + Can be customized with different elements. |
| 92 | + |
| 93 | + - text: Displays a simple string |
| 94 | + |
| 95 | +  |
| 96 | + |
| 97 | + - linky: Automatically transforms URLs or emails into clickable links. |
| 98 | + |
| 99 | +  |
| 100 | + |
| 101 | + - copy: Displays a copy-to-clipboard button |
| 102 | + |
| 103 | +  |
| 104 | + |
| 105 | + - date: Displays a formatted date based on the dateFormat value in the frontend config file |
| 106 | + |
| 107 | +  |
| 108 | + |
| 109 | + - tag: Displays a list of items as tags |
| 110 | + |
| 111 | +  |
| 112 | + |
| 113 | +- **scientificMetadata:** Displays metadata in different views: |
| 114 | + |
| 115 | + - table |
| 116 | + |
| 117 | +  |
| 118 | + |
| 119 | + - json |
| 120 | + |
| 121 | +  |
| 122 | + |
| 123 | + - tree |
| 124 | + |
| 125 | +  |
| 126 | + |
| 127 | +- **datasetJsonView:** Displays the dataset as a JSON document as addition. |
| 128 | +- **attachments:** Displays the attachments associated with the dataset. You can configure options like display size and limit the number of items. |
0 commit comments