Basic Badge Label Creation

  • By Chris Allen 3 Years Ago

You have probably noticed in the top right corner of a person’s profile page a set of labels. These labels are a type of badge in Rock. I imagine they are called labels because they are more text-based when compared to the graphic-based badges in the middle of the page.

Out of the box Rock offers Campus, Connection Status, and Inactive labels. If you want to add your own just follow along. However, I am very new to coding and am still finding new ways to tweak the code. This is not a definitive how-to. With additional knowledge you will be able to modify this code infinitely to suit your needs.

Existing Labels

The Campus label simply shows the campus selected when the person was created. You will want to create your own list of campuses. If you have one location you can put “Main Campus." The Campus can be changed from the Edit Family page.

The Connection Status also shows the status selected when the person was created. It can be easily changed from the Edit Individual page.

The Inactive label will only show if the person has been moved to an Inactive Record Status on the Edit Individual page.

Creating Your Own Labels

If you have ever wanted to create your own labels this is a good starting point. I did not know what I was doing at first but have picked up some basic techniques. I will go through two examples to demonstrate label creation. The first will be a simple label with minimal setup. The second will go through a more complex label and the necessary setup.

Example 1: Create a badge for church staff

Summary of action steps

  1. Create personal attribute
  2. Create the label (badge)
  3. Add the badge to the profile page

    • Step 1. Create personal attribute from the Admin Tools - General Settings menu. On the Personal Attributes page scroll to bottom and click on the add icon. In the Add Attribute window type in the name (in example: Staff) and description (in ex: for church staff). The Category drop-down is important because it helps sort the attribute. For this example we must use an existing category. We categorized Staff in Employment & Skills. For this example we also chose Field Type Boolean, True Text Yes, False Text No and no Default Value.

    • Step 2. Because this new attribute is in an existing category that category may already have a block on the profile page. From the Person Profile page click on Extended Attributes. On the Employment & Skills block you should see the “Staff" Attribute. By hovering over the Employment & Skills block you will see a pencil icon. Click on the icon to drop-down the editable fields within Employment & Skills. You will see the new attribute Staff at the bottom. Select Yes for now, to see how the label will work.

    • Step 3. Create the label (badge) from the Admin Tools - General Settings menu. Click on Person Profile Badges. Click the add icon to build a new badge. Add a name (in ex: Staff) and description (in ex: Indicates if an individual is part of WCC staff). There are several Badge Types but most of them are specific to existing Rock badges. I selected Liquid Badge which taps into all the customization. A simple if statement will populate the badge. The if statement is looking at the new attribute we added (called Staff) for the given person. If that field is “Yes" it will continue. This code will create a “primary" type label.* The primary type will create a label with an orange background. The label will say “Staff."

    {% if Person.Staff == "Yes" -%} <span class="label label-primary" >{{ "Staff" }}</span> {% endif -%}

    • Step 4. Now we need to add the label to the Profile page. From the Profile page use the Admin toolkit and click on Block Properties. This will make several gray boxes with arrows appear on the page. Find the box that corresponds with the Bio portion of the profile. By hovering over that arrow an expanded menu will appear. Click on the gear icon to access the Block Properties. Under Badges, simply select the box next to Staff to turn on the Staff label. So far I have found 6 types of labels. The difference is the background color.
      • label label-success = green
      • label label-info = turquoise
      • label label-default = sandstone
      • label label-primary = orange
      • label label-warning = yellow
      • label label-danger = red

Example 2: Create a badge for Military Veterans. This attribute will have the ability to type in the appropriate military branch and display that text.

Summary of action steps

  1. Create Attribute Category and Personal Attribute
  2. Add new block to Extended Attributes page
  3. Create the Label
  4. Add the Label to the Profile page

    • Step 1. Create new Attribute Category. If you know your new Personal Attribute will need a new Category you will want to create the category first. You can do that from the Admin Tools - General Settings menu. Use the Attribute Category page. Click on the add icon. Enter in the name and description. The entity type will most likely be person. You can enter a font awesome icon code as well.

    • Step 2. Create the Person Attribute. This time select the new Category you created in step one. Also change the Field Type to Text.

    • Step 3. Add new block to the Person Profile page. From the Profile page click on Extended Attributes. This will allow you to add the new block to the Extended Attributes page. From the Admin toolkit click on Page Zones. The bottom of the page features three columns of blocks. Click on the gray square icon that corresponds with the column you want the new block to be in, then click on Zone Blocks. From the Zone window you can add a new block by clicking on the add icon. You will need to name the new block and select the block Type. Select CRM > Personal Detail – Attribute Values. Then hit Save. Your new block should appear in the column you selected. By clicking on the pencil icon you can now edit the value of the new Personal Attribute. This is the easiest way I have found to update a new attribute. There may be a way to add it to the Edit Individual page but I haven’t figured that out yet.

    • Step 4. Create the badge label. I used another if statement but added some variability to tap into the text box feature we added to the attribute. Here the if statement is looking at the text box we created in the new attribute. If that text box is not empty we want the badge to display. Furthermore, instead of displaying a fixed string of text, this badge will display the actual text from the text box.

{% if Person.Veteran != empty -%} <span class="label label-default" >{{ Person.Veteran }}</span> {% endif -%}

  • Step 5. Add the Label to the Profile page.

Additional Customization

There are many variations to the Lava code that can enhance how the label functions. Here are a couple I have found.

A) To change the color of the text add in this code: style="color:blue"

{% if Person.Staff == "Yes" -%} <span class="label label-primary" style="color:blue" >{{ "Staff" }}</span> {% endif -%}

B) To change the shape of the label use this: class=badge
The label style creates a square background. The badge style has rounded ends but only offers a gray background.

{% if Person.Veteran != empty -%} <span class=badge >{{ Person.Veteran }}</span> {% endif -%}


@chris_allen
West Linn, Oregon