{"activeVersionTag":"latest","latestAvailableVersionTag":"latest","collection":{"info":{"_postman_id":"486c91dd-18ac-4590-881f-2a4b8679ff0c","name":"Mozard Suite (v1)","description":"This is techinical documentation for Mozard Suite.\n\nYou can find information on:\n\n1. [Form embed](#1-form-embed)\n    \n2. [Datalist embed](#2-datalist-embed)\n    \n3. [Webhooks](#3-webhooks)\n    \n4. [API usage](#4-api-usage)\n    \n5. [Formula functions](#5-formula-functions)\n    \n6. [API documentation](#5-api-documentation)\n    \n\nPlease contact [support@mozard.nl](https://mailto:support@mozard.nl) for any questions or problems related to thinotes documentation.\n\n---\n\n# 1\\. Form embed\n\nThe form embed is a dynamic and flexible component to load in your created forms from Mozard Suite Forms. It allows you to embed the form into your own website. You can find a basic embed script from Mozard Suite Forms in the _Share_ screen of each form.\n\n## Example\n\nHere's an example of how to initialize the embed:\n\n``` html\n<div class=&#x27;preserveHtml&#x27; class=&#x27;preserveHtml&#x27; class=&#x27;preserveHtml&#x27; class=&#x27;preserveHtml&#x27; class=&#x27;preserveHtml&#x27; class=&#x27;preserveHtml&#x27; class=&#x27;preserveHtml&#x27; class=&#x27;preserveHtml&#x27; class=&#x27;preserveHtml&#x27; class=&#x27;preserveHtml&#x27; class=&#x27;preserveHtml&#x27; class=&#x27;preserveHtml&#x27; id=\"embed\"></div>\n<script src=\"https://cdn.mozardsuite.nl/forms/embed-latest.js\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.mozardsuite.nl/forms/embed-latest.css\">\n<script>\n  Atabase.form('#embed', {\n    id: 'form-id',\n    baseUrl: 'https://TENANT.api.forms.mozardsuite.nl',\n    locale: 'nl-NL',\n  })\n</script>\n\n ```\n\n## EmbedOptions\n\nThe `EmbedOptions` type defines the configuration options for initializing the embed.  \nThese options include what form (and submission), prefilling, loaded page and callbacks.\n\n| Property | Type | Description | Required |\n| --- | --- | --- | --- |\n| `id` | `string` | The id of the form you want to load in. | Yes |\n| `baseUrl` | `string` | URL or a function returning a URL for fetching data. | Yes |\n| `publicKey` | `string` or `undefined` | Using the public key you can start a form from where you left off. | No |\n| `context` | `Context` | Define what page and break you should start on. | No |\n| `payload` | `Payload` | Prefill fields with your own set values. | No |\n| `isLoading` | `string` | Optional set the form into a loading state. | No |\n| `readonly` | `boolean` | Optional make the form uneditable, only allows the used to view the form. | No |\n| `isSavable` | `boolean` | Optional define if the form can be saved for later. | No |\n| `callbackOptions` | `FormEmbedCallbacks` | Optional define callbacks to hook into the form. | No |\n| `locale` | `string` | Use **IETF BCP 47** code, nl-NL, en-GB, etc. | No |\n\n### Context\n\nDefine what page and break you should start on.\n\n``` jacascript\n    context: {\n      page: 'page-id'\n      break: 'break-property-id'\n    },\n\n ```\n\n### Payload\n\nPrefill fields with your own set values.\n\n``` jacascript\n    payload: {\n      'property-id-1': 'Hello world'\n      'property-id-2': true\n    },\n\n ```\n\n### Callback options\n\nDefine callbacks to hook into the form. The available callbacks are described at [FormEmbedCallbacks](#formembedcallbacks).\n\n``` javascript\n    callbackOptions: {\n      onSave: (formPayload) => {\n        return false\n      },\n      onSubmit: (callbackValues) => {\n        return false\n      },\n\n ```\n\n## FormEmbedCallbacks\n\nCallbacks can be used to intersect or see certain changes within the form.  \nThis allows you to run your own code upon the firing of one of these events.\n\n| Property | Type | Description |\n| --- | --- | --- |\n| `onSave` | onSaveFunction | onSave fires when the user clicks on save the form later. |\n| `onSubmit` | onSubmitFunction | onSubmit fires when the form is in it's final state and the user can click on the submit button. |\n| `onClickPreviousPage` | onClickPreviousPageFunction | onClickPreviousPage fires upon clicking the previous page button. |\n| `onClickNextPage` | onClickNextPageFunction | onClickNextPage fires upon clicking the next page button. |\n| `onFormSaved` | onFormSavedFunction | onFormSaved is fired after `onSave` and the saving of the form has been completed. |\n| `onFormSubmitted` | onFormSubmittedFunction | onFormSubmitted is fired after `onSubmit` and the submitting of the form has been completed. |\n| `onInputChanged` | onInputChangedFunction | onInputChanged is fired when the value of an input on the form is changed. |\n| `onValidationError` | onValidationErrorFunction | onValidationError is whenever the validation is fired and returns some errors. |\n\n### onSaveFunction\n\nonSave fires when the user clicks on save the form later.  \nIt returns the current payload and allows you to prevent the saving from happening.\n\n``` javascript\nonSave: (formPayload) => {\n  console.log('formPayload', formPayload)\n  return false\n},\n\n ```\n\n#### Params\n\n| Value | Type |\n| --- | --- |\n| `formPayload` | Record |\n\n#### Returns\n\nWhen returning false you prevent the saving from happing.\n\n``` javascript\nreturn false\n\n ```\n\n### onSubmitFunction\n\nonSubmit fires when the form is in it's final state and the user can click on the submit button.  \nIt returns the payload and any errors that maybe have come up from the validation rpc.\n\n``` javascript\nonSubmit: (callbackValues) => {\n  console.log('payload', callbackValues.payload)\n  console.log('errors', callbackValues.errors)\n  return false\n},\n\n ```\n\n#### Params\n\n| Value | Type |\n| --- | --- |\n| `callbackValues` | SubmitCallbackValues |\n\n#### SubmitCallbackValues\n\n| Value | Type |\n| --- | --- |\n| `payload` | Record |\n| `errors` | Record |\n\n#### Returns\n\nonSubmit can be prevented from executing further this the form from submitting.\n\n``` javascript\nreturn false\n\n ```\n\n### onClickPreviousPageFunction\n\nonClickPreviousPage fires upon clicking the previous page button.  \nIt returns the payload, the current page and the destination page.\n\n``` javascript\nonClickPreviousPage: (callbackValues) => {\n  console.log('payload', callbackValues.payload)\n  console.log('current_page', callbackValues.current_page)\n  console.log('destination_page', callbackValues.destination_page)\n  return false\n},\n\n ```\n\n#### Params\n\n| Value | Type |\n| --- | --- |\n| `callbackValues` | ChangePageCallbackValues |\n\n##### ChangePageCallbackValues\n\n| Value | Type |\n| --- | --- |\n| `payload` | Record |\n| `current_page` | string |\n| `destination_page` | string |\n\n#### Returns\n\nYou can prevent the user from going back a page by returning false.\n\n``` javascript\nreturn false\n\n ```\n\n### onClickNextPageFunction\n\nonClickNextPage fires upon clicking the next page button.  \nIt returns the payload, the current page and the destination page.\n\n``` javascript\nonClickNextPage: (callbackValues) => {\n  console.log('payload', callbackValues.payload)\n  console.log('current_page', callbackValues.current_page)\n  console.log('destination_page', callbackValues.destination_page)\n  return false\n},\n\n ```\n\n#### Params\n\n| Value | Type |\n| --- | --- |\n| `callbackValues` | ChangePageCallbackValues |\n\n##### ChangePageCallbackValues\n\n| Value | Type |\n| --- | --- |\n| `payload` | Record |\n| `current_page` | string |\n| `destination_page` | string |\n\n#### Returns\n\nYou can prevent the user from going to the next page by returning false.\n\n``` javascript\nreturn false\n\n ```\n\n### onFormSavedFunction\n\nonFormSaved is fired after `onSave` and the saving of the form has been completed.  \nIt returns the payload and the public key for the saved draft submission.\n\n``` javascript\nonFormSaved: (formPayload, publicKey) => {\n  console.log('formPayload', formPayload)\n  console.log('publicKey', publicKey)\n},\n\n ```\n\n#### Params\n\n| Value | Type |\n| --- | --- |\n| `formPayload` | Record |\n| `publicKey` | string |\n\n#### Returns\n\nAs this is a final function it cannot prevent any more code from firing.  \nIf you wish to stop the saving please check `onSave`.\n\n### onFormSubmittedFunction\n\nonFormSubmitted is fired after `onSubmit` and the submitting of the form has been completed.  \nIt returns the payload of the submission.\n\n``` javascript\nonFormSubmitted: (formPayload) => {\n  console.log('formPayload', formPayload)\n},\n\n ```\n\n#### Params\n\n| Value | Type |\n| --- | --- |\n| `formPayload` | Record |\n\n#### Returns\n\nAs this is a final function it cannot prevent any more code from firing.  \nIf you wish to stop the saving please check `onSubmit`.\n\n### onInputChanged\n\nonInputChanged is fired when the value of an input on the form is changed.  \nIt returns the input, the value and the payload of the form.\n\n``` javascript\nonInputChanged: (callbackValues) => {\n  console.log('input', callbackValues.input)\n  console.log('value', callbackValues.value)\n  console.log('payload', callbackValues.payload)\n},\n\n ```\n\n#### Params\n\n| Value | Type |\n| --- | --- |\n| `callbackValues` | ChangeInputCallbackValues |\n\n##### ChangeInputCallbackValues\n\n| Value | Type |\n| --- | --- |\n| `input` | Property |\n| `value` | any |\n| `payload` | Record |\n\n#### Returns\n\nAs this is a final function it cannot prevent any more code from firing.\n\n### onInputChangedFunction\n\nonInputChanged is fired when the value of an input on the form is changed.  \nIt returns the input, the value and the payload of the form.\n\n``` javascript\nonInputChanged: (callbackValues) => {\n  console.log('input', callbackValues.input)\n  console.log('value', callbackValues.value)\n  console.log('payload', callbackValues.payload)\n},\n\n ```\n\n#### Params\n\n| Value | Type |\n| --- | --- |\n| `callbackValues` | ChangeInputCallbackValues |\n\n##### ChangeInputCallbackValues\n\n| Value | Type |\n| --- | --- |\n| `input` | Property |\n| `value` | any |\n| `payload` | Record |\n\n##### Property\n\n| Value | Type |\n| --- | --- |\n| `id` | string |\n| `type` | string |\n| `name` | string |\n| `label` | string |\n\n### Returns\n\nAs this is a final function it cannot prevent any more code from firing.\n\n### onValidationErrorFunction\n\nonValidationError is whenever the validation is fired and returns some errors.  \nIt returns the errors and the payload of the form.\n\n``` javascript\nonValidationError: (callbackValues) => {\n  console.log('errors', callbackValues.errors)\n  console.log('payload', callbackValues.payload)\n},\n\n ```\n\n#### Params\n\n| Value | Type |\n| --- | --- |\n| `callbackValues` | ValidationErrorCallbackValues |\n\n##### ChangeInputCallbackValues\n\n| Value | Type |\n| --- | --- |\n| `errors` | Record |\n| `payload` | Record |\n\n#### Returns\n\nAs this is a final function it cannot prevent any more code from firing.\n\n---\n\n# 2\\. Datalist embed\n\nDatalist embed is a dynamic and customisable component designed to be integrated with Mozard Suite Datalists. It allows users to present and interact with data across layouts while supporting customisable themes and interactive functionalities like filters, item highlighting and a hero image.\n\n## Example\n\nHere's an example of how to initialise the embed:\n\n``` javascript\nwindow.Atabase.datalist('#embed', {\n  list: [\n    {\n      id: 'overview-1-id',\n      highlight: {\n        column: \"column-1-from-overview-2-id\",\n        list: \"overview-2-id\",\n        title: \"Custom Title\"\n      },\n      layout: {\n        list: {\n          order: ['content', 'thumbnail'],\n          columns: [\n            'column-1-from-overview-1-id',\n            'column-2-from-overview-1-id',\n          ]\n        }\n      },\n      heroTransformers: {\n        title: ({ value }) => `This is a transformed title in the hero of the detail page ${value}`,\n        subtitle: ({ value }) => `This is a transformed subtitle in the hero of the detail page ${value}`\n      },\n      transformers: {\n        'Voornaam': ({ value }) => value,\n        'Naam': (arguments) => {\n          console.log('Argumenten', arguments);\n          return arguments.value;\n        },\n        'Title': ({ value, context }) => {\n          switch (context) {\n            case 'list': {\n              const newValue = `This is a tranformed title for list view: ${item['Title']}`\n              return newValue;\n            }\n            case 'grid': {\n              const newValue = `This is a tranformed title for grid: ${item['Title']}`\n              return newValue;\n            }\n            case 'table': {\n              const newValue = `This is a tranformed title for table: ${item['Title']}`\n              return newValue;\n            }\n            case 'detail': {\n              const newValue = `This is a tranformed title for the detail page: ${item['Title']}`\n              return newValue;\n            }\n            case 'suggestion': {\n              const newValue = `This is a tranformed title for the suggestions on a detail page: ${item['Title']}`\n              return newValue;\n            }\n          // No default\n          }\n          return value;\n        },\n      },\n      attributes: {\n        'column-id': {\n          'alt': {\n            type: 'dms',\n            value: 'description'\n          },\n          'date': {\n            type: 'dms',\n            value: 'date'\n          },\n          'crossorigin': {\n            type: 'text',\n            value: 'anonymous'\n          },\n        }\n      }\n      hideSearchBar: true\n    }, \n    {\n      id: 'overview-2-id',\n    }, \n    {\n      id: 'overview-3-id'\n    }\n  ],\n  url: 'https://MIJNOMGEVING.api.accounts.mozardsuite.nl',\n  onClickItem: (item) => {\n    // Additional event handling\n  },\n  onMounted: () => {\n    // Additional event handling\n  },\n  onAfterInitialize: () => {\n    // Additional event handling\n  },\n  onFilter: (filters) => {\n    // Additional event handling\n  },\n  onChangeOverview: (overviewId) => {\n    // Additional event handling\n  },\n  onClickSearch: (searchValue) => {\n    // Additional event handling\n  },\n  onChangeLayoutDisplay: (layoutDisplay) => {\n    // Additional event handling\n  },\n  onClickHighlight: (highlight) => {\n    // Additional event handling\n  },\n  onReturnToOverview: () => {\n    // Additional event handling\n  },\n  onChangePage: (pageNumber) => {\n    // Additional event handling\n  },\n  onToggleMobileFilters: (filtersOpen) => {\n    // Additional event handling\n  },\n  headers: () => ({\n    newHeader: 'xxxx-xxxx',\n  }),\n  queryParam: 'encodedParameters'\n  layout: ['list', 'grid', 'table'],\n  hideEmptyValues: true,\n  listAndGridItemsAsAnchors: true,\n  dictionary: {\n    typesTitle: 'Type',\n    filterTitle: 'Filter',\n    closeButton: 'Sluiten',\n    searchPlaceholder: 'Zoeken',\n    searchButton: 'Zoeken',\n    backButton: 'Terug',\n    filtersButton: 'Filters',\n    layoutList: 'Lijst',\n    layoutGrid: 'Grid',\n    layoutTable: 'Tabel'\n  },\n  theme: {\n    detailHeroImageObjectFit: 'object-cover',\n    detailTableImageObjectFit: 'object-scale-down',\n    tableImageObjectFit: 'object-scale-down',\n    listImageObjectFit: 'object-scale-down',\n    gridImageObjectFit: 'object-scale-down',\n    background: '#00000000',\n    foreground: '#000000',\n    mutedForeground: '#787878',\n    item: '#ffffff',\n    itemForeground: '#000000',\n    itemHover: '#f1f1f1',\n    card: '#ffffff',\n    cardForeground: '#000000',\n    overviewTitleForeground: '#000000',\n    returnButton: '#000000',\n    returnButtonForeground: '#ffffff',\n    highlight: '#f1f1f1',\n    border: '#B4B4B4',\n    input: '#00000000',\n    inputForeground: '#696969',\n    primary: '#0a3d3a',\n    primaryHover: '#0a3d3aCC',\n    primaryForeground: '#ffffff',\n    secondary: '#f1f1f1',\n    secondaryForeground: '#000000',\n    destructive: '#fcfcfc',\n    destructiveForeground: '#990000',\n    ring: '#0a3d3a',\n    radius: '0.3rem',\n    link: '#01689b',\n    fontContent: '\"nudista-web\", sans-serif',\n    fontTitle: '\"nudista-web\", sans-serif',\n  },\n})\n\n ```\n\n## Features\n\n### Overview\n\nAn overview is a customizable subset of a datalist. It allows you to select specific columns from a datalist, configure filters and display settings. Overviews are intended to be public, enabling it's use on different websites or within the embed component.\n\nIn the embed, you can use one or multiple overviews simultaneously, allowing users to switch between them within the component.\n\n<img src=\"https://content.pstmn.io/4b067c22-d3cd-490e-bd0d-e6d7e98d19c3/aW1hZ2UwMDEucG5n\">\n\nHaving multiple overviews enables you to change between different content and configurations, allowing for varied settings and filters. Overviews can be different datalist's, using different sets of data.\n\n### Filters\n\nFilters refine the data shown in an overview based on specific criteria. Users can interact with visible filters by dynamically changing the displayed data. The filters are configurable as shown in the following image.\n\n<img src=\"https://content.pstmn.io/6466ed3a-18b7-4eab-b9bc-47e26ae1254c/U2NyZWVuc2hvdCAyMDI0LTA3LTE3IGF0IDE3LjA0LjM0LnBuZw==\">\n\nThe settings of a filter include Label, Placeholder, Description, Standard value and Visibility. The list of filters can be sorted to apply the desired order on the embed.\n\nThe result of applying filters in the embed is shown in the next image.\n\n<img src=\"https://content.pstmn.io/d5e05575-d3f2-4602-936f-2a3c257e836f/aW1hZ2UwMDMucG5n\">\n\n### Groups\n\nGroups allow you to organise columns in the detail page of an item. This feature helps in structuring the data presentation by grouping related columns together. Inside an overview, you can create groups and select which columns are displayed within a group.\n\n<img src=\"https://content.pstmn.io/c67a7e14-b755-4870-8513-23c6176de26e/aW1hZ2UwMDYucG5n\">\n\nThe result of grouping columns will be seen on the detail page of an item in the embed, as can be seen in the image bellow.\n\n<img src=\"https://content.pstmn.io/aaf1185a-e2e1-4b00-a1d7-d3bd878d5fea/aW1hZ2UwMDUucG5n\">\n\n### Overview Layout\n\nLayout allows you to alter the order and content of an item in the overview page.\n\n<img src=\"https://content.pstmn.io/d0f88dac-4bdb-4e54-b832-f0f6fec47d2a/U2NyZWVuc2hvdCAyMDI0LTA4LTE0IGF0IDEzLjEwLjI4LnBuZw==\">\n\n### Overview Highlight\n\nThe highlight feature allows you to link related items from other overviews. This is done by specifying a column in one overview that references items from another overview. The result of adding highlights to the configuration conclude in a new section on the detail page of an item, allowing the user to navigate to different items within the same or different overview.\n\n<img src=\"https://content.pstmn.io/e80ece6d-2e66-4fb2-a604-8ef4cd80d12d/aW1hZ2UwMDQucG5n\">\n\n### Overview Attributes\n\nThe overview attributes enable the attachment of additional parameters to image elements within embedded hypertext. This allows for the customization of image file metadata displayed on the website where the embed is used.\n\n### Overview Transformers\n\nTransformers allow you to modify the displayed value of a value in the overview. This feature is useful for formatting the data in a specific way, such as converting a value to a different unit. The transform can also be applied conditionally based on the context of the display.\n\n### Hero Image\n\nEach overview can have a configurable hero image that will be displayed on the detail page of an item. The hero image enhances the visual presentation of the detail page and can be defined in two ways:\n\n1. **From a Column**: Select a specific column in the overview that contains a file and the image from this column is used as the hero image.\n    \n2. **Default Hero Image**: Set a default hero image to be used.\n    \n\nIf neither a column image nor a default hero image is defined, the hero image section will remain empty.\n\n<img src=\"https://content.pstmn.io/54782ec0-7d59-4f86-8b42-574a37a5bee2/aW1hZ2UwMDkucG5n\">\n\n## Authentication\n\nAuthentication ensures secure access to the data displayed in the embed component. It can be configured to require basic authentication or handle Cross-Origin Resource Sharing (CORS).\n\n### Basic Auth\n\nBasic authentication requires specifying credentials to access the data.\n\n<img src=\"https://content.pstmn.io/e4e8b2f7-8c8c-488d-83dc-1ac10d126ce8/aW1hZ2UwMDcucG5n\">\n\nIf there is a basic configuration set on Mozard Suite Manager you have to configure the embed with the following settings, where the authorization username and password is encoded with base64.\n\n``` javascript\nheaders: () => ({  \n  Authorization: \"Basic XXXXXX\", // \"Basic base64_encode(username:password)\"\n}),\n\n ```\n\n### CORS\n\nConfigure CORS settings to allow access from specific origins. This is essential for enabling secure cross-origin requests.\n\n<img src=\"https://content.pstmn.io/022a5f28-14d5-4491-be93-34058039f3fb/aW1hZ2UwMDgucG5n\">\n\n## Types\n\n### EmbedOptions\n\nThe `EmbedOptions` type defines the configuration options for initialising an embed. These options include settings for themes, layouts, callbacks, and overview configurations.\n\n| Property | Type | Description | Required |\n| --- | --- | --- | --- |\n| `list` | OverviewListItem | OverviewListItem\\[\\] | An `OverviewListItem` or an array of `OverviewListItem`. |\n| `url` | string | (() => string) | URL or a function returning a URL for fetching data. |\n| `theme` | EmbedOptionsTheme | Theme settings. | Yes |\n| `dictionary` | EmbedOptionsDictionary | Dictionary to replace static labels | No |\n| `headers` | () => Record | Optional function returning headers for the request. | No |\n| `queryParam` | string | Optional query parameter for the request. | No |\n| `layout` | LayoutDisplay | LayoutDisplay\\[\\] | Optional layout display option(s). |\n| `onClickItem` | (item: Record) => void | Optional callback for when an item is clicked. | No |\n| `onFilter` | (filters: FilterType\\[\\]) => void | Optional callback for when filters are applied. | No |\n| `onMounted` | () => void | Optional callback for when the embed is mounted. | No |\n| `onAfterInitialize` | () => void | Optional callback for when the embed is initialized. | No |\n| `onChangeOverview` | (overviewId: string) => void | Optional callback for when overview is changed. | No |\n| `onClickSearch` | (searchValue: string) => void | Optional callback for when search is performed. | No |\n| `onChangeLayoutDisplay` | (layoutDisplay: LayoutDisplay) => void | Optional callback for when layout is changed. | No |\n| `onClickHighlight` | (highlight: SuggestionItemClickEventData) => void | Optional callback for when highlight clicked. | No |\n| `onReturnToOverview` | () => void | Optional callback for when return to overview is clicked. | No |\n| `onChangePage` | (pageNumber: number) => void | Optional callback for when page is changed. | No |\n| `onToggleMobileFilters` | (filtersOpen: boolean) => void | Optional callback for when mobile filters are toggled. | No |\n| `hideEmptyValues` | boolean | If set to true, hide empty values instead of showing '-'. | No |\n| `sidebarPosition` | 'left' or 'right' | If set to right the sidebar will move to the right (default is left). | No |\n| `dedicatedSearch` | boolean | If set to false the search bar will move to the sidebar (default is true). | No |\n| `hideTitle` | boolean | If set to true the title of the overview will be hidden. | No |\n| `hideResultsSentence` | boolean | If set to true the search result sentence will be hidden. | No |\n| `enableSelectedFiltersControls` | boolean | If set to true the selected filters card will be hidden. | No |\n| `enableFriendlyUrl` | boolean | If set to true the URL params will become readable for users (requires \"use slugs\" in accounts to be true). | No |\n| `limitToVisibleColumns` | boolean | Default false. Set to true to only return columns visible in the overview. | No |\n| `replaceTileAnchorWithDivision` | boolean | Replace the anchor of a tile with a division (so one cannot right click open in new tab). | No |\n| `isBoundToWrapper` | boolean | If set to true dropdowns will be retained within the bounding box of the embed. | No |\n\n#### OverviewListItem\n\n| Property | Type | Description |\n| --- | --- | --- |\n| `id` | string | Unique identifier for the overview. |\n| `highlight` | OverviewListHighlight | Optional highlight settings. |\n| `layout` | OverviewLayout | Optional change the item layout style. |\n| `attributes` | OverviewAttributes | Optional change for image attributes. |\n| `heroTransformers` | Record | Optional transformers for the title and/or subtitle. |\n| `transformers` | Record | Optional transformers for the item. |\n| `hideOverview` | boolean | Optional hide the item from the type selector. |\n| `hideSearchBar` | boolean | Optional hide the searchbar from overview. |\n\n#### OverviewListHighlight\n\nThe `OverviewListHighlight` object is used to define highlight settings for items in the embed. This allows for linking to other items within the same or different overviews. The highlight is primarily used on the item detail page to display related items.\n\n| Property | Type | Description |\n| --- | --- | --- |\n| `column` | string | Id of the \\[datalist(s)\\] column available on the overview (See images 1,2) |\n| `list` | string | Id of the overview available in the datalist referred by the column |\n| `title` | string | Custom Title label |\n\nThis feature lets you create connections between overviews using columns with the following types:\n\n`Datalijsten (Belongs to Many)`: An item can belong to multiple items from a datalist.\n\n`Datalijsten (Has Many)`: An item has multiple related items from a datalist.\n\n`Datalijst (Belongs to)`: An item can belong to single item from a datalist.\n\n`Datalijst (Has One)`: An item has single related item from a datalist.\n\nThe columns allow you to create bidirectional connections between different overviews by linking items from one datalist to another. This means you can select items from another datalist and establish references in both directions.\n\n##### Example: Configuration in Manager - Datalijst\n\nDatalist 1:\n\n- Column Datalist 1 Naam: Name of the item.\n    \n- Column Datalist 1 Afbeelding: Image File.\n    \n- Column Datalijst 1 Belongs To: Allows selecting items from Datalist 2.\n    \n\n<img src=\"https://content.pstmn.io/1997bb60-a364-4c38-9f76-9b143a9ce831/U2NyZWVuc2hvdCAyMDI0LTA3LTMwIGF0IDEzLjU4LjMwLnBuZw==\">\n\nDatalist 2:\n\n- Column Datalist 2 Naam: Name of the item.\n    \n- Column Datalist 2 Afbeelding: Image File.\n    \n- Column Datalijst 2 Has Many: Indicates items from Datalist 1 that are linked through the Belongs To column.\n    \n\n<img src=\"https://content.pstmn.io/e9152d1a-f8f1-4eb5-9bf7-0556cf1ff131/U2NyZWVuc2hvdCAyMDI0LTA3LTMwIGF0IDEzLjU4LjQxLnBuZw==\">\n\nResult in manager:\n\nDatalist 1 items:\n\nColumn `Datalist 1 belongs to` has been filled with Items from Datalist 2.\n\n<img src=\"https://content.pstmn.io/4e57bdf0-f6f4-489a-91fa-536702f9f0f3/U2NyZWVuc2hvdCAyMDI0LTA3LTMwIGF0IDEzLjU5LjU4LnBuZw==\">\n\nDatalist 2 items:\n\n<img src=\"https://content.pstmn.io/f28d9bb7-d346-4835-a05d-d43013ab626b/U2NyZWVuc2hvdCAyMDI0LTA3LTMwIGF0IDE0LjAxLjA1LnBuZw==\">\n\nColumn `Datalist 2 has many` has been filled automatically by the selection from Datalist 1 in the column `Belongs to`.\n\n##### Configuration on the embed code\n\n``` javascript\n list: [{\n  id: 'overview1',\n  highlight: {\n    column: 'overview2-datalist-2-has-many-column-id',\n    list: 'overview2'\n  }\n }, {\n  id: 'overview2',\n  highlight: {\n    column: 'overview1-datalist-1-belongs-to-column-id',\n    list: 'overview1'\n  }\n }]\n\n ```\n\nWith the following result:\n\nDatalist 1 Item 1 - Detail page:\n\n<img src=\"https://content.pstmn.io/a8245080-9859-4478-9f1c-065e8e1c4eab/U2NyZWVuc2hvdCAyMDI0LTA3LTMwIGF0IDE0LjIwLjI4LnBuZw==\">\n\nDatalist 2 Item 1 - Detail page:\n\n<img src=\"https://content.pstmn.io/fcbd866d-13d0-4a03-a9e6-2b364d44527d/U2NyZWVuc2hvdCAyMDI0LTA3LTMwIGF0IDE0LjIwLjUwLnBuZw==\">\n\n#### OverviewLayout\n\nThe `OverviewLayout` object is used to define the layout for the items in the overview.\n\n| Property | Type | Description |\n| --- | --- | --- |\n| `list` | LayoutListSettings | Settings for the list Layout |\n\n##### LayoutListSettings\n\nThe `LayoutListSettings` object is used to define the layout for the list overview.  \nHere you can change the order and columns used for certain types of the order.\n\n| Property | Type | Description |\n| --- | --- | --- |\n| `order` | LayoutListSettingsOrderType\\[\\] | Can use the types: `description`, `content`, `thumbnail`, `custom` |\n| `columns` | string\\[\\] | Id's for the displayed columns in the `content` |\n| `custom_columns` | string\\[\\] | Id's for the retrieved values in `custom` |\n\nThere are 3 types of options for the order: `description`, `thumbnail` & `content`.\n\n- `description`: Shows the set up description from manager with the title at the very start.\n    \n- `thumbnail`: shows the thumbnail that was setup in manager.\n    \n- `content`: makes use of an extra setting called `columns`. By default the content shows the title at the very start.\n    \n\nFor the `columns` setting there is an example below.\n\n``` javascript\nlayout: {\n  list: {\n    order: ['content', 'thumbnail'],\n    columns: [\n      '9c4eec74-56e6-4864-9ec5-478d12ad2be2',\n      '9c56faae-ca7f-43fe-9634-d4ce17a9ce81',\n    ]\n  }\n}\n\n ```\n\nWhen loading in the `content` from the order it makes use of the `columns`.  \nHere you can configure all the columns that should be shown with an item.  \nIt will show the label and the value for each column that you add.\n\n- `custom`: makes use of an extra setting called `custom_columns`. The data displayed here has very little added styling and can thus be used well in combination with transformers.\n    \n\nFor the `custom_columns` setting there is an example below.\n\n``` javascript\n{ \n  transformers: {\n    'Zeldzaamheid': ({ value, additional_values }) => {\n      return `<img class=&#x27;preserveHtml&#x27; class=&#x27;preserveHtml&#x27; class=&#x27;preserveHtml&#x27; class=&#x27;preserveHtml&#x27; class=&#x27;preserveHtml&#x27; class=&#x27;preserveHtml&#x27; class=&#x27;preserveHtml&#x27; class=&#x27;preserveHtml&#x27; alt=\"${value}\" src=\"${additional_values?.foreign_values?.Image?.thumbnail}\" style=\"width: 144px\" />`\n    }\n  },\n  layout: {\n    list: {\n      order: [\n        'content',\n        'custom'\n      ],\n      columns: [\n        '9c951404-b151-4325-83f8-ba9bec333ae1',\n        '9c9513e2-6e10-4b9f-95d8-ff05c1a22d4b'\n      ],\n      custom_columns: [\n        '9d928a5e-b147-43a9-9c3e-b9bf71b1f59b'\n      ],\n    },\n  }\n}\n\n ```\n\nBelow here you can see where the `layout` can be used within the embed code.\n\n``` javascript\nlist: [\n  {\n    id: '9c370410-d671-4d2f-8410-3161486e8fed',\n    layout: {\n      list: {\n        order: ['content', 'thumbnail'],\n        columns: [\n          '9c32f8c1-720e-4cba-9d50-2eb3f1cb282e',\n          '9c32f8d7-d9d2-4c9e-a233-b67e1f726ebb',\n        ]\n      }\n    }\n  }, \n  {\n    id: '9c4eeccf-b543-4701-b42a-94d35b917126',\n    layout: {\n      list: {\n        order: ['description', 'thumbnail'],\n      }\n    }\n  }, \n  {\n    id: '9c38ab43-0340-4ab0-ac44-68a8442e58f1'\n  }\n],\n\n ```\n\n#### Overview Attributes\n\nThe `OverviewAttributes` object is used to attach customizable attributes to the image HTML elements within the embed. This allows users to attach metadata to image files and bind those values as attributes in the embed column reference.\n\n| Property | Type | Description |\n| --- | --- | --- |\n| `column-id` | `OverviewColumnAttribute` | Attributes that will be bound to all images that belongs to the specified `column-id`. |\n\n| Property | Type | Description |\n| --- | --- | --- |\n| `attribute slug` | `OverviewAttribute` | Content that will be bound to the tag of the attribute slug. |\n\n| Property | Type | Description |\n| --- | --- | --- |\n| `type` | `text` or `dms` | Type of value |\n| `value` | string | Value that will be bound to the HTML element. |\n\nThe structure for the Overview Attributes is as follows:\n\n``` javascript\n{\n  'column-id': {\n    'attribute-slug': {\n      type: 'text',\n      value: 'static content'\n    },\n    'attribute-slug-2': {\n      type: 'dms',\n      value: 'dynamic content'\n    }\n  }\n}\n\n ```\n\nFor the implementation of this feature, it requires specific settings on Manager (Accounts) and the Embed.\n\n##### Example:\n\n##### Configuration in Manager - Datalijst\n\nIn the datalist column settings, for the image, file and files types, there is a select input labeled \"File with metadata template,\" allowing the user to select between different templates for the file metadata. Once one is selected, the options that the template contains will be shown in the table below with information on type and key.\n\n<img src=\"https://content.pstmn.io/0baf62e6-96c3-4816-ab7f-759325fa7892/U2NyZWVuc2hvdCAyMDI0LTA4LTE0IGF0IDExLjI3LjEzLnBuZw==\">\n\nBelow this template configuration, there is another table to set up additional custom file metadata. Items can be added by pressing the plus button and then filling in the values for:\n\n- Types: selection between 3 different types of values (text, number and date)\n    \n- Key\n    \n\n<img src=\"https://content.pstmn.io/fedf02c1-6055-463c-bca2-325239027dfa/U2NyZWVuc2hvdCAyMDI0LTA4LTE0IGF0IDExLjI3LjEzIGNvcHkucG5n\">\n\nOnce the configuration has been implemented in the column settings, when adding or editing an item and then uploading an image to the recently updated column, an expandable section appears containing the file metadata. This way, all the fields can be filled out with the corresponding data. Besides the file metadata from the template and the additional custom file metadata defined in the column settings, it is possible to add additional metadata for one specific file.\n\n<img src=\"https://content.pstmn.io/181fceb5-e49c-42fb-902e-5017995d549d/U2NyZWVuc2hvdCAyMDI0LTA4LTE0IGF0IDExLjMxLjU4LnBuZw==\">\n\n##### Configuration in Manager - Overzichten\n\nIn the overview configuration, there is the possibility to hide the metadata values by column. This way, the keys and values will not be sent along the overview endpoint. The additional metadata for one specific file is always hidden and cannot be shown.\n\n<img src=\"https://content.pstmn.io/8d0a865d-5d33-48db-90ab-1d833096af0f/U2NyZWVuc2hvdCAyMDI0LTA4LTE0IGF0IDExLjM0LjU4LnBuZw==\">\n\n##### Configuration in Embed\n\nOnce the configuration has been set up in the Manager, you can define the attributes for the image elements within the embed. This allows you to attach metadata to image files and bind those values as attributes in the embed column reference.\n\nHere’s an example of how to configure the attributes in the embed:\n\n``` javascript\nattributes: {\n  'datalijst-1-afbeelding-column-id': {\n    'alt': {\n      type: 'dms',\n      value: 'description'\n    },\n    'date': {\n      type: 'dms',\n      value: 'date'\n    },\n    'crossorigin': {\n      type: 'text',\n      value: 'anonymous'\n    },\n  }\n}\n\n ```\n\n##### Result\n\nThis configuration will result in image elements with the new attributes:\n\n<img src=\"https://content.pstmn.io/19895214-7d95-4786-b1c2-42899f593e0a/U2NyZWVuc2hvdCAyMDI0LTA4LTE0IGF0IDExLjQzLjI1LnBuZw==\">\n\n<img src=\"https://content.pstmn.io/8e6fba98-9c72-4579-a85c-bdcf1a3e2823/U2NyZWVuc2hvdCAyMDI0LTA4LTE0IGF0IDExLjQ1LjI1LnBuZw==\">\n\n## Overview Transformers\n\nThe `OverviewTransformers` object is used to modify the displayed value of a column in the overview. This feature is useful for formatting the data in a specific way, such as converting a value to a different unit.\n\n| Property | Description |\n| --- | --- |\n| `event` | EmbedOptionsTransformerEvent |\n\n### EmbedOptionsTransformerEvent\n\n| Property | Description |\n| --- | --- |\n| `value` | The value of the column |\n| `additional_values` | Extra values from the column that can sometimes be passed from backend. (for example extra values from another datalist) |\n| `item` | The item that is being displayed |\n| `group` | The group that the column is in |\n| `groupItem` | The item that is being displayed in the group |\n| `context` | The page context (list, grid, table, detail, suggestion) |\n\nThe structure for the transformer is as follows:\n\n``` javascript\n{\n  transformers: {\n    'Voornaam': ({ value }) => value,\n    'Naam': (arguments) => {\n      console.log('Argumenten', arguments);\n      return arguments.value;\n    },\n    'Title': ({ value, context }) => {\n      switch (context) {\n        case 'list': {\n          const newValue = `This is a tranformed title for list view: ${item['Title']}`\n          return newValue;\n        }\n        case 'grid': {\n          const newValue = `This is a tranformed title for grid: ${item['Title']}`\n          return newValue;\n        }\n        case 'table': {\n          const newValue = `This is a tranformed title for table: ${item['Title']}`\n          return newValue;\n        }\n        case 'detail': {\n          const newValue = `This is a tranformed title for the detail page: ${item['Title']}`\n          return newValue;\n        }\n        case 'suggestion': {\n          const newValue = `This is a tranformed title for the suggestions on a detail page: ${item['Title']}`\n          return newValue;\n        }\n        default: {\n          return value;\n        }\n      }\n    },\n  },\n}\n\n ```\n\n### EmbedOptionsTheme\n\n| Property | Type | Description |\n| --- | --- | --- |\n| `detailHeroImageObjectFit` | EmbedOptionsThemeImageObjectFit | Specifies how the hero image should fit. |\n| `detailTableImageObjectFit` | EmbedOptionsThemeImageObjectFit | Specifies how the table image should fit. |\n| `tableImageObjectFit` | EmbedOptionsThemeImageObjectFit | Specifies how the image in a table should fit. |\n| `listImageObjectFit` | EmbedOptionsThemeImageObjectFit | Specifies how the image in a list should fit. |\n| `listImageHeight` | string | Specifies the height of the image in a list view. |\n| `listImageWidth` | string | Specifies the width of the image in a list view. |\n| `gridImageObjectFit` | EmbedOptionsThemeImageObjectFit | Specifies how the image in a grid should fit. |\n| `background` | string | Background color of the embed. |\n| `foreground` | string | Foreground color (e.g., text color) of the embed. |\n| `tint` | string | Optional tint color. |\n| `muted` | string | Optional muted color. |\n| `mutedForeground` | string | Optional muted foreground color. |\n| `popover` | string | Optional popover color. |\n| `popoverForeground` | string | Optional popover foreground color. |\n| `card` | string | Card background color. |\n| `cardForeground` | string | Card foreground color. |\n| `border` | string | Border color. |\n| `input` | string | Input background color. |\n| `primary` | string | Primary color (e.g., for buttons or highlighted text). |\n| `primaryForeground` | string | Primary foreground color. |\n| `secondary` | string | Secondary color. |\n| `secondaryForeground` | string | Secondary foreground color. |\n| `accent` | string | Accent color. |\n| `accentForeground` | string | Accent foreground color. |\n| `destructive` | string | Destructive color (e.g., for error states). |\n| `destructiveForeground` | string | Destructive foreground color. |\n| `ring` | string | Focus ring color for buttons. |\n| `link` | string | Link color. |\n| `radius` | string | Border radius. |\n| `font` | string | Font family. |\n| `overviewTitleForeground` | string | Title color |\n| `returnButton` | string | Return button color |\n| `returnButtonForeground` | string | Return button text color |\n| `returnButtonHover` | string | Return button hover color |\n| `returnButtonForegroundHover` | string | Return button hover text color |\n| `highlight` | string | Highlight background color |\n| `detailValueExpandableWhenMoreThanPx` | number | Default 200. Set to change the breakpoint when a detail field value should become expandable. |\n| `detailValueHasAndBelongsAsLinks` | boolean | Default false. Set to true to show `Belongs to` and `Has` values in detail pages as links. |\n\n### EmbedOptionsDictionary\n\n| Property | Type | Default |\n| --- | --- | --- |\n| `typesTitle` | string | `Type` |\n| `filterTitle` | string | `Filter` |\n| `closeButton` | string | `Sluiten` |\n| `totalResults` | string | `gevonden` |\n| `totalResultsText` | string | `resultaten` |\n| `totalResultText` | string | `resultaat` |\n| `searchPlaceholder` | string | `Zoeken` |\n| `searchButton` | string | `Zoeken` |\n| `backButton` | string | `Terug` |\n| `filtersButton` | string | `Filters` |\n| `layoutList` | string | `Lijst` |\n| `layoutGrid` | string | `Grid` |\n| `layoutTable` | string | `Tabel` |\n| `filterOperatorsTitle` | string | `Operators` |\n| `filterOperatorLowerThan` | string | `Kleiner dan` |\n| `filterOperatorLowerThanOrEquals` | string | `Kleiner dan of gelijk aan` |\n| `filterOperatorEquals` | string | `Gelijk aan` |\n| `filterOperatorGreaterThanOrEqual` | string | `Groter dan of gelijk aan` |\n| `filterOperatorGreater` | string | `Groter dan` |\n| `filterOperatorBetween` | string | `Tussen` |\n| `filterOperatorStartsWith` | string | `Begint met` |\n| `filterOperatorEndsWith` | string | `Eindigt met` |\n| `filterOperatorContains` | string | `Bevat` |\n| `filterOperatorEmpty` | string | `Leeg` |\n| `filterOperatorContainsAll` | string | `Bevat alle` |\n| `filterOperatorContainsAny` | string | `Bevat één van` |\n| `filterOperatorContainsNon` | string | `Bevat niet` |\n| `filterDateOperatorsTitle` | string | `Perspectief` |\n| `filterDateOperatorAbsolute` | string | `Absoluut` |\n| `filterDateOperatorRelative` | string | `Relatief` |\n| `filterDateValueYesterday` | string | `Gisteren` |\n| `filterDateValueToday` | string | `Vandaag` |\n| `filterDateValueTomorrow` | string | `Morgen` |\n| `cannotReachDataList` | string | `Kan datalijst niet bereiken` |\n| `cannotReachDatalistItem` | string | `Kan datalijst item niet bereiken` |\n| `chooseADate` | string | `Kies een datum` |\n| `chooseARelativeOption` | string | `Kies een relatieve optie` |\n| `clearAllFilters` | string | `Wis alle filters` |\n| `insufficientPermissions` | string | `Onvoldoende rechten` |\n| `more` | string | `Meer` |\n| `noItems` | string | `Geen items` |\n| `untitled` | string | `Naamloos` |\n| `weCouldNotFindTheDataListThatYouAreSearchingFor` | string | `We konden het datalijst waarnaar u op zoek bent niet vinden!` |\n| `weCouldNotFindTheItemWhereYouAreSearchingFor` | string | `We konden het item waarnaar u op zoek bent niet vinden!` |\n| `youAreNotAuthorizedToShowThisDataList` | string | `U bent niet bevoegd om de datalijst te zien` |\n\n### EmbedOptionsThemeImageObjectFit\n\nValues according to tailwindcss class naming.\n\n| Value | Description |\n| --- | --- |\n| `object-contain` | The image is scaled to maintain its aspect ratio while fitting within the element’s content box. |\n| `object-cover` | The image is sized to maintain its aspect ratio while filling the element’s content box. |\n| `object-fill` | The image is sized to fill the element’s content box. |\n| `object-none` | The image is not resized. |\n| `object-scale-down` | The image is scaled down to the smallest possible size while preserving its aspect ratio. |\n\n### LayoutDisplay\n\n| Value | Description |\n| --- | --- |\n| `table` | Display items in a table format. |\n| `grid` | Display items in a grid format. |\n| `list` | Display items in a list format. |\n\n### FilterType\n\n| Value | Type |\n| --- | --- |\n| `id` | string |\n| `label` | string |\n| `original` | string |\n| `group` | string |\n| `placeholder` | string |\n| `operators` | string\\[\\] |\n| `operator` | string |\n| `multiple` | boolean |\n| `options` | Record |\n| `visible` | boolean |\n| `data` | { `label`: string, `value`: string } |\n| `type` | 'select' |\n\n## Detailed Explanations and Examples\n\n1. **Initialization:**\n    \n    1. **Example:**\n        \n        ``` javascript\n                                                  window.Atabase.datalist('#embed', { ... })\n        \n         ```\n        \n    2. **Description:** Initialises the embed within the HTML element identified by `#embed` using the provided options.\n        \n2. **Data and Layout:**\n    \n    1. **list:**\n        \n        1. Can accept both a single `OverviewListItem` and an array of `OverviewListItem`.\n            \n        2. Example:\n            \n            ``` javascript\n                                                      list: [\n                                                          { id: 'overview1', highlight: { column: 'column-from-overview1-with-values-from-overview2', list: 'overview2' } },\n                                                          { id: 'overview2' }\n                                                      ]\n            \n             ```\n            \n    2. **layout:**\n        \n        1. Supports 'table', 'grid', and 'list'.\n            \n        2. Can combine multiple layouts.\n            \n        3. Example:\n            \n            ``` javascript\n                                                      layout: ['list', 'grid']`\n            \n             ```\n            \n3. **URLs and Requests:**\n    \n    1. **url:**\n        \n        1. Can be a string or a function returning a string.\n            \n        2. Example:\n            \n            ``` javascript\n                                                      url: 'https://example.com/api'\n                                                      // or\n                                                      url: () => 'https://example.com/api'\n            \n             ```\n            \n    2. **headers:**\n        \n        1. Function returning request headers.\n            \n        2. Example:\n            \n            ``` javascript\n                                                      headers: () => ({ 'Authorization': 'Bearer token' })\n            \n             ```\n            \n4. **Interactivity:**\n    \n    1. **onClickItem:**\n        \n        1. Triggered when an item is clicked.\n            \n        2. Example:\n            \n            ``` javascript\n                                                      onClickItem: (item) => { console.log('clicked on item', item) }\n            \n             ```\n            \n    2. **onMounted:**\n        \n        1. Triggered when the component is mounted.\n            \n        2. Example:\n            \n            ``` javascript\n                                                      onMounted: () => { console.log('component mounted') }\n            \n             ```\n            \n    3. **onAfterInitialize:**\n        \n        1. Triggered when the component is done initializing and loading the data.\n            \n        2. Example:\n            \n            ``` javascript\n                                           onAfterInitialize: () => { console.log('component initialized') }\n            \n             ```\n            \n    4. **onFilter:**\n        \n        1. Triggered when filters are applied.\n            \n        2. Example:\n            \n            ``` javascript\n                                                        onFilter: (filters) => { console.log('clicked on filters:', filters) }\n            \n             ```\n            \n    5. **onChangeOverview:**\n        \n        1. Triggered when the overview is changed.\n            \n        2. Example:\n            \n            ``` javascript\n                                                      onChangeOverview: (overviewId) => { console.log('changed overview:', overviewId) }\n            \n             ```\n            \n    6. **onClickSearch:**\n        \n        1. Triggered when a search is performed.\n            \n        2. Example:\n            \n            ``` javascript\n                                                      onClickSearch: (searchValue) => { console.log('searching for:', searchValue) }\n            \n             ```\n            \n    7. **onChangeLayoutDisplay:**\n        \n        1. Triggered when the layout display is changed.\n            \n        2. Example:\n            \n            ``` javascript\n                                                      onChangeLayoutDisplay: (layoutDisplay) => { console.log('changed layout to:', layoutDisplay) }\n            \n             ```\n            \n    8. **onClickHighlight:**\n        \n        1. Triggered when a highlight is clicked.\n            \n        2. Example:\n            \n            ``` javascript\n                                                      onClickHighlight: (highlight) => { console.log('clicked on highlight:', highlight) }\n            \n             ```\n            \n    9. **onReturnToOverview:**\n        \n        1. Triggered when returning to the overview.\n            \n        2. Example:\n            \n            ``` javascript\n                                                      onReturnToOverview: () => { console.log('clicked on return to overview') }\n            \n             ```\n            \n    10. **onChangePage:**\n        \n        1. Triggered when the page number is changed.\n            \n        2. Example:\n            \n            ``` javascript\n                                                      onChangePage: (pageNumber) => { console.log('changed page to:', pageNumber) }\n            \n             ```\n            \n    11. **onToggleMobileFilters:**\n        \n        1. Triggered when mobile filters are toggled.\n            \n        2. Example:\n            \n            ``` javascript\n                                                     onToggleMobileFilters: (filtersOpen) => { console.log('mobile filters open:', filtersOpen) }\n            \n             ```\n            \n5. **Customization:**\n    \n    1. **theme:**\n        \n        1. Customize the appearance using various properties\n            \n        2. Example:\n            \n            ``` javascript\n                                                      theme: {\n                                                         background: '#ffffff',\n                                                         foreground: '#000000',\n                                                         detailHeroImageObjectFit: 'object-cover'\n                                                      }\n            \n             ```\n            \n6. **Lifecycle Events:**\n    \n    1. **onMounted:**\n        \n        1. Called when the embed is mounted.\n            \n        2. Example:\n            \n            ``` javascript\n                                                      onMounted: () => { console.log('mounted') }\n            \n             ```\n            \n    2. **onAfterInitialize:**\n        \n        1. Triggered when the component is done initializing and loading the data.\n            \n        2. Example:\n            \n            ``` javascript\n                                           onAfterInitialize: () => { console.log('initialized') }\n            \n             ```\n            \n\n## Frequently Used Transformers\n\n### Customising the name of a file\n\n1. Configuration in Manager:\n    \n\n- A. Open the datalist. Go to `Manage columns`. Activate the file column. In the section for file metadata click on the add icon. Choose for the type `Text`. Name it eg. `Title`.\n    \n\n<img src=\"https://content.pstmn.io/a3b64299-3f80-4cd6-b0a8-1f2587bbf597/aW1hZ2UtMjAyNTEyMDMtMTI1MzQ3LnBuZw==\" width=\"556\" height=\"452\">\n\n- B. Open the edit item dialog in the datalist (by clicking on the pencil icon on the end of a row). Open the meta data for the file (by clicking on the arrow next to the uploaded file). Next to the key eg. `Title` you can now add a title eg. `My file`.\n    \n\n<img src=\"https://content.pstmn.io/4f872477-541a-4ead-85be-dc4014f28309/aW1hZ2UtMjAyNTEyMDMtMTI1MjE0LnBuZw==\" width=\"552\" height=\"406\">\n\n1. Configuration in Embed:\n    \n    - Transformer:\n        \n        ``` javascript\n            {\n              transformers: {\n                Bestand: ({ value }) => {\n                  return formatNewFileUrl(value, value?.custom_properties?['Title'])\n                }\n              }\n            }\n        \n         ```\n        \n    - Javascript function:\n        \n        ``` javascript\n            function formatNewFileUrl(field, titleField) {\n              return field && titleField\n                ? {\n                    ...field,\n                    name: titleField\n                  }\n                : field\n            }\n        \n         ```\n        \n\nThis documentation provides a comprehensive guide to understanding and utilizing the `EmbedOptions` for initializing and customizing your embed effectively.\n\n---\n\n# 3\\. Webhooks\n\nUsers can create outgoing webhooks in automations as an action. The goal of this is to notify another party that a specific trigger has happened for a specific matter. We will only send enough data so that they know where what happened. The other party is responsible for then using the Mozard Suite (v1) API to fetch any additional information they may need.\n\n## Automation action\n\nTo create such an outgoing webshook, simply add a new action of the type \"Uitgaande webhook versturen\" to an existing or new automation. For this action to work properly, an url is required. Optionally, up to five headers and up to five parameters can be added to the outgoing webhook request.\n\n<img src=\"https://content.pstmn.io/99477584-f549-4d68-9c54-3e1d5c339528/aW1hZ2UucG5n\" alt=\"Outgoing%20webhook%20action%20dialog\" width=\"604\" height=\"308\">\n\n## Technical details\n\nWhenever an automation is triggered, if the logic conditions are valid, it will execute all listed actions. For the outgoing webhook, what happens is that a POST request is done to the listed URL in combination with the parameters. The request also contains the listed headers. The request body is a json body containing some general information about the automation and the matter for which it triggered. The request has a timeout time of 10 seconds.\n\n``` json\n{\n    \"trigger\": \"matter_created\",\n    \"meta\": {\n        \"attempt\": 1,\n        \"automation\": \"91b5e4ff-04cd-4981-a02b-096dc251028a\",\n        \"datetime\": \"2025-02-04T11:57:53.499314Z\"\n    },\n    \"matter\": {\n        \"id\": \"f23d6251-44e6-4f9c-9a13-f0252e2716dc\",\n        \"name\": \"2025000001\"\n    }\n}\n\n ```\n\n| **Value** | **Type** | **Description** |\n| --- | --- | --- |\n| trigger | string | Automation trigger type, see table below. |\n| meta.attempt | int | Attempt number, from 1 to 6. |\n| meta.automation | string | Id of automation that was triggered. |\n| meta.datetime | string | When the automation was originally triggered. |\n| matter.id | string | Id of matter that automation was triggered for. |\n| matter.name | string | Name of matter that automation was triggered for. |\n\n### Automation triggers\n\n| **Trigger** | **Description** |\n| --- | --- |\n| message | Bericht geplaatst |\n| party_added | Betrokkene toegevoegd |\n| party_removed | Betrokkene verwijderd |\n| media | Document toegevoegd |\n| media_deleted | Document verwijderd |\n| time_offset | Moment |\n| matter_created | Nieuwe zaak |\n| status | Status wijzigt |\n| task_completed | Taak afgerond |\n| task_uncompleted | Taak onafgerond |\n| task_added | Taak toegevoegd |\n| task_removed | Taak verwijderd |\n| transaction | Transactie wijzigt |\n| field | Veld wijzigt |\n| matter_status_deadline | Volgende mijlpaal wijzigt |\n\nAfter outgoing webhook is sent, and receives a response, it will add a record of this in the new webhooks page (section 9.1.3.). If the response was not successful, with a status code not in within 2XX, it will schedule a retry attempt. It will retry up to 5 additional times, waiting exponentially longer before trying again.\n\n| **Attempt** | **Next Resend Interval (seconds)** |\n| --- | --- |\n| 1 | 5 |\n| 2 | 60 |\n| 3 | 300 |\n| 4 | 900 |\n| 5 | 3600 |\n\n## Webhooks page\n\nAfter an outgoing webhook has been triggered and sent, the results are visible on a new page in beheer. The \"Webhooks\" page is listed in the \"Algemeen\" section. On this page, an overview is given for all sent webhooks for all matters of all process types. By default the latest sent webhook is listed first.\n\n---\n\n# 4\\. API usage\n\nWe offer an JSON restful API for integrations and automations.\n\n## Authentication\n\nThere are two ways to authenticate to the API. In _Beheer_ you create an application user and assign roles to it. In the _Authentication_ screen you can create tokens to authenticate.\n\n### oAuth2\n\nThe advised way of authentication is using oAuth2. You create a _secret_ for the application user with a specific date range it is valid.\n\nOn all API requests you need to add the following header:\n\n```\n   Authorization: Bearer <secret>\n\n ```\n\n### API key\n\nYou create an _API-key_ for the application user.\n\nOn all API requests you need to add the following header:\n\n```\n   x-api-key: <API-key>\n\n ```\n\n## Rate Limits\n\nAPI access rate limits are applied at a per-user basis in unit time. Access to the API using a key is limited to **500 requests per minute**.\n\nIn addition, every API response is accompanied by the following set of headers to identify the status of your consumption.\n\n| Header | Description |\n| --- | --- |\n| X-RateLimit-Limit | The maximum number of requests that the consumer is permitted to make per minute. |\n| X-RateLimit-Remaining | The number of requests remaining in the current rate limit window. |\n\nOnce you hit the rate limit, you will receive a response similar to the following JSON, with a status code of `429 Too Many Requests`.\n\n``` json\n{\n    \"message\": \"Too Many Attempts.\"\n}\n\n ```\n\n## HTTP Status Codes\n\nThe REST API returns an HTTP status and code each time a request is made. The following HTTP status codes are used by our API. Additional codes might be added in the future and if you encounter a code not in this list please consult the HTTP specification for a definition.\n\n| Status | Description |\n| --- | --- |\n| 200 OK | The request was successful. |\n| 201 Created | The resource was created successfully. |\n| 401 Unauthorized | API Key is invalid. |\n| 403 Forbidden | Insufficient permissions for the resource. |\n| 404 Not Found | The path is invalid or no resource exists with the given ID. |\n| 405 Method Not Allowed | The path is valid but not for this method. |\n| 422 Unprocessable Entity | The request has missing or invalid parameters. |\n| 429 Too Many Requests | The user or path has too many outstanding requests. |\n| 500 Internal Server Error | An unexpected internal error occurred and the request was not processed. |\n| 503 Service Unavailable | The service is down for maintenance. It will be up again soon. |\n\n## Filters\n\nFilters provide the ability to query, sort and paginate an endpoint for its information. Let's take a look at the query string that would be required to filter for the criteria in the previous sentence:\n\n`/v1/messages?filters[from]=2017-05-01&filters[status]=send&limit=10&sort=!created_at`.\n\nNotice how `limit` and `sort` do not belong to `filters[]`. Parameters passed to `filters[]` are unique to that endpoint. The available filters will be listed per endpoint. We also have a few generic filters that are available all the time. These include: `limit`, `page` & `sort`.\n\n### Generic Filters\n\nGeneric filters are applicable to all filterable endpoints. They provide standard functionality such as sorting the result data set and paginating through it.\n\n| Filter | Example Usage | Description |\n| --- | --- | --- |\n| limit | ?limit=10 | Defines the amount of records you want to return. There is a hard limit of 100. |\n| page | ?page=1 | Skips the amount of records defined in limit multiplied by the page number. This is used for paginating through the results. |\n| sort | ?sort=!created_at | The sortable value is dependent on what is available per endpoint. Use _!_ before the value to reverse the order. Consult the endpoint for which values can be sorted. |\n\n### Unique Filters\n\nUnique filters are only applicable to a specific endpoint. They are documented under each endpoint.\n\n### Chaining Filters\n\nFilters can be chained by attaching as many as you want (e.g. `?filters[status]=active&filters[age]=25`). Parameters will be automatically casted.\n\n## Includes\n\nSome endpoints have includeables. Includeables are defined by passing the query parameter with (e.g. `?with[]=recipients`). The include will return an extra data that is not normally returned. Only add includes when the data is needed. Including any unnecessary date will only slow down the response, creating worse perceived performance for the end user. Available includes will be listed per endpoint.\n\n## IPv4 allowlist\n\nIn case you need to allowlist our IPs on your system, we use the following IP addresses:\n\n- 52.58.11.58\n    \n- 18.193.162.153\n    \n- 52.223.59.226\n    \n- 3.33.150.104\n    \n\n# 5\\. Formula functions\n\nAll available formula functions can be found here. The formula field is available in Cases and Forms.\n\n### Logical Functions\n\n- **IF(condition, valueIfTrue, valueIfFalse)** - Conditional logic\n    \n- **AND(...)** - Returns true if all conditions are true\n    \n- **OR(...)** - Returns true if any condition is true\n    \n- **NOT(condition)** - Inverts a boolean value\n    \n\n### Comparison Functions\n\n- **EQ(a, b)** - Equal to (a = b)\n    \n- **NE(a, b)** - Not equal to (a ≠ b)\n    \n- **GT(a, b)** - Greater than (a > b)\n    \n- **LT(a, b)** - Less than (a < b)\n    \n- **GTE(a, b)** - Greater than or equal (a ≥ b)\n    \n- **LTE(a, b)** - Less than or equal (a ≤ b)\n    \n\n### Numeric Functions\n\n- **SUM(...)** - Sum of all arguments\n    \n- **AVG(...)** - Average of all arguments\n    \n- **MIN(...)** - Minimum value\n    \n- **MAX(...)** - Maximum value\n    \n- **ROUND(num, digits)** - Round to specified decimals\n    \n- **ROUNDUP(num, digits)** - Round up\n    \n- **ROUNDDOWN(num, digits)** - Round down\n    \n- **SQRT(num)** - Square root\n    \n- **POWER(base, exp)** - Exponentiation\n    \n- **ABS(num)** - Absolute value\n    \n- **MOD(num, divisor)** - Modulo operation\n    \n- **MULTIPLY(a, b)** - Multiplication\n    \n- **DIVIDE(a, b)** - Division\n    \n- **MINUS(a, b)** - Subtraction\n    \n- **CEILING(num)** - Round up to nearest integer\n    \n- **FLOOR(num)** - Round down to nearest integer\n    \n- **TRUNC(num)** - Remove decimal part\n    \n- **SIGN(num)** - Returns -1, 0, or 1\n    \n- **LOG(num, \\[base\\])** - Logarithm (default base 10)\n    \n- **LN(num)** - Natural logarithm\n    \n- **EXP(num)** - e raised to power\n    \n- **PI()** - Value of π (3.14159...)\n    \n- **E()** - Value of e (2.71828...)\n    \n- **FACTORIAL(n)** - n! (factorial)\n    \n- **GCD(a, b)** - Greatest common divisor\n    \n- **LCM(a, b)** - Least common multiple\n    \n- **RAND()** - Random number 0-1\n    \n- **RANDBETWEEN(min, max)** - Random integer in range\n    \n\n### Text Functions\n\n- **CONCATENATE(...)** - Join strings\n    \n- **UPPER(text)** - Convert to uppercase\n    \n- **LOWER(text)** - Convert to lowercase\n    \n- **TRIM(text)** - Remove extra whitespace\n    \n- **REPLACE(text, old, new)** - Replace text\n    \n- **DATEFORMAT(date, format)** - Format date with PHP-style format codes (locale-aware)\n    \n- **LEN(text)** - String length\n    \n- **LEFT(text, n)** - First n characters\n    \n- **RIGHT(text, n)** - Last n characters\n    \n- **MID(text, start, length)** - Extract substring\n    \n- **FIND(search, text)** - Position of substring (1-indexed)\n    \n- **CONTAINS(text, search)** - Check if text contains substring\n    \n- **STARTSWITH(text, prefix)** - Check if text starts with prefix\n    \n- **ENDSWITH(text, suffix)** - Check if text ends with suffix\n    \n- **REVERSE(text)** - Reverse string\n    \n- **REPEAT(text, n)** - Repeat text n times\n    \n- **SPLIT(text, delimiter)** - Split text by delimiter\n    \n\n### Date Functions\n\n- **DATE(year, month, day)** - Create date\n    \n- **TODAY()** - Current date\n    \n- **WORKDAY(start, days)** - Calculate workday\n    \n- **DATEVALUE(dateStr)** - Parse date\n    \n- **EARLIEST(...)** - Minimum date\n    \n- **LATEST(...)** - Maximum date\n    \n- **DAY(date)** - Extract day\n    \n- **MONTH(date)** - Extract month\n    \n- **YEAR(date)** - Extract year\n    \n- **WEEKDAY(date)** - Day of week (1-7)\n    \n- **WEEKNUM(date)** - Week number\n    \n- **DATEDIF(date1, date2, unit)** - Date difference (\"D\", \"M\", \"Y\")\n    \n\n### Type Checking Functions\n\n- **ISNUMBER(value)** - Check if value is a number\n    \n- **ISTEXT(value)** - Check if value is text\n    \n- **ISBLANK(value)** - Check if value is empty\n    \n- **ISBOOL(value)** - Check if value is boolean\n    \n- **ISDATE(value)** - Check if value is valid date\n    \n\n### Conversion Functions\n\n- **TEXT(value, \\[format\\])** - Convert to formatted string\n    \n- **VALUE(text)** - Convert string to number\n    \n- **INT(number)** - Convert to integer\n    \n- **FLOAT(text)** - Convert to float\n    \n- **BOOL(value)** - Convert to boolean\n    \n\n# 6\\. API documentation","schema":"https://schema.getpostman.com/json/collection/v2.0.0/collection.json","isPublicCollection":false,"owner":"1182324","team":56037,"collectionId":"486c91dd-18ac-4590-881f-2a4b8679ff0c","publishedId":"2sBXc8pjEu","public":true,"publicUrl":"https://docs.mozardsuite.nl","privateUrl":"https://go.postman.co/documentation/1182324-486c91dd-18ac-4590-881f-2a4b8679ff0c","customColor":{"top-bar":"FFFFFF","right-sidebar":"303030","highlight":"965110"},"documentationLayout":"classic-double-column","customisation":{"metaTags":[{"name":"description","value":""},{"name":"title","value":"Mozard Harmonie"}],"appearance":{"default":"light","themes":[{"name":"dark","logo":"https://content.pstmn.io/eda9034a-4644-4bcc-87cf-4ee1b08db994/bG9nby1tb3phcmQtd2hpdGVAMngucG5n","colors":{"top-bar":"212121","right-sidebar":"303030","highlight":"FED401"}},{"name":"light","logo":"https://content.pstmn.io/3b84ede3-c590-4f0c-8a5b-5f628a63041e/bG9nby1tb3phcmQtZGFyay1icm93bkAyeC5wbmc=","colors":{"top-bar":"FFFFFF","right-sidebar":"303030","highlight":"965110"}}]}},"version":"8.10.0","publishDate":"2026-02-07T09:46:01.000Z","activeVersionTag":"latest","documentationTheme":"light","metaTags":{"title":"Mozard Harmonie","description":""},"logos":{"logoLight":"https://content.pstmn.io/3b84ede3-c590-4f0c-8a5b-5f628a63041e/bG9nby1tb3phcmQtZGFyay1icm93bkAyeC5wbmc=","logoDark":"https://content.pstmn.io/eda9034a-4644-4bcc-87cf-4ee1b08db994/bG9nby1tb3phcmQtd2hpdGVAMngucG5n"}},"statusCode":200},"environments":[],"user":{"authenticated":false,"permissions":{"publish":false}},"run":{"button":{"js":"https://run.pstmn.io/button.js","css":"https://run.pstmn.io/button.css"}},"web":"https://www.getpostman.com/","team":{"logo":"https://res.cloudinary.com/postman/image/upload/t_team_logo_pubdoc/v1/team/73b02be17b97eb20a3371809af09445ab192b77523afcaff7548ea960a187758","favicon":"https://res.cloudinary.com/postman/image/upload/v1709107261/team/olcnmuzimc8ndgsrim3s.ico"},"isEnvFetchError":false,"languages":"[{\"key\":\"csharp\",\"label\":\"C#\",\"variant\":\"HttpClient\"},{\"key\":\"csharp\",\"label\":\"C#\",\"variant\":\"RestSharp\"},{\"key\":\"curl\",\"label\":\"cURL\",\"variant\":\"cURL\"},{\"key\":\"dart\",\"label\":\"Dart\",\"variant\":\"http\"},{\"key\":\"go\",\"label\":\"Go\",\"variant\":\"Native\"},{\"key\":\"http\",\"label\":\"HTTP\",\"variant\":\"HTTP\"},{\"key\":\"java\",\"label\":\"Java\",\"variant\":\"OkHttp\"},{\"key\":\"java\",\"label\":\"Java\",\"variant\":\"Unirest\"},{\"key\":\"javascript\",\"label\":\"JavaScript\",\"variant\":\"Fetch\"},{\"key\":\"javascript\",\"label\":\"JavaScript\",\"variant\":\"jQuery\"},{\"key\":\"javascript\",\"label\":\"JavaScript\",\"variant\":\"XHR\"},{\"key\":\"c\",\"label\":\"C\",\"variant\":\"libcurl\"},{\"key\":\"nodejs\",\"label\":\"NodeJs\",\"variant\":\"Axios\"},{\"key\":\"nodejs\",\"label\":\"NodeJs\",\"variant\":\"Native\"},{\"key\":\"nodejs\",\"label\":\"NodeJs\",\"variant\":\"Request\"},{\"key\":\"nodejs\",\"label\":\"NodeJs\",\"variant\":\"Unirest\"},{\"key\":\"objective-c\",\"label\":\"Objective-C\",\"variant\":\"NSURLSession\"},{\"key\":\"ocaml\",\"label\":\"OCaml\",\"variant\":\"Cohttp\"},{\"key\":\"php\",\"label\":\"PHP\",\"variant\":\"cURL\"},{\"key\":\"php\",\"label\":\"PHP\",\"variant\":\"Guzzle\"},{\"key\":\"php\",\"label\":\"PHP\",\"variant\":\"HTTP_Request2\"},{\"key\":\"php\",\"label\":\"PHP\",\"variant\":\"pecl_http\"},{\"key\":\"powershell\",\"label\":\"PowerShell\",\"variant\":\"RestMethod\"},{\"key\":\"python\",\"label\":\"Python\",\"variant\":\"http.client\"},{\"key\":\"python\",\"label\":\"Python\",\"variant\":\"Requests\"},{\"key\":\"r\",\"label\":\"R\",\"variant\":\"httr\"},{\"key\":\"r\",\"label\":\"R\",\"variant\":\"RCurl\"},{\"key\":\"ruby\",\"label\":\"Ruby\",\"variant\":\"Net::HTTP\"},{\"key\":\"shell\",\"label\":\"Shell\",\"variant\":\"Httpie\"},{\"key\":\"shell\",\"label\":\"Shell\",\"variant\":\"wget\"},{\"key\":\"swift\",\"label\":\"Swift\",\"variant\":\"URLSession\"}]","languageSettings":[{"key":"csharp","label":"C#","variant":"HttpClient"},{"key":"csharp","label":"C#","variant":"RestSharp"},{"key":"curl","label":"cURL","variant":"cURL"},{"key":"dart","label":"Dart","variant":"http"},{"key":"go","label":"Go","variant":"Native"},{"key":"http","label":"HTTP","variant":"HTTP"},{"key":"java","label":"Java","variant":"OkHttp"},{"key":"java","label":"Java","variant":"Unirest"},{"key":"javascript","label":"JavaScript","variant":"Fetch"},{"key":"javascript","label":"JavaScript","variant":"jQuery"},{"key":"javascript","label":"JavaScript","variant":"XHR"},{"key":"c","label":"C","variant":"libcurl"},{"key":"nodejs","label":"NodeJs","variant":"Axios"},{"key":"nodejs","label":"NodeJs","variant":"Native"},{"key":"nodejs","label":"NodeJs","variant":"Request"},{"key":"nodejs","label":"NodeJs","variant":"Unirest"},{"key":"objective-c","label":"Objective-C","variant":"NSURLSession"},{"key":"ocaml","label":"OCaml","variant":"Cohttp"},{"key":"php","label":"PHP","variant":"cURL"},{"key":"php","label":"PHP","variant":"Guzzle"},{"key":"php","label":"PHP","variant":"HTTP_Request2"},{"key":"php","label":"PHP","variant":"pecl_http"},{"key":"powershell","label":"PowerShell","variant":"RestMethod"},{"key":"python","label":"Python","variant":"http.client"},{"key":"python","label":"Python","variant":"Requests"},{"key":"r","label":"R","variant":"httr"},{"key":"r","label":"R","variant":"RCurl"},{"key":"ruby","label":"Ruby","variant":"Net::HTTP"},{"key":"shell","label":"Shell","variant":"Httpie"},{"key":"shell","label":"Shell","variant":"wget"},{"key":"swift","label":"Swift","variant":"URLSession"}],"languageOptions":[{"label":"C# - HttpClient","value":"csharp - HttpClient - C#"},{"label":"C# - RestSharp","value":"csharp - RestSharp - C#"},{"label":"cURL - cURL","value":"curl - cURL - cURL"},{"label":"Dart - http","value":"dart - http - Dart"},{"label":"Go - Native","value":"go - Native - Go"},{"label":"HTTP - HTTP","value":"http - HTTP - HTTP"},{"label":"Java - OkHttp","value":"java - OkHttp - Java"},{"label":"Java - Unirest","value":"java - Unirest - Java"},{"label":"JavaScript - Fetch","value":"javascript - Fetch - JavaScript"},{"label":"JavaScript - jQuery","value":"javascript - jQuery - JavaScript"},{"label":"JavaScript - XHR","value":"javascript - XHR - JavaScript"},{"label":"C - libcurl","value":"c - libcurl - C"},{"label":"NodeJs - Axios","value":"nodejs - Axios - NodeJs"},{"label":"NodeJs - Native","value":"nodejs - Native - NodeJs"},{"label":"NodeJs - Request","value":"nodejs - Request - NodeJs"},{"label":"NodeJs - Unirest","value":"nodejs - Unirest - NodeJs"},{"label":"Objective-C - NSURLSession","value":"objective-c - NSURLSession - Objective-C"},{"label":"OCaml - Cohttp","value":"ocaml - Cohttp - OCaml"},{"label":"PHP - cURL","value":"php - cURL - PHP"},{"label":"PHP - Guzzle","value":"php - Guzzle - PHP"},{"label":"PHP - HTTP_Request2","value":"php - HTTP_Request2 - PHP"},{"label":"PHP - pecl_http","value":"php - pecl_http - PHP"},{"label":"PowerShell - RestMethod","value":"powershell - RestMethod - PowerShell"},{"label":"Python - http.client","value":"python - http.client - Python"},{"label":"Python - Requests","value":"python - Requests - Python"},{"label":"R - httr","value":"r - httr - R"},{"label":"R - RCurl","value":"r - RCurl - R"},{"label":"Ruby - Net::HTTP","value":"ruby - Net::HTTP - Ruby"},{"label":"Shell - Httpie","value":"shell - Httpie - Shell"},{"label":"Shell - wget","value":"shell - wget - Shell"},{"label":"Swift - URLSession","value":"swift - URLSession - Swift"}],"layoutOptions":[{"value":"classic-single-column","label":"Single Column"},{"value":"classic-double-column","label":"Double Column"}],"versionOptions":[],"environmentOptions":[{"value":"0","label":"No Environment"}],"canonicalUrl":"https://docs.mozardsuite.nl/view/metadata/2sBXc8pjEu"}