Customize Form Fields

The ROQ's generated B2B SaaS application provides basic forms for managing data within the application. It is easy to customize the form to meet your business needs.

How To Customize Form

Let's take an example of generated application called DigiShare, a digital book sharing web application.

In the Book section, we can create a new book with the Create Book form. The form has the following fields:

• Title: The book title.
• Author: The book author's name.
• Select Organization: A dropdown to select the organization to which the book belongs.
• Select User: A dropdown to select user.

Add description Create Field

Supposed that we want to add another field for book description, let's called the field as description:

• Description: it has string data type.

There are a few steps to add a field to the Create Book form:

1. Add the description property to the BookInterface interface in the interface/bookmodule. The updated code would look like this:

import { BookmarkInterface } from 'interfaces/bookmark';
import { HighlightInterface } from 'interfaces/highlight';
import { OrganizationInterface } from 'interfaces/organization';
import { UserInterface } from 'interfaces/user';
import { GetQueryInterface } from 'interfaces';
 
export interface BookInterface {
  id?: string;
  title: string;
  author: string;
  description?: string;
  organization_id?: string;
  user_id?: string;
  created_at?: any;
  updated_at?: any;
  bookmark?: BookmarkInterface[];
  highlight?: HighlightInterface[];
  organization?: OrganizationInterface;
  user?: UserInterface;
  _count?: {
    bookmark?: number;
    highlight?: number;
  };
}
 
export interface BookGetQueryInterface extends GetQueryInterface {
  id?: string;
  title?: string;
  author?: string;
  organization_id?: string;
  user_id?: string;
}

2. Update the bookValidationSchema in the validationSchema/books module to include the validation rule for the description field. The updated code would look like this:

import * as yup from 'yup';
 
export const bookValidationSchema = yup.object().shape({
  title: yup.string().required(),
  author: yup.string().required(),
  organization_id: yup.string().nullable(),
  user_id: yup.string().nullable(),
  description: yup.string().required()
});

Here, the description field is added with the yup.string().required() validation rule, indicating that it is a required fields.

3. Update the JSX code in the BookCreatePage component in pages\book\create directory to include the new description field. Add the following code inside the <form>

<FormControl id="description" mb="4" isInvalid={!!formik.errors?.description}>
    <FormLabel>Description</FormLabel>
    <Input type="text" name="description" value={formik.values?.description} onChange={formik.handleChange} />
    {formik.errors.description && <FormErrorMessage>{formik.errors?.description}</FormErrorMessage>}
</FormControl>

This code creates a new FormControl component for the description field, similar to the existing form controls for title and author.

Add description Edit Field

Previously the description field has added into the Create Book form. To edit the saved data you need to add this field into our Editing Book form too.

To do this you need to update the JSX code in the BookEditPage component in pages\books\edit directory. Add the following code inside the <form>:

<FormControl id="description" mb="4" isInvalid={!!formik.errors?.description}>
    <FormLabel>Description</FormLabel>
    <Input type="text" name="description" value={formik.values?.description} onChange={formik.handleChange} />
    {formik.errors.description && <FormErrorMessage>{formik.errors?.description}</FormErrorMessage>}
</FormControl>

This code addition is the same with FormControl in Create Book form.

Add description Read Field

The book data is displaying in the Book list. To show book description on the list, you need to change BookViewPage component in pages\books\view directory.

Update JSX in the BookViewPageand add this code inside the <Stack> component:

 <Flex alignItems="center">
    <Text fontSize="lg" fontWeight="bold" as="span">
		Description
    </Text>
    <Text fontSize="md" as="span" ml={3}>
		Add description field in the book data editor{data?.description}
    </Text>
</Flex>