View Examples
You can style any field in any View using View Rules. You can see these styled Views in the Grid layout, and they help draw attention to key fields. Use View Rules to style your fields to help Ministry leaders serve their people well.
Format Background & Icon
- You must have edit rights to Page View Rules.
You can add a background color and icon to the Last BG Check field of the Background Check Needed View on the Participants Page.
- Complete the View and Field Name fields (in this case, Last Background Check).
- Add the color name or HTML hex code to the Background Color field.
- Add Font Awesome image name to Image Name field.
- Click Save.
Format Icon & Conditions
- You must have some JavaScript knowledge.
- You must have edit rights to Page View Rules.
You can add an icon when the Date of Birth field is blank (null) in the Background Check Needed View on the Participant's Page.
JavaScript Condition: Null
{value}==null
- Complete the View and Field Name fields (in this case, Date of Birth).
- Add a single condition to the Conditions field.
- Add Font Awesome image name to Image Name field.
- Click Save.
Format Background Color with Conditions
- You must have some JavaScript knowledge.
- You must have edit rights to Page View Rules.
You can add different color backgrounds to the Date Returned field to the BG Checks by Date Submitted View on the Background Checks Page based on how old the Background Check Date Returned is.
- Background Check is 1-4 Years Old
new Date({value}) > new Date().setFullYear(new Date().getFullYear()-4) - Background Check is 4-5 Years Old
new Date({value}) <= new Date().setFullYear(new Date().getFullYear()-4) && new Date({value}) >= new Date().setFullYear(new Date().getFullYear()-5) - Background Check is more than 5 Years Old
new Date({value}) < new Date().setFullYear(new Date().getFullYear()-5)
- Complete the View and Field Name fields (in this case, Background Check Returned).
- Add a single condition to the Conditions field.
- Add the color name or HTML hex code to the Background Color field.
- Click Save.
JavaScript Examples
We know the legacy Platform was all SQL all the time. But here's your chance to dive into a new skill and work with JavaScript. Some ideas to get you started:
- Integer Greater Than a Certain Value
-
+{value} > 100 - Integer Between Two Values
-
{value} > 100 && {value} < 1000 - Null
-
{value}==null - Null (Hides a Record Fact if the Value is Null).
-
{value}!=nullNote: {value}! = means "not equals." - Starts With
-
{value}.startsWith("a") - Value Greater Than or Equal To (or Less Than or Equal To)
-
{value} >= 1000{value} <= 1000 - Exact Match
-
{value} == 'active' - Date Greater Than the Current Date
-
new Date({value}) > new Date()
JavaScript Tips & Tricks
JavaScript is fun, right?! Here are some tips and tricks to help you along the way.
- JavaScript is case-sensitive. So {value}=='bobsmith' is not the same as {value}=='BobSmith'.
- JavaScript uses quotation marks to define strings ('bobsmith' and 'BobSmith' are the strings in the example above). But if you include an apostrophe in a string defined by single quotes, the string breaks and your formatting won't work. Instead, use double quotes to define a string containing apostrophes, and with {value}=="Women's Ministry" you can apply conditional formatting to a Ministry Name field.
- There isn't a fail-over condition, so when you work with conditions, you must define all possible conditions in advance. If you define two color change conditions and there are ten possible options, the eight options that don't get a color change are suppressed entirely. So be strategic when setting conditions or someone could get left out.
- The {value}== must match the SQL value. For example, the record may show "Yes" or "True", but the SQL is actually "1," so the condition is {value}=='1'.