User and Group Browser Component

Overview

The user and group browser components create Miller-columns-style browsers that allow users to select a user or group while browsing through a group membership tree.

The three group membership browsing components are:

Similar to the user and group picker fields, these three components appear the same but differ in what they allow to be selected. Depending on whether users, groups, or users and groups should be selected, choose the group browser, user browser, or user and group browser, respectively. If the interface is only for browsing, use the group browser, as it is the only browser that can be configured to show only groups and not users.

To learn how to use these components, see the recipes listed below:

User and Group Browser

Function: a!usersAndGroupBrowserFieldColumns()

Displays group membership structure in columns. Users can navigate through the structure and select a single user or group.

Parameters

Name Keyword Type Description
Label label Text Text to display as the field label.
Label Position labelPosition Text Optional text to determine where the label appears. Valid values include
  • "ABOVE" (default) Displays the label above the component.
  • "ADJACENT" Displays the label to the left of the component.
  • "COLLAPSED" Hides the label. The label will still be read by screen readers; see accessibility considerations for more information.
  • "JUSTIFIED" Aligns the label alongside the component starting at the edge of the page.
Instructions instructions Text Supplemental text about this field.
Help Tooltip helpTooltip Text Displays a help icon with the specified text as a tooltip. The help icon does not show when the label position is "COLLAPSED".
Initial Group rootGroup Group The direct members of the initial group are displayed in the first column
Navigation Path pathValue User or Group Array The path from the first column to the current navigation.
Save Navigation To pathSaveInto Save Array Variable or list of variables to update when a user clicks on a user or group.
Selection Value selectionValue User or Group This user or group is displayed as selected when it is present in the navigation path array.
Save Selection To selectionSaveInto Save Array Variable or list of variables to update upon selection of a user or group.
Read-only readOnly Boolean Determines whether selection is enabled. Default: false.
Height height Text Determines the height of the component. Valid values: "SHORT", "MEDIUM" (default), "TALL".
Visibility showWhen Boolean Determines whether the layout is displayed on the interface. When set to false, the layout is hidden and is not evaluated. Default: true.

Notes

  • If an Initial Group is not specified, only the Label, Tooltip, and Instructions will be displayed.
  • Because users and groups can appear in multiple places in the browser at one time, a user or group only appears as selected if it is present in the Navigation Path array.
  • When a user or group is selected, the variables in Save Selection To are updated after the variables in Save Navigation To. This means that if a variable is updated in both saves, it will be updated to the value assigned in the Save Selection To when a user or group is selected.
  • When the component is read-only, the variables in Save Selection To are not updated when a user or group is clicked. However, if the Selection Value is set, a user or group can still be displayed as selected. Save Navigation To still updates as normal.
  • Click a selected user or group to deselect the value. When a user or group is deselected, a null value is saved.
  • A user or group can only be deselected if present in the Navigation Path.
  • To make the selection required for submission or display validation messages based on the selection, pair the browser with a a picker or other component.
  • The first user or group in the Navigation Path must be a member of the Initial Group. Each subsequent user or group in the Navigation Path must be a member of the group that comes before it in the array. Otherwise, an error will occur.

See also: Recipes

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60

load(
  local!initialGroup,
  local!pathValue,
  local!selectionValue,
  local!readOnly,
  {
      a!sectionLayout(
        label:"Controls",
        contents:{
          a!pickerFieldGroups(
            label: "Initial Group",
            maxSelections: 1,
            value: local!initialGroup,
            saveInto: {
              local!initialGroup,
              a!save(local!pathValue, {})
            }
          ),
          a!checkboxField(
            labelPosition: "COLLAPSED",
            choiceLabels: {"Read-only"},
            choiceValues: {true},
            value: local!readOnly,
            saveInto: local!readOnly
          )
        }
      ),
      a!sectionLayout(
        label:"Component",
        contents: {
          a!userAndGroupBrowserFieldColumns(
            label: "User and Group Browser",
            rootGroup: local!initialGroup,
            pathValue: local!pathValue,
            pathSaveInto: local!pathValue,
            selectionValue: local!selectionValue,
            selectionSaveInto: local!selectionValue,
            readOnly: local!readOnly
          )
        }
      ),
      a!sectionLayout(
        label: "Selection & Path",
        contents: {
          a!pickerFieldUsersAndGroups(
            label: "Navigation Path",
            instructions: "Represents the current navigation from the rootGroup. Changing this could cause errors in the interface.",
            value: local!pathValue,
            saveInto: local!pathValue
          ),
          a!pickerFieldUsersAndGroups(
            label: "Selected User or Group",
            instructions: "The selected user or group only appears as selected if contained in the pathValue.",
            value: local!selectionValue,
            saveInto: local!selectionValue
          )
        }
      )
  }
)
Open in Github

On This Page

FEEDBACK