Design Tab of the Ribbon

The following tables describe the commands available in the various areas on the Design tab of the Ribbon.

Form Tools

Preview

Command	Description
Preview	View a mockup of the form as would appear to someone using your application. Use the controls at the top of the preview window to view the form as it would appear in a different workflow, state, or transition, or role.

Form Layout

Command	Description
Expander Layout	Uses a single column with expandable and collapsible headings for privilege sections.
Tab Layout	Uses a separate tab for each privilege section.
Mixed Layout	Uses a both expanders and tabs.
Portal Layout	Uses a "best fit" of privilege sections into a compact area. This layout is suitable to use as a Web page.
Help Layout	Provides an area for each section in which you can type descriptive text to help the user with this form.

Note: The form layouts provide starting points for form designs that you can modify as you want.

Style

Command	Description
Print Form Style	Set the form to look like a form that is optimized for printing.
State Form Style	Set the form to look like a read-only state form.
Transition Form Style	Set the form to look like an editable transition form.
Control Style	Set the selected form component to look like a control (typically black).
HyperLink Style	Set the selected form component to look like a hyperlink (typically blue with underline).
Label Style	Set the selected form component to look like a label (typically blue).
Expander Style	Set the selected form component to be expandable and collapsible.
Print Section Style	Set the selected form component to look like it cannot be expanded or collapsed.
Tab Style	Set the selected form component to be a tab that users can click to bring it into focus.

Font

Command	Description
Font name, size, attributes	Set the text attributes of the selected form component. Note: Not all fonts are supported in each Web browser. For example, some symbolic fonts such as Wingdings and Symbol are not supported in all browsers. Be sure to verify that the font you select is supported in the browser that is used by the majority of your users.

Background

Command	Description
Color 1	Apply a background color to the selected components.
Color 2	Apply a second background color for these controls: Tab containers Expander containers Section containers (print forms) Detail controls For expander containers, detail controls, and print form sections, the second color is used in the header. For tabs, use the second color to differentiate between selected and unselected tabs. To use this option, the Enable HTML5 features check box must be selected. Refer to Form Options.
Image	Select an imported image to use as the background for the form or the selected form component.
Image Icons	Select to have the imported image (if any) repeat horizontally or vertically across the background on the form or container.
Corner Radius	Apply a corner radius to containers, detail controls, and print form sections. For print form sections, you must apply a background color for the radius to be visible on the form. For panels, the corner radius is visible when you apply a background image or the background color is different than the panel color. To use this option, the Enable HTML5 features check box must be selected. Refer to Form Options.

Alignment

Command	Description
(Tool Icons)	Align rows and columns vertically (top, middle, bottom, full-height) and horizontally (left, center, right, full-width). You also use these tools to modify the alignment of a selected form widget. See Using Form Widgets for related information.

Size

Command	Description
Width, Height	Modify the size of rows and columns on the form you are editing. You also use these controls to modify the dimensions and characteristics of a selected form widget. See Using Form Widgets for related information.

Row & Column

Command	Description
(Tool Icons)	Add a row above or below the selected row on the form being edited, add a column to the left or right of the selected column, or delete the selected row or column.

Layout

Command	Description
Auto Arrange	Let SBM Composer create a compact, linear arrangement of the states and transitions in the workflow.
Re-inherit from Parent	(Sub-workflows only) Restore the arrangement of states and transitions defined for the parent workflow, as closely as possible.

View Mode

Command	Description
Presentation	Shows icons on states and transitions that represent all design elements that have relationships with the states and transitions. Hover over the icon for a custom form or orchestration workflow to see a thumbnail image of the form or workflow. Click or double-click the icon to view or edit the properties of the state or transition related to the design element.
Relationships	Shows the Relationships bar. For more information, see About the Relationships Bar.
Properties	Shows icons on states and transitions to indicate that certain properties are set. Click or double-click the icons to view or edit the corresponding properties in the Property Editor.

Show/Hide

Command	Description
Unreachable Paths	Toggle the display of states and transitions that are not connected to the Submit state on the workflow being edited.
Disabled Transitions	Toggle the display of transitions with Disabled selected in the transition Property Editor.
Deleted States	Toggle the display of states you deleted from the workflow after the workflow was published at least once. Note: States you added and deleted since the last publication are not affected by this setting.
Inheritance	Toggle the display of double lines in a sub-workflow to indicate states and transitions that were inherited from the parent workflow.
Annotations	Toggle the display of text annotations you can add to states, transitions, and workflows.
Labels	Toggle the display of the text labels on transitions.
Grid	Toggle the display of the blue "graph paper" background.

Transition Style

Command	Description
Preferred, Normal, Optional, Exception	Apply a predefined color or line style to provide a visual cue about the nature of the selected transition. Your choice does not affect the appearance or behavior of the transition on the associated form.

Swimlanes

Command	Description
Horizontal, Vertical	Specify whether you want horizontal or vertical swimlanes. See About Swimlanes for information about swimlanes.