Getting started with the Category data type

The CategoryC data type represents a list of options from which one or more can be selected. You can retrieve, pass, and filter them using scripts. For this, the following are used:

• Category type property EnumField.variants — all category options;
• option properties:
  • TEnum.name — name;
  • TEnum.code — code.

Getting all category options

You can get all options with their names and codes from a Category field. For example, to write the options into a String field when a button is clicked on a page, attach a script to the button:

async function showCategoryProperties(): Promise<void> {
    // Get an array of all category option names and convert them to a string
    const allCategoryValues = Context.fields.category.data.variants.map(v => v.name).join(', ');
    // Get an array of all category option codes and convert them to a string
    const allCategoryCodes = Context.fields.category.data.variants.map(v => v.code).join(', ');
    // Specify a variable of type String to store the result
    Context.data.category_properties = ``;
    // Add all option names to the result
    Context.data.category_properties += `Options: ${allCategoryValues}
`;
    // Add all option codes to the result
    Context.data.category_properties += `Codes: ${allCategoryCodes}

`;
}

Getting category options selected by the user

You can retrieve the category options selected by the user. For example, on a page, an employee selects values in a Category field and clicks a button. The names and codes of the selected options are then displayed in a *String field. To achieve this, bind a script to the button:

• for a Category field (one):

async function showSelectedOption(): Promise<void> {
    // Define a String variable to store the result
    Context.data.selected_option = ``;
    // Get the name of the selected category option and add it to the String field
    // If the name is not specified, output \"not set\
    Context.data.selected_option += `Selected option: ${Context.data.category?.name ? Context.data.category.name : 'not set'}
`
    // Get the code of the selected category option and add it to the String field
    // f the code is not specified, output \"not set\
    Context.data.selected_option += `Selected option code: ${Context.data.category?.code ? Context.data.category.code : 'not set'}
`
}

• for a Category field (many):

async function showSelectedOptions(): Promise<void> {
    // Get an array of names of the selected options and convert it to a string
    const allSelectedValues = Context.data.multi_category?.map(v => v.name).join(', ');
    // Get an array of codes of the selected options and convert it to a string
    const allSelectedCodes = Context.data.multi_category?.map(v => v.code).join(', ');
    // Define a String variable to store the result
    Context.data.selected_options = ``;
    // Add the selected option names to the result
    Context.data.selected_options += `Selected options: ${allSelectedValues}

`
    // Add the selected option codes to the result
    Context.data.selected_options += `Selected option codes: ${allSelectedCodes}
`
}

Creating new category options via script

You can dynamically create category options using a script, for example, when opening a page. To do this, add a Category variable to the page context without predefined options and configure it as follows:

async function onInit() {
    // Create the source array with options
    const categoryArray = ['repair', 'inspect', 'replace'];
    // Convert the array of strings to category options
    Context.fields.category.data.variants = categoryArray.map((name): TEnum<any> => ({
        name: name,
        code: name,
    }));
}

Filtering category options

You can set conditions in a script to display only specific category options on a page or form. For example, if a user fills out a String field, certain category options can be excluded. To implement this, bind a function to the On value change event of the String field:

async function conditionChange(): Promise<void> {
    // Check if the user filled in the condition field
    if (Context.data.condition) {
        // Filter category options. Keep only those whose codes are not `repair` or `replace`
        Context.fields.category.data.variants = Context.fields.category.data.variants.filter(t => t.code !== 'repair' && t.code !== 'replace');
    }
    // If the user did not fill in the condition field, all options will be shown
}