RepositoryNodeSelector

Select one or more nodes from a Sitevision repository.
The component gets its options from the Sitevision REST API and wraps CustomSelector.

Role

This is a field description.

Cookies

Cookie 1Cookie 2

This is a field description.

Intitialize context

Remember to initialize the app context for the necessary context needed by the component.

Example

<script>
  import { RepositoryNodeSelector } from '@soleil-se/config-svelte';
</script>

<RepositoryNodeSelector
  name="role"
  label="Role"
  description="This is a field description."
  type="role"
/>

<RepositoryNodeSelector
  name="cookies"
  label="Cookies"
  description="This is a field description."
  type="site-cookie"
  multiple
/>

Props

Prop	Type	Description
type required	TypeMer information 'alias' | 'named-reference' | 'rss-feed' | 'rating-type' | 'responsive-breakpoint' | 'role' | 'site-cookie' | 'tag-group' | 'tag' | 'user-field' | 'addon' | 'data-store' | 'decoration' | 'default-image' | 'externaltopicintegration' | 'icon' | 'list-style' | 'module-element-draft' | 'module-element' | 'restApp' | 'topic' | 'webApp'	Repository category from which to fetch nodes.
label required	string | Snippet	Field label, a string or Svelte snippet.
value $bindable	string | string[]	Selected option value, or an array of values when multiple is enabled. Default: '' | []
description	string | Snippet	Description shown below the field, a string or Svelte snippet.
name	string	Configuration key and HTML name attribute.
placeholder	string	Placeholder displayed when no option is selected; localization follows the document language. Default: 'Select' | 'Välj' | 'Velj'
searchable	boolean	Enables searching the options. Default: false
removable	boolean	Allows the selected value to be cleared. For a single selection with removable={false}, the first option is selected initially when no value is set. Default: true
required	boolean	Set the field as required. Default: false
disabled	boolean	Disables the field. Default: false
multiple	boolean	Allows selecting multiple options. The value is then a string array. Default: false
show	boolean	Shows or hides the selector without destroying it. Default: true
class	string	CSS class added to the form-group wrapper.
children	Snippet	Content rendered after the selector and validation message.
option	Snippet<[option: Option]>Mer information string | { label: string, value: string }	Renders custom content for each option.
onChange	functionMer information (value: string | string[], event: JQuery.TriggeredEvent<HTMLSelectElement, undefined, HTMLSelectElement, HTMLSelectElement>) => void	Called for the Select2 change event with the updated value or values.
validate	functionMer information (context: ValidationContext<string | string[]>) => ValidationResult	Custom validator.

Types

Repositories that are children to the site are valid types, some are more useful than others.

Available types

Following types are available, not all are useful though.

Useful

• alias - Alias Repository.
• named-reference - Named Reference Repository.
• rss-feed - RSS Feed Repository.
• rating-type - Rating Type Repository.
• responsive-breakpoint - Responsive Breakpoint Repository.
• role - Role Repository.
• site-cookie - Site Cookie Repository.
• tag-group - Tag Group Repository.
• tag - Tag Repository.
• user-field - User Field Repository.

Do not use

• color - Color Repository, use <DropdownSelector type="color" /> instead.
• file - File Repository, use <NodeSelector type="file" /> instead.
• font - Font Repository, use <DropdownSelector type="font" /> instead.
• image - Image Repository, use <NodeSelector type="image" /> instead.
• index - Index Repository, use <DropdownSelector type="search-index" /> instead.
• metadata - Metadata Definition Template Repository, use <DropdownSelector type="metadata" /> instead.
• oAuth2 - OAuth2 Configuration Repository, use <DropdownSelector type="oauth2-configuration" /> instead.
• page - Page Repository, use <NodeSelector type="page" /> instead.
• principal - Principal Repository, use <NodeSelector type="user" /> instead.
• template - Template Repository, use <DropdownSelector type="template" /> instead.

Other

• addon - Addon Repository.
• data-store - Data Store Repository.
• decoration - Decoration Repository.
• default-image - Default Image Repository.
• externaltopicintegration - ExternalTopicIntegration Repository.
• icon - Icon Repository.
• list-style - List Style Repository.
• module-element-draft - Module Element Draft Repository.
• module-element - Module Element Repository.
• restApp - RestApp Repository.
• topic - Topic Repository.
• webApp - WebApp Repository.

App context

The component uses the current site name to fetch repository options through the Sitevision REST API. Initialize app context on the server so getAppContext() can provide siteName:

config/index.js

import router from '@sitevision/api/common/router';
import { createAppContext } from '@soleil-se/config-svelte/server';

router.get('/', (req, res) => {
  createAppContext(res);
});

The current user must have permission to read the repository, and the REST API must be enabled. Fetch errors are shown in the selector and logged to the console.

Validation

By default, the component applies standard required-field validation. A custom validate prop replaces that default and returns { success: boolean, message?: string }.
Validation errors are displayed below the component and prevent saving.

See validation for more details.

Snippets

label and description accept text or Svelte snippets.
Default child content is rendered after the repository selector and validation message.

App.svelte

<script>
  import { RepositoryNodeSelector } from '@soleil-se/config-svelte';
</script>

<RepositoryNodeSelector name="tagGroup" type="tag-group">
  {#snippet label()}
    Välj <strong>tagggrupp</strong>
  {/snippet}
  {#snippet description()}
    Välj en <strong>tagggrupp</strong>.
  {/snippet}
  <p>Ytterligare information.</p>
</RepositoryNodeSelector>

Custom option content

Use the option snippet to customize each option label. It receives the option as a string or an object with label and value properties.

<RepositoryNodeSelector name="tags" label="Taggar" type="tag" multiple>
  {#snippet option(opt)}
    <strong>{opt.label}</strong> ({opt.value})
  {/snippet}
</RepositoryNodeSelector>