Style Example - Bootstrap & Variable Width

Style Example - Bootstrap & Variable Width

Minimum Width


Full Screen


Description

This Stylesheet contains 3 main sections;
  1. A left aligned panel which contains general instructions or notes to the User, the controls that form this panel would tend to be present on every page of the Workflow as Used Fields
  2. The middle of each page will contain any Text Labels for the User to read out, specific instructions for the current Page, and any data capture required. The controls in this part of the Workflow have been designed to have a minimum width, otherwise the width of each control will re-size with the browser up to 50% of the window, using the vw length. This type of setup is ideal for Users/departments with various different screen sizes across the business, or when working from home
  3. A right aligned panel which contains a Textarea control to allow for the User to take notes throughout the process, this would also be a Used Field on every page of the Script, allowing the User to constantly write and copy data from the notes field
The Side Panel Control is used to create the left and right panel in this example, anything outside of the Side Panel Start and End Controls will be located in the middle of the Page.

This stylesheet uses default Bootstrap elements, which allows for clear information, instructions, and guidance to be given to Users,
  1. Text Labels using the panel-info class and with a speech bubble next to it, indicates information that the User should be reading out
  2. Text Labels using the panel-warning class, indicate instructions or helpful information for the User
  3. Text Labels using the panel-danger class, indicate to the User that an error has occurred and further actions/steps may be required
It is also possible to apply certain Bootstrap classes directly to particular controls, the example used in this Workflow are the button controls at the bottom of the Page that are using btn-success, btn-warning, and btn-danger respectively.

CSS

The below code would need to be saved as a Stylesheet within your Intelligent Agent system, and then a Workflow created that was assigned this Workflow. There are also some style definitions for Text Label controls that need you to define Additional Classes in their field styling tabs.
  1. /* Variables for generally used values throughout the Stylesheet */
  2. $font-size-general: 18px;
  3. $font-weight-general: bold;
  4. $font-family-general: Arial;
  5. $width-general: 50vw;
  6. $min-width-general: 20em;

  8. .button.btn {
  9. font-size: 16px;
  10. width: 150px;
  11.     height: 60px;
  12.     white-space: normal;
  13.     word-wrap: break-word;        
  14. }

  16. .MainTextLabel {
  17. font-family: $font-family-general;
  18.     font-size: $font-size-general;
  19.     text-align: left;
  20.     white-space: normal;
  21.     word-wrap: break-word;    
  22. width: $width-general;
  23. min-width: $min-width-general;  
  24. }

  26. .GeneralTextareaInput {
  27.     height: 100px;
  28.     margin: 0px;
  29.     /*background-color: white;*/
  30.     white-space: normal;
  31.     word-wrap: break-word;    
  32. width: 39vw;
  33. min-width: 15em;  
  34. }

  36. .GeneralLabelBesideInput {
  37.     height: 100px;
  38.     margin: 0px;
  39.     white-space: normal;
  40.     word-wrap: break-word;    
  41. width: 10vw;
  42. min-width: 5em;  
  43.     vertical-align: middle !important;
  44.     text-align: center;
  45. }

  47. .SidePanelLabel {
  48. width: 260px;
  49.     text-align: center;
  50.     margin: 5px;
  51. }

  53. .SidePanelHeader {
  54. font-family: $font-family-general;
  55.     font-size: 15px;
  56. width: 260px;
  57.     text-align: center;
  58.     margin-left: 5px;
  59.     margin-top: 5px;
  60. }

  62. .SidePanelTextareaInput {
  63. width: 255px;
  64.     height: 150px;
  65.     margin: 0px;
  66.     /*background-color: #fdfdac;*/
  67. }

  69. .SidePanelTextareaLabel {
  70. width: 0px;
  71.     margin: 0px;
  72. }

  74. .Panel {
  75.     background-color: #f4f4f5; 
  76.     padding-right: 5px;
  77. }

Sample Workflow Download

Download here - Please note this Workflow was created in version 6.0.53.54981, and should not be imported into an earlier version of Intelligent Agent!

    • Related Articles

    • Style Example - Form

      Description This Stylesheet has been designed to give a webform-like feel to the pages, with a minimalist and segmented design approach to provide a functional Workflow that is still aesthetically appealing. If lots of content or data capture is ...

    • Script Styling Examples using CSS

      With the release of version 6.0.53 of Intelligent Agent, it is now possible to control the default styling for a Script using a CSS Stylesheet. This allows for styling to be applied to both default/built-in classes and for the creation of custom ...