Documentation

Class

Directory

kiss.ux.Directory(config)

A Directory field allows to select users, groups, roles. It also handles API clients, which can be considered as users with specific rights inside an application.

It has some special options compared to the standard field:

  • users: use false to hide users
  • groups: use false to hide groups
  • roles: add custom roles in the list (like "everyone", "nobody, "creator"...)
  • apiClients: use true to show them
  • sortBy: to sort by first name or last name
  • nameOrder: to display the first name or the last name first
  • sortOrder: use "asc" or "desc"
  • displayAsCards: to display the selected users as nice colored card
Constructor

# new Directory(config)

Parameters:
Name Type Attributes Description
config object
multiple boolean <optional>

True to enable multi-select - Default to true
users boolean <optional>

true to list the users - Default to true
groups boolean <optional>

true to list the groups - Default to true
roles Array.<object> <optional>

list of custom roles like: ["everyone", "authenticated", "creator", "userId", "nobody"]
apiClients boolean <optional>

true to list the API clients - Default to false
sortBy string <optional>

Use "firstName" or "lastName", to sort users according to their first name or last name
nameOrder string <optional>

Use "firstName" or "lastName", to show users like "Smith John" or "John Smith"
sortOrder string <optional>

Use "asc" (default) or "desc", to change the sort order for users and groups
displayAsCards boolean <optional>

true to display values as cards
value string | Array.<string> <optional>

Default value
optionsColor string <optional>

Default color for all options
valueSeparator string <optional>

Character used to display multiple values
inputSeparator string <optional>

Character used to input multiple values
stackValues boolean <optional>

True to render the values one on another
hideInput boolean <optional>

true (default) to automatically hide the input field after a completed search
allowValuesNotInList boolean <optional>

Allow to input a value which is not in the list of options
allowDuplicates boolean <optional>

Allow to input duplicate values. Default to false.
allowClickToDelete boolean <optional>

Add a "cross" icon over the values to delete them. Default to false.
allowSwitchOnOff boolean <optional>

Allow to click on a value to switch it on/off
optionRenderer function <optional>

Custom function to render each option in the list of options
valueRenderer function <optional>

Custom function to render the actual field values
label string <optional>
labelWidth string <optional>
labelPosition string <optional>

left | right | top | bottom
labelAlign string <optional>

left | right
autocomplete boolean <optional>

Set "off" to disable
readOnly boolean <optional>
disabled boolean <optional>

TODO
required boolean <optional>

TODO
margin string <optional>
padding string <optional>
display string <optional>

flex | inline flex
width string | number <optional>
minWidth string | number <optional>
height string | number <optional>

View Source client/ux/directory/directory.js, line 55

this

Methods

# async _createOptions()

Create the list of options

View Source client/ux/directory/directory.js, line 211