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.

Workflow Tools

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.

Related Topics

Home Tab of the Ribbon

Deployment Tab of the Ribbon

Appearance Tab of the Ribbon

Script Tab of the Ribbon

Ribbon