Forms

A part of the ShipEngine Connect platform is allowing integrations to define their own forms used for things like registering or connecting a new account, and updating settings in the case of shipping integrations. These forms are defined using a library call rect-jsonschema-form and are comprised of two parts, a JsonSchema and a UiSchema.

Example

Pro Tip

By adding the "ui:order" property to your UiSchema you can gaurantee the order that the form fields will be generated in. Due to serialization / deserialization we cannot gaurantee order of form fields without this property.

registration-form.tscarrier.ts

Copy

Copied

const JsonSchema =  {
    type: "object",
    title: "Login Form Example",
    required: ["email", "password"],
    properties: {
    email: {
        type: "string",
        title: "Email Address",
        format: "email",
    },
    password: {
        type: "string",
        title: "Password",
        minLength: 8,
    },
    },
    description: "Connect to your account.",
};

const UiSchema = {
    "ui:order": ["email", "password"],
    email: {
    "ui:autofocus": true,
    "ui:emptyValue": "you@example.com",
    },
    password: {
    "ui:help": "Note: password is case sensitive",
    "ui:widget": "password",
    },
};

export const RegistrationFormSchema = {
    JsonSchema,
    UiSchema,
};

Copy

Copied

import {
  Carrier
  ...
} from "@shipengine/connect-carrier-api";
import { RegistrationFormSchema } from "./registration-form";
import { SettingsFormSchema } from "./settings-form";


export const DemoCarrier: Carrier = {
 ...
  AccountModals: {
    RegistrationFormSchema,
    SettingsFormSchema
  },
};

Learning More

You can learn more by visiting the official react-jsonschema-form website, or by playing with their interactive playground.