Using ignition-web-ui form field components

Ignition 8.3 Early Access
1

Hi! I'm working on Gateway settings pages for 8.3, and I'm trying to take advantage of the components provided in the ignition-web-ui. I can get basic form fields working fine, but I'm struggling to add <InputLabel>s. The component doesn't seem to be exported, and loading it from a separate @mui/material import doesn't seem to work right: they render on top of the field.

I also notice that the fields have an inFormControl prop; setting that to true doesn't seem to solve the issue.

I'm doing things like

<FormControl>
	<InputLabel>Label Text</InputLabel>
	<Controller
		control={control}
		name='fieldName'
		render={({ field }) => (
			<SelectInput
				label='Label Text'
				values={selectChoices}
				inFormControl={true}
				{...field}
			/>
		)}
	/>
	<FormHelperText>A text description of this component.</FormHelperText>
</FormControl>

I'm importing FormHelperText and FormControl from MUI, because they're not available in ignition-web-ui. I'm aware that having a duplicate copy of @mui/material would cause problems with the contexts; I've tried to avoid that. If what I'm doing looks sensible, I'll assume the problem's on my end.

I suspect I'm not getting the fundamental design thought of the component library; can someone point me in the right direction?

2

(Not a frontend developer)

Does anything here help?

https://files.inductiveautomation.com/sdk/storybook/earlyaccess/ignition83/ignition-web-ui/8.3.0-SNAPSHOT/index.html?path=/docs/gateway-color-palette--docs

EDIT:
Eh, probably not with your actual problem, only with generally knowing what components are available. I thought maybe storybook had something to help with libraries. I'll ask around.

3

For your example, I believe you would need to adjust it to look something like this:

<FormControl>
	<Controller
		control={control}
		name='fieldName'
		render={({ field }) => (
                        <React.Fragment>
                             <InputLabel>Label Text</InputLabel> (or just a div, span some element)
			    <SelectInput
				  label='Label Text'
				  values={selectChoices}
				  inFormControl={true}
				  {...field}
			    />
                            <FormHelperText>A text description of this component.</FormHelperText>
                        </React.Fragment>
		)}
	/>
</FormControl>

Im not sure if your taking advantage of yup as a validator and react hook forms context but a full example using our components would look something like this:

const schema: yup.ObjectSchema<FieldValues> = yup.object({
    name: yup.string().required(),
});

const TestComponent = () => {
    const context = useForm({
        mode: 'onChange',
        defaultValues: { name: '' },
        resolver: yupResolver(schema),
    });

    const createPerson = (name: string) => {
        console.log(name);
    };

    const { handleSubmit } = context;

    return (
        <div>
            <Form context={context}>
                <FormControlInput
                    input={<TextInput />}
                    name="name"
                    id="name"
                    label="your Name"
                    description="some helper text"
                />
                <button onClick={handleSubmit(createPerson)}>Submit</button>
            </Form>
        </div>
    );
};
1 Like
4

Hi @Andrew_Gilbert,

There should be two exported components depending on how granular you want to control your inputs. We export both FormLabel and FormControlInput from the ignition-web-ui library. FormLabel is the input label and description wrapper if you plan on opting out of our form ecosystem that uses react-hook-form under the hood. If you want do plan on opting in, you can use FormControlInput which is a convenience component that basically does your sample code under the hood. Here is an example:

<FormControlInput
    name={'name'}
    id={'name'}
    label={'Name *'}
    disabled={disabled}
    input={<TextInput />}
    description={'Give the provider a name.'}
/>
1 Like