Basic Form Elements

Forms are comprised up of displays and inputs. The basic inputs are

• Checkbox
• Date/Time
• File
• Input
• Number
• Text Area
• WYSIWYG
• Select
• Submit
• and Popup which is covered here.

Checkbox

Checkbox is selected when element.template === "chechbox"

Checkbox is a simple input, to decide whether the input is checked or not is based on it being value 1 or 0. When you trigger an onClickEvent, you must also set the value back to a 1 or 0 and not true or false.

Date/Time

Date/Time is selected when element.template === "input" && (element.method === "datetime" || element.method === "date")

When recieving data from FIYGE it will come in the form

• dateTime: 2025-01-14 14:00:00 or YYYY-MM-DD HH:MM:SS
• date: 2024-10-23 or YYYY-MM-DD

You can convert the string to a javascript date object using these functions

const fiygeDateStringToDate = (dateString: string) => {
  if (!dateString) return null;

  const arr = dateString.split("-");
  const year = Number(arr[0]);
  const month = Number(arr[1]);
  const day = Number(arr[2]);

  return new Date(year, month - 1, day);
};

const fiygeDateTimeStringToDate = (dateTimeString: string) => {
  if (!dateTimeString) return null;
  return new Date(dateTimeString);
};

When posting data back to FIYGE it must be in the following form

• dateTime: 2025-01-14 14:00:00 or YYYY-MM-DD HH:MM:SS
• date: 2024-10-23 or YYYY-MM-DD

Which can be converted using these functions

const dateToFiygeDate = (d: Date) => {
  const year = d.getFullYear();
  const month = String(d.getMonth() + 1).padStart(2, "0"); // Months are zero-based
  const day = String(d.getDate()).padStart(2, "0");
  return `${year}-${month}-${day}`;
};

const dateToFiygeDateTime = (d: Date) => {
  const year = d.getFullYear();
  const month = String(d.getMonth() + 1).padStart(2, "0"); // Months are zero-based
  const day = String(d.getDate()).padStart(2, "0");

  const hour = String(d.getHours()).padStart(2, "0");
  const minute = String(d.getMinutes()).padStart(2, "0");
  const second = String(d.getSeconds()).padStart(2, "0");

  return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
};

File

File is selected when element.template === "file" File input accepts a file and saves it on our backend. File inputs can only select 1 file at a time and when saving to the backend use the value event.target.files[0].

Input

Input is selected when element.template === "input". This is a basic text element.

Number

Number is selected when element.template === "input" && element.method === "number". This is similar to input, but only accepts numbers and uses JS Formulas to calculate its value.

Text Area

Text area is selected when element.template === "textarea". This is similar to input, but uses type textarea.

Rich Text (WYSIWYG)

Rich text is selected when element.template === "textarea" && (element.editor === "WYSIWYG" && element.editor === "WYSIWYG-V1".

This accepts and returns HTML.

Select

Select is selected when element.template === "select". This is an input of type select and has <option> as its children. The select options are found in multiple ways, a function for gathering them below.

const isSelectChildren = (element: FormChild) => {
  return element.children?.some((c) => c.template === "option");
};

const isWorkflowSelect = (element: FormChild) => {
  return element?.lookup_class;
};

const useSelectOptions = (element: FormChild): SelectOption[] => {
  const { accessToken } = useAuth();
  const lookupClassQuery = useQuery({
    queryKey: [element.lookup_class],
    queryFn: async () => {
      if (!element?.lookup_class) {
        throw new Error("lookup_class doesnt exists");
      }
      let path = element.lookup_class.replace("\\module", "");
      path = path.replace("\\model", "");

      const { error, message, data } = await fetchIndex({
        accessToken,
        path: path,
        limit: 0,
      });
      if (error) {
        throw new Error(message);
      }
      return data;
    },
    enabled: Boolean(element?.lookup_class),
  });

  if (element.children && isSelectChildren(element)) {
    return element.children?.map((c) => ({
      value: c.value as string,
      label: c.text as string,
    }));
  }

  if (isWorkflowSelect(element)) {
    const options = lookupClassQuery.data?.data;
    const primaryKey = lookupClassQuery.data?.primary_key;
    if (!options || !primaryKey) return [];

    return options?.map((o) => ({
      value: o?.[primaryKey] as string,
      label: o.record_display_name as string,
    }));
  }

  return [];
};

Submit

Submit is selected when element.template === "submit". The submit input is a button of type submit that submits the form. The action and keys that need to be passed to the form handler are in element.name[1] and element.label.

Labels

The labels for these inputs are found on the element itself under element.label or under the data record data.forms. It is an object with the key's being the element names and the value being the label to display.