Working with Option Lists

Working with option lists in Xano just got easier! In this guide, we'll show you how to leverage the metadata API to dynamically populate available options on your front-end, eliminating the need for hard-coding or maintaining separate databases. Let's dive in!

Understanding Option Lists

An option list in Xano can be either:

1. Enum Field: A text field with predefined values.
2. Separate Fields: Multiple fields inside your database that correlate to specific options.

These options are typically populated on the front-end through drop-down menus, radio buttons, or other UI components.

Setting Up the Metadata API

To get started, you'll need to generate an access token for the metadata API. This token is required to make API calls and interact with your Xano instance programmatically.

1. Go to your Xano dashboard and click the settings icon next to your instance.
2. Select "Metadata API" from the dropdown menu.
3. Click "New Access Token" and provide a name (e.g., "Options List Demo").
4. Define the necessary permissions for your use case. For this example, you'll need "Workspace Database" and "Workspace Content" permissions.
5. Click "Create" and copy the generated access token. Note: Store this token securely, as Xano will only show it to you once.

Next, you'll need to locate the API endpoints you'll be working with. In the "Instance API" section, click the link to open the metadata API documentation in a new tab.

Working with Separate Option Fields

Let's start by exploring how to work with separate option fields in your database.

1. Identify the Option Fields: In your database table, ensure that the fields representing options are tagged with a specific identifier (e.g., "option_"). This helps distinguish them from other fields.
2. Get the Table Schema: In the metadata API documentation, locate the "Get Table Schema" endpoint. Click the lock button and paste your access token to authenticate your API calls.
3. Retrieve Table and Workspace IDs: Obtain the workspace ID from the URL of any page in your Xano instance. For the table ID, you'll need to know the ID of the table containing your option fields.
4. Execute the API Call: In the "Get Table Schema" endpoint, enter the workspace ID and table ID, then click "Execute." This will return the schema for your table, including the option fields.
5. Copy the cURL Command: Copy the cURL command from the response, as you'll need it to import the API request into Xano.
6. Create a New API Endpoint: In Xano, create a new API endpoint and import the cURL command you copied earlier.
7. Extract the Option Fields: Use the "Find All Elements" function to extract the option fields from the array of columns returned by the API call.
8. Format the Options: Depending on your front-end requirements, you may need to format the option values into a specific array or data structure. The guide provides an example of creating a simple text array.
9. Update the Response: Update the API response to include the formatted option values, making them available for your front-end to consume.

Working with Enum Fields

If you're using an enum field for your options, the process is slightly different.

1. Get the Table Schema: Follow the same steps as before to retrieve the table schema, but this time for the table containing your enum field.
2. Copy the cURL Command: Copy the cURL command from the response.
3. Create a New API Endpoint: In Xano, create a new API endpoint and import the cURL command.
4. Return the Enum Values: The API response will already include the enum values in the desired format. Simply update the response to return the appropriate array of values.

By following these steps, you'll be able to dynamically populate option lists on your front-end, eliminating the need for hard-coding or maintaining separate databases. This approach ensures that your options are always up-to-date and consistent across your application.

Remember, Xano is here to simplify the process of backend development, making it accessible to everyone, from no-code enthusiasts to experienced developers. Happy coding (or no-coding)!