Scripting
Documentation
Changelog
Privacy
Documentation
Changelog
Privacy

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.

Outline