Forms Framework
Creating a coherent, comprehensive, and rationalized framework for form based experiences that drives improvement of UX at scale.
Introduction
The Forms Framework allows developers to create better, more flexible forms for end users than in the past, and it promotes reusable, standardized forms across Workday. This framework has been created with the understanding that not all teams at Workday have dedicated designers on their team. As such, this documentation also includes UX Scorecards for Forms that will arm developers with guidance to make small design decisions that will have a massive positive impact on end users’ Forms experience.
For Generated UI Experiences
Forms Framework is already enabled for Generated UI experienced. For more information on how to build consistent forms in platform, please reference how to add form properties in XO.
For Bespoke Experiences
To ensure parity with platform, Canvas has provided the same flexibility and enhancements to some of the Canvas components. Bespoke teams can easily adjust density, label position and container alignment of inputs to match the Forms Framework properties.
The following components can be modified to achieve a similar experience:
FormFieldRadioGroupSelectSwitchTextAreaTextInput
The properties below can be achieved using Canvas
styling utilities,
the Canvas
FormField
component and Canvas inputs.
To implement similar behavior with Canvas Kit components, a Storybook example is available for teams to reference.
For more information on the specific spacing and padding you can view the Forms Framework design specs.
Density
Density refers to the amount of padding between each of the components and the amount of padding within the components. Although Canvas does not currently support a density system, Canvas components can still be styled and adjusted to support this.
The following inputs can be modified to support a density of High, Medium and Low using the
cs prop and the Canvas
styling utilities:
Container Alignment
Container alignment refers to the position of the form within the context of the layout. For bespoke teams, you can use Flexbox to align the form.
Label Orientation
Canvas Kit exposes an orientation prop so that the label can be positioned with the following
values: "horizontalStart", "horizontalEnd", "vertical". These values should provide enough
flexibility for different scenarios.
Vertical
This is the most common orientation for labels and inputs. Set the orientation prop on the FormField component to vertical.
Horizontal Start
Horizontal Start labels take advantage of horizontal white space and can reduce the amount of vertical scrolling
Horizontal End
When using side aligned labels, utilize the side: align right property. This ensures that the form labels are in close proximity to their corresponding input field. This is especially beneficial for form labels in languages that are generally shorter in length e.g Chinese, Japan, Korean .
More Information
More information on the Forms Framework can be found on the UI Platform website.
Can't Find What You Need?
Check out our FAQ section which may help you find the information you're looking for. For further information, contact the #ask-canvas-design or #ask-canvas-kitchannels on Slack.