Introduction

This is a javascript forms package for the DOI LE Portal.

The intention is that this package provides the high level logic for building your own forms.

To style the forms and provide extra bells and whistles implement a template form or use the existing Bootstrap 3 Form Templates.

Getting Started

1. Installation process

   Install from npm using "npm i doiforms"

   to install the template form library run "npm i bootstrap3formtemplates"

2. Software dependencies

This library is built with React 16.8.3.

3. Usage

Basic usage looks something like this:

import { FormTemplate } from "bootstrap3formtemplates";
import {
  DOIFormComponent,
  EnumFieldType,
  IFieldState,
} from "doiforms";
import * as React from "react";

export default function MyForm(): JSX.Element{
    const field = {
      DisplayName: "Your Name",
      Id: "name",
      Name: "name",
      Order: 0,
      Required: true,
      Type: EnumFieldType.text };
    const submit = {
          DisplayName: "Submit",
          Id: "submitb",
          Name: "submitb",
          Order: 1,
          Required: true,
          Type: EnumFieldType.submit
        };
    return <DOIFormComponent        
        ErrorHandler={(ErrorMessage?: string, Stack?: string) => <h1>{ErrorMessage || "Error"}</h1><p>{Stack}</p>}
        Fields={[field,submit]}
        FormTemplate={FormTemplate}
        RedirectURL={"https://localhost"}
        SubmitAction={() => {
          return new Promise<void>(
            (resolve: () => void, reject: (reason: any) => void) => {
              resolve();
            });
        }} />;
}

Buttons may be added as input fields or added in the optional Header or Footer properties.

The FormTemplate property is a function implemented using the following signatures:

interface IDOIFormAction {
    Action: EnumFormAction;
    Update?: IDOIFormState;
}
type FormActionFunc = (action: IDOIFormAction) => void;
interface ITemplateFormProps {
    Buttons: IButton[];
    ErrorHandler: ErrorHandlerFunc;
    FieldStates: IFieldState[];
    Footer?: JSX.Element;
    HandleSubmit: () => void;
    HandleReset: () => void;
    Header?: JSX.Element;
    IsError?: boolean;
    SendMessage: FormActionFunc;
    Styles: React.CSSProperties;
    SystemErrorMessage?: string;
}
type TemplateFormFunc = (props: ITemplateFormProps) => JSX.Element;

Template forms send messages to doiforms using the SendMessage property. Messages include:

enum EnumFormAction {
    NoOp = 0,
    Submit = 1,
    Reset = 2,
    Update = 3,
    HandleError = 4
}