How to Customize the Brazos Template -- The Right Way

Follow

Introduction

Nearly anyone using Brazos UI will want to build a custom template. This gives you several advantages including:

  • Change the header and footer to match your color scheme
  • Add your corporate logo
  • Add CSS overrides in one central place
  • You'll need the Brazos Template to use Brazos UI controls anyway

This article will show you how to build your custom template the right way.

Create Your Template

  1. Create a new coach view and name it appropriately. Mine will be called "Acme Template."
  2. Drag the Brazos Template into the layout of your new coach view.
  3. Drag a content box into the second content box of the Brazos Template.
  4. Optional: If you plan to use the Show Details configuration option of the Brazos Template, drag a second content box into the first content box of the Brazos Template, and check the Show Details configuration option in the Brazos Template. In most cases, you should skip this step.
  5. Click on the Overview tab, and check the Use as a Template box.
  6. Return to the Layout tab, and select the Brazos Template in your layout. Click on configuration options, and consider which options you would prefer to control. For example:
    1. You might want to turn off the display of the Brazos Template. If so, change the Template Display Style configuration option to None.
    2. You might want to include your corporate logo in the header or footer. If so, expand the Images configuration group and use those options. Note: you'll need to include your logo as a managed file in your process app or toolkit first.
    3. You might want to choose a default alignment for control labels or numerical inputs. These choices can be overridden at the Section or Responsive Column level later.
  7. For any configuration options you don't want to control, you can expose the configuration option in your template, so developers can customize the template as they please. In order to do this, click the purple variable assignment button next to the configuration option you want to expose, and click the yellow mapping button to the right. Here is an example:
  8. Click the save button.
  9. Now let's create a human service so we can test our template.
  10. If you don't see your template in your coach palette, make sure to check the Template tag in the Filter.

  11. Drag your template into your coach layout and look at the configuration options. You should see any configuration options that you exposed in step 7. Note: my example only has one content box because I skipped step 6.1.
  12. Press play to see your template in action.
  13. Finally, your new template gives you a great place to store all of your CSS customizations. The Brazos Style Demo from the Brazos Examples process app is a great place to start. Here is a step-by-step guide.
  14. Once you have generated your CSS, return to your template, click on the Behavior tab and paste your CSS into the Inline CSS section of your template. Note: you could also add your CSS as a managed file.
  15. Now my template looks like this:

Final Note

You may see other approaches to building your own template, but they should generally be avoided. For example, if you choose to copy the Brazos Template, and modify it directly, you will no longer receive bug fixes to any of the supporting CSS or JavaScript files included in Brazos UI. You could use the Brazos Template directly, but this approach gives you a nice clean way of standardizing your UI, and it avoids the need to add an extra coach view with CSS customizations.

Have more questions? Submit a request

Comments

Powered by Zendesk