API Select Widget

[nags-git]

How to fill Select values from API call json reponse and dependency select box change based on selected item ?

example like fetching countrylist from API and bind it and based on country selection i need to populate states and based on state selection i need to populated city

states and Cities are also returned from API

all this requirement is in Stepper

[elbakerino]

There are no API features includes for fetching values, you would need to write an own plugin or widget.

• if you don't need to validate it, a widget would be the easiest
• if you need to validate it you need to use a widget plugin, you need to create a keyword like api=country in you schema, then load it accordingly to your schemas definition and also inject it into the schema.

You could use fetch or e.g. existing redux stores.

Note: if you fetch it like this here, it will fetch it for every instance the widget is used! With redux or providers it can be written that it only loads it once.

import { MuiWidgetBinding, Select } from '@ui-schema/ds-material'
import { useProgress, PROGRESS_DONE, PROGRESS_ERROR, PROGRESS_START } from '@ui-schema/ui-schema/UIApi'

const CountrySelect: React.ComponentType<WidgetProps<{}, MuiWidgetBinding> & WithScalarValue> = ({schema, ...props}) => {
    const [countries, setCountries] = React.useState<List<string>>(List())
    const [loading, setLoading] = useProgress()

    React.useEffect(() => {
        setLoading(PROGRESS_START)
        fetch('https://restcountries.com/v3.1/subregion/europe', {method: 'GET'})
            .then(r => r.json())
            .then(data => {
                console.log(data)
                setCountries(List(data.map((d: { name: { common: string } }) => d.name.common)))
                setLoading(PROGRESS_DONE)
            })
            .catch(() => {
                setLoading(PROGRESS_ERROR)
            })
    }, [setCountries, setLoading])

    if (loading === PROGRESS_START) {
        return <LinearProgress/>
    }

    return <Select
        {...props}
        schema={schema.set('enum', countries)}
    />
}

For your other requirements, it depends on how your schema is structured, the simplest solution would be to get the value of country with useUIStore in the state widget and then load the required states accordingly.

Otherwise a "country-state-city widget" could make sense, which is e.g. of type=object and handles everything accordingly and injects the values into the property schema. With that structure, the properties enum schema is validated automatically.