Related Topics
n Process Director, responsive design is an approach to creating Forms that ensures the information displayed on the Form is rendered in a manner that makes the Form usable on a variety of devices and screen sizes. A Form that is properly responsive will enable users to view the form legibly, no matter what device or screen size they are using.
Process Director will automatically implement some features of responsive design, just as it does for accessibility. But, like accessibility, the Form designer is also responsible for implementing responsive features, as well.
Responsive design is primarily implemented through the use of Cascading Style Sheet (CSS) styles, either by setting the Style property of controls on the form, or by creating CSS classes, and applying those classes to the form control. For the most part, Form designers do not need to have extensive knowledge of CSS, but there are a few key style commands that you should know to implement responsive design elements, in addition to those that are built into Process Director.
Applying Styles
In Process Director, responsive CSS styles can be applied in three different ways.
Most Form controls have a Style property into which you can add short CSS style commands. Appling styles at the control level in this way usually overrides the styles set for that control in the general Process Director style sheet.
On the Properties tab of the Form definition, the Default Styles section contains a property named Additional Body CSS Styling. This property enables you to add a custom CSS style sheet to the form. Form controls can then apply the styles named in that stylesheet by typing a style name in the CSS Class property of the Form control.
You can create a custom CSS stylesheet and upload it into the /custom folder of your Process Director installation. On the Properties page of the IT Admin area's Installation Settings section, the CSS property enables you to specify the URL of the CSS stylesheet. Once you do so, that CSS stylesheet becomes universally available for use in any form. Setting the CSS Class property to one of the named styles in the CSS file will apply that style to the control.
For Cloud customers who don't have direct access to their installation's folder structure, BP Logix will upload the custom CSS stylesheet for you via a technical support request.
Brief CSS Primer
CSS describes how HTML elements are to be displayed on screen. Every object on a form, whether it is text, a form control, or any other object, can have a CSS style applied to it. CSS can be a complex subject as there are many different CSS style elements, and different objects may have different styles that are applicable to them. While we can't teach you the details of CSS in this lesson, we can give you a quick overview of how CSS styles work.
CSS styles have a specific syntax. A CSS command consists of a style attribute, a colon, the style setting for that attribute, ended with a semicolon. For example, if you want to create a boldface style, the style attribute is named font-weight, and the setting would be bold. This would be written in a stylesheet as:
font-weight:bold;
Any text to which this style is applied will appear as boldface text. For instance, if you type this command into the Style property of a Label control, the control's text would appear in boldface when the form runs.
If you wanted this style to be applied in many different places, you might want to create a CSS stylesheet in the Additional Body CSS Styling property of the Form definition. To create a CSS style in a stylesheet, the style needs a name. To do this, we have to add some additional syntax to our boldface setting. The style name would come first, with the style setting for that style name encased in curly brackets, like this:
SomeStyleName {
attribute:setting;
}
The name can be an HTML element, in which case, the style will automatically be applied to every instance of that HTML element on the form. For instance, if I want all of the Level 1 headings on a page to be boldfaced, I would need to use the "h1" HTML element as the name for my style:
h1 {
font-weight:bold;
}
The name can also be a CSS class, which is a style name you create to apply to different controls or HTML elements, as desired. You can name a class anything you'd like, but you cannot use spaces in the name, and the name must start with a period. So, for example, you could create a CSS style called "boldtext", with the following syntax:
.boldface {
font-weight:bold;
}
You could then set the CSS Class property of a Label control to boldface, and the style would be applied to the control when the form runs.
A CSS class can have more than one attribute set. For example, if you wanted the text to be both boldface and colored red, you might create the following class:
.redbold {
font-weight:bold;
color:red;
}
Note that, for readability purposes, we've set each attribute on its own line, as we have done for the last curly bracket. We've also indented the attributes. Adding the extra lines and spaces helps us to read the style setting more easily, but doesn't have any effect on how the styles work.
The W3C offers free and extensive training on CSS syntax and practices.
Table Refactoring
For Subscription and Cloud licenses of Process Director, some key elements of responsive design are built into the product. Process Director implements automatic table refactoring, which means that, at small screen sizes, Process Director reformats tables with multiple columns into a single column at smaller screen sizes. For example, a table that has four columns when viewed on a desktop computer will, when viewed on a phone, be presented in a single column.
Since most form designers use tables to configure the layout of the form, this means that, in most cases, Process Director will automatically implement a responsive view of the form's layout without any additional configuration by the Form designer.
This automatic table refactoring will solve most of the responsive design issues faced by Form designers. You can simply create a form layout using tables and know that, on smaller screen sizes, the form will be displayed properly to the users.
Documentation Feedback and Questions
If you notice some way that this document can be improved, we're happy to hear your suggestions. Similarly, if you can't find an answer you're looking for, ask it via feedback. Simply click on the button below to provide us with your feedback or ask a question. Please remember, though, that not every issue can be addressed through documentation. So, if you have a specific technical issue with Process Director, please open a support ticket.
