Using Control Templates

When designing forms and workflows, there are some common use cases that come up very frequently. Some of these have associated business rules. Control Templates provide a mechanism for building these once and re-using them many times. Let’s take a look at an example and see how you can use it. You can try these templates by clicking on this link and download the form here if you want to view them in detail.

Automatically set today’s date

Purchase Order, Employee On-Boarding, Expense Report, Leave Approval and many other forms have a date control that should be automatically set to today’s date. Instead of making the user type it in, we can just set it up automatically with a trivial business rule:

if (form.load) {
if (tDate.value.length === 0) {
tDate.value = frevvo.currentDate();
}
}

Easy enough. Now, let’s turn it into a reusable control template.

Step 1: Put the Date control in a Panel and give it a nice user-friendly name like Current Date Panel. You can publish just the control but it’s necessary to put it into a panel so that the associated rules get carried along.

datePanel

Panel with a User-Friendly Name

Step 2: Drag the Panel into the Custom palette. Hover the mouse over the header of the custom palette area while dragging. The header and drag icon will change and you can drop the control into the palette.

customPalette

Drag/Drop into Custom Palette

Step 3: When you drop it in, a wizard appears. Enter any desired tags, a description and make sure you check the box next to the rule. The read-only box will automatically get checked. The tags can be used later by other designers to find the published custom control. The read-only box prevents changes to certain properties that could cause the associated rule to fail. Then click Submit and Voila! You have a published custom control.

publish

Publish Wizard

 

How can another designer use it?

It’s simple. In the Form Designer, open the Custom Palette and click the Search link. In the wizard that shows up, you can view all published custom controls or enter a string and click the Search Controls button to narrow the list by tag. When you find the control you want, check the box next to it and click Finish.

searchCustom

Find Published Templates

The control will appear in your Custom Palette from now on every time you open the Form Designer. To use it, simply drag & drop it from the Custom Palette into your form. The layout and behavior will be preserved. In this example, the date will automatically initialize to the current date.

The example form above also contains templates for calculating a sub-total and grand total for line items in a Table and for initializing controls automatically with the currently logged-in user’s information (e.g. First Name, Last Name). You can download the form by clicking on this link to view the controls and associated rules. We’ll discuss these examples in a separate how-to article.

 

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: