Search

The Search component uses Tabs to enable switching between two different search experiences.

<App>
  <Search />
</App>

<Component name="Search">

  <Tabs>
    <TabItem label="Find invoices issued after date">
      <SearchInvoicesAfter />
    </TabItem>
    <TabItem label="Search clients, products, and invoices">
      <SearchEverything />
    </TabItem>
  </Tabs>

</Component>

<Component name="SearchInvoicesAfter">
This is SearchInvoicesAfter.
</Component>

<Component name="SearchEverything">
This is SearchEverything.
</Component>

Try switching between the two tabs.

<App>
  <Search />
</App>

<Component name="Search">

  <Tabs>
    <TabItem label="Find invoices issued after date">
      <SearchInvoicesAfter />
    </TabItem>
    <TabItem label="Search clients, products, and invoices">
      <SearchEverything />
    </TabItem>
  </Tabs>

</Component>

<Component name="SearchInvoicesAfter">
This is SearchInvoicesAfter.
</Component>

<Component name="SearchEverything">
This is SearchEverything.
</Component>

Try switching between the two tabs.

Search invoices after date

Here is SearchInvoicesAfter. Try changing the date.

<App>
  <SearchInvoicesAfter />
</App>

<App>
  <SearchInvoicesAfter />
</App>

<Component name="SearchInvoicesAfter">
    <VStack paddingTop="$space-4">
        <DatePicker
          id="dateAfter"
          width="20rem"
          initialValue="2025-01-01"
          dateFormat="yyyy-MM-dd"
          onDidChange="(val) => console.log('Date selected:', val)"
        />
        <Card when="{dateAfter.value}">
            <Table data="/api/invoices/after/{dateAfter.value}">
                <Column bindTo="name" header="Client"/>
                <Column bindTo="issue_date" header="Issue Date">
                    { window.formatDate($item.issue_date) }
                </Column>
                <Column header="Status">
                    <StatusBadge status="{$item.status}"/>
                </Column>
                <Column bindTo="total" header="Total">
                    ${$item.total}
                </Column>
            </Table>
        </Card>
    </VStack>
</Component>

The when guards the DatePicker's dateAfter, so the Table s data URL won't fire until its dependent variable is ready.

You can use the when property on any XMLUI component to prevent it from rendering until some condition is true.

Search everything

Here is SearchEverything. Try typing a, then c, then m, and watch the results converge dynamically on Acme.

It's similar to SearchInvoicesAfter.

<Component name="SearchEverything">

    <VStack paddingTop="$space-4">
        <TextBox
            placeholder="Enter search term..."
            width="25rem"
            id="searchTerm"
        />

        <Card when="{searchTerm.value}">
            <DataSource
              id="search"
              url="/api/search/{searchTerm.value}"
            />
            <Text>Found {search.value ? search.value.length : 0} results for
                "{searchTerm.value}":</Text>
            <Table data="{search}">
                <Column  bindTo="table_name" header="Type" width="100px" />
                <Column  bindTo="title" header="Title" width="*" />
                <Column  bindTo="snippet" header="Match Details" width="3*" />
            </Table>
        </Card>
    </VStack>

</Component>