Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Previous Section | Next Section

...

Rule: Automatically Set Date to today's date
  1. Click the Image Removed rules icon on the toolbar. Rules in the Guided Designer Navigation bar at the top of the page. 
  2. Click Image AddedCreate a new rule and click the Image Removed icon to edit it.
  3. Change the name of the rule to: Initialize form
  4. Click on the Rule Builder button.

    1. Click Next to go to the Action wizard.

    2. The first action appears by default. If needed, click the Add Action button on the top right of the Action Wizard

    3. Select TodaysDate from the first dropdown. TodaySDate is the Name of the Date control at the top of the form. If your control is named something else, select that control from the dropdown.replace TodaySDate below with that name

    4. Select to from the second dropdown

    5. Type today in the Expression field and click on the today function when it displays in the dropdown 

  5. Click Finish then click on theImage Removedsave and test icon.

  6. Image AddedSave and Test. Now, when the end user first starts using the form, the Date control at the top will be set to today's date. No need for the user to type it in.

    Expand
    titleClick here to see this rule in the Visual Rule Builder

    Image RemovedImage Added

Rule: Set Price from Item

When the user selects an item in any of the rows in the Order Items table, we want the price of that item to be displayed automatically. Normally, this price information would come from a back end database or other system but we're just hard-coding the values in the rule for the time being.

  1. Click the Image Removed icon Form in the toolbar Guided Designer Navigation barn to return to the form. In the Order Items table, select the Price column by clicking on the header. In the Properties panel, uncheck Enabled. The entire column is grayed out.
  2. Go back to the rules editor, create a new rule and edit it. Change the name of the rule to: Set Price for ItemChevrolet
  3. Run Builder. On the Condition wizard:
    1. Select the control 'Item'
    2. Select the operator 'Is'
    3. Click the toggle to switch to a Literal Value, and type Chevrolet.
    4. Click Next
  4. On the Action wizard, set the control Price to the literal value 125.75
  5. Click Finish. Your rule should look like this.
    Image Added
  6. Repeat Steps 2-5, creating two more rules. 
    1. When Item is Chrysler, Set Price to 118.75
    2. When Item is Ford, Set Price to 132.75

Now, when the user selects an item, the price for that item will be displayed.


Info

frevvo rules also support JS custom code. Let's take a quick look at an example of the above Set Price rules in javascript.

Click Rule Code then click Edit Code. In the Rule area, type or copy/paste the following. 

Code Block
languagejavascript
linenumberstrue
for (var i = 0; i < Item.value.length; i++) {
  if (Item[i].value === 'Chevrolet') {
    Price[i].value = 125.75;
  } else if (Item[i].value === 'Chrysler') {
    Price[i].value = 118.75;
  } else if (Item[i].value === 'Ford') {
    Price[i].value = 132.75;
  }
}

...


Rule: Calculate Subtotals

...

Now, the overall Grand Total is automatically calculated and updated with the Subtotal amounts as rows are filled in and added to the table. Try deleting a row in the table. Notice the Subtotal amount for that row is subtracted from the Grand Total 

 has a powerful Rules engine. You can perform many dynamic actions in your form including the examples above as well as many other actions like connecting to back end systems and retrieving JSON to populate form controls. The Visual Rule Builder makes it easy to create rules to show/hide parts of the form, automatically fill in user information, make controls required or optional dynamically without writing code. For more information, refer to the Rules Examples documentation.

Previous Section | Next Section