Use list for navigations#

This example demonstrates how to build a navigable list-based interface in the Scripting app. It organizes structured data into expandable sections using DisclosureGroup, and allows users to navigate to detail views using NavigationLink.

Overview#

You will learn how to:

• Use List to display a directory of departments and staff
• Use DisclosureGroup to group related items under collapsible headers
• Use NavigationLink to navigate to a detailed view for each item
• Build reusable view components for clarity and modularity

Data Model#

The example defines a nested data structure representing a company, its departments, and the staff within each department.

1type Person = {
2  name: string
3  phoneNumber: string
4}
5
6type Department = {
7  name: string
8  staff: Person[]
9}
10
11type Company = {
12  name: string
13  departments: Department[]
14}

Sample Data#

1const companyA: Company = {
2  name: "Company A",
3  departments: [
4    {
5      name: "Sales",
6      staff: [
7        { name: "Juan Chavez", phoneNumber: "(408) 555-4301" },
8        { name: "Mei Chen", phoneNumber: "(919) 555-2481" }
9      ]
10    },
11    {
12      name: "Engineering",
13      staff: [
14        { name: "Bill James", phoneNumber: "(408) 555-4450" },
15        { name: "Anne Johnson", phoneNumber: "(417) 555-9311" }
16      ]
17    }
18  ]
19}

View Components#

PersonRowView#

A reusable component to display a person's name and phone number in a vertically stacked layout.

1function PersonRowView({ person }: { person: Person }) {
2  return <VStack alignment={"leading"} spacing={3}>
3    <Text font={"headline"} foregroundStyle={"label"}>{person.name}</Text>
4    <HStack spacing={3} font={"subheadline"} foregroundStyle={"secondaryLabel"}>
5      <Label title={person.phoneNumber} systemImage={"phone"} />
6    </HStack>
7  </VStack>
8}

PersonDetailView#

Displays detailed information about a selected person.

1function PersonDetailView({ person }: { person: Person }) {
2  return <VStack>
3    <Text font={"title"} foregroundStyle={"label"}>{person.name}</Text>
4    <HStack foregroundStyle={"secondaryLabel"}>
5      <Label title={person.phoneNumber} systemImage={"phone"} />
6    </HStack>
7  </VStack>
8}

Main View Layout#

The root view uses a NavigationStack and displays departments grouped in a List. Each DisclosureGroup expands to show staff members. Selecting a person navigates to their detail view.

1function Example() {
2  return <NavigationStack>
3    <List
4      navigationTitle={"Staff Directory"}
5      navigationBarTitleDisplayMode={"inline"}
6    >
7      {companyA.departments.map(department =>
8        <DisclosureGroup title={department.name}>
9          {department.staff.map(person =>
10            <NavigationLink
11              destination={<PersonDetailView person={person} />}
12            >
13              <PersonRowView person={person} />
14            </NavigationLink>
15          )}
16        </DisclosureGroup>
17      )}
18    </List>
19  </NavigationStack>
20}

Launching the View#

1async function run() {
2  await Navigation.present({
3    element: <Example />
4  })
5
6  Script.exit()
7}
8
9run()

Key Components#

• List: Displays a vertically scrollable list of items.
• DisclosureGroup: Organizes content into expandable/collapsible sections.
• NavigationLink: Enables navigation to another view when tapped.
• NavigationStack: Provides navigation context for view transitions.

Use Cases#

• Building directory-style interfaces (e.g., org charts, contact lists)
• Organizing hierarchical data with drill-down navigation
• Providing a structured browsing experience

This example offers a clean and scalable pattern for navigating through structured lists and accessing detailed information with ease.