CustomList

A sortable list component for adding multiple grouped configuration components in modals.

Props

export let label;
export let required = false;
export let name = undefined;
export let disabled = false;
export let show = true;
export let icon;
export let value = [];

Name

The displayed name in the listing and modal heading is taken from the first input field value.
It’s recommended to use InputField or NodeSelector as first component in the main slot.

Example

Standard

The slot prop id is used to identify and group the components.
This id needs to be prefixed to the name attribute.

<script>
  import { Panel, CustomList, InputField, NodeSelector } from '@soleil-se/config-svelte';
</script>

<Panel>
  <CustomList name="customList" label="Custom list" let:id>
    <InputField name="{id}_name" label="Name" />
    <NodeSelector name="{id}_page" label="Page" />
  </CustomList>
</Panel>

Advanced

This component is currently not supported in advanced configs out of the box.
If you need to use it in an advanced config you can manually handle the state to normalize and flatten it for saving to the server.

AppData

The ids are saved as an array on the key supplied on the name attribute of the list.
Traverse the array and get appData prefixed with this id.

import appData from '@sitevision/api/appData';

function getCustomList() {
  return appData.getArray('customList')?.map((id) => ({
    name: appData.get(`${id}_name`),
    pageUri: appData.get(`${id}_page`, 'URI'),
  })) || [];
}

Icons

Pass an icon class to the list item, this can be an already existing icon from sitevision-icon or glyphicons that are available in edit mode or a custom class.
No list of icons is available, but you can inspect an icon in the edit interface and copy the class name.

<script>
  import { Panel, CustomList, InputField, NodeSelector } from '@soleil-se/config-svelte';
</script>

<Panel>
  <CustomList name="customList" label="Custom list" icon="sitevision-icons file" let:id>
    <InputField name="{id}_name" label="Name" />
    <NodeSelector name="{id}_page" label="Page" />
  </CustomList>
</Panel>

List item template

Sometimes you want full control over the list items, if some other value than the first input field wants to be displayed or a completely custom template.
For this to work it’s easiest to handle the modal content in a separate component.

App.svelte

<script>
  import { Panel, CustomList } from '@soleil-se/config-svelte';
  import Settings from './Settings.svelte';
</script>

<Panel>
  <CustomList name="customList" label="Custom list" let:id>
    <Settings {id} />
  </CustomList>
</Panel>

Settings.svelte

<script>
  import { InputField, NodeSelector, CustomListItemTemplate } from '@soleil-se/config-svelte';

  export let id;
  let name;
</script>

<CustomListItemTemplate>
  Page: {name}
</CustomListItemTemplate>
<InputField name="{id}_name" label="Name" bind:value={name} />
<NodeSelector name="{id}_page" label="Page" type="page-selector" />

Dynamic content

A more advanced example with dynamically fetched content, a manual update of the list item is needed on mount since the list doesn’t know when all data is available.

App.svelte

<script>
  import { Panel, CustomList } from '@soleil-se/config-svelte';
  import Settings from './Settings.svelte';
</script>

<Panel>
  <CustomList name="customList" label="Custom list" let:id let:triggerUpdate>
    <Settings {id} {triggerUpdate} />
  </CustomList>
</Panel>

Settings.svelte

<script>
  import { NodeSelector, CustomListItemTemplate } from '@soleil-se/config-svelte';
  import { onMount } from 'svelte';

  export let id;
  export let triggerUpdate;

  let pageId;
  let name;
  let url;

  async function fetchPageDetails() {
    if (!pageId) return;
    const res = await fetch(`/rest-api/1/0/${pageId}/properties`)
      .then((res) => res.json());

    name = res.displayName;
    url = res.URL;
  }

  onMount(() => {
    await fetchPageDetails();
    triggerUpdate();
  });

</script>

<CustomListItemTemplate>
  {name} ({url})
</CustomListItemTemplate>
<NodeSelector name="{id}_page" label="Page" on:change={fetchPageDetails} bind:value={pageId} />

Slots

Default

Default slot inside modal.

<CustomList name="customList" label="Custom list" let:id>
  <InputField name="{id}_name" label="Name" />
  <NodeSelector name="{id}_page" label="Page" />
</CustomList>

Label

Slot for content in the label element.

<CustomList name="customList" let:id>
  <svelte:fragment slot="label">
    Custom <strong>label</strong>
  </svelte:fragment>
  <InputField name="{id}_name" label="Name" />
  <NodeSelector name="{id}_page" label="Page" />
</CustomList>