This recipe enables you to create a single-select field that dynamically configures the url of a button to be able to send a user to various pages depending on the option they choose in the single-select.

We've found this to be very helpful when linking to event registrations or workflows where we may want to pre-populate a workflow attribute depending on the option selected in a single-select. Or if we have multiple registration instances of an event setup for each campus, we can build the single-select to choose your campus, and then the button dynamically links to the correct registration instance, all on a single event page.

Shortcode Setup

  1. Click this link and copy all of the code on the page.
  2. Paste the code into a new shortcode in your Rock instance.
  3. Setup default parameters named `defaultoptiontext` and `linktext` and give them values of `Choose an Option` and `Go`, respectively (or whatever default you prefer).
  4. Copy the examples below into the `Documentation` field of the shortcode. This allows users to quickly copy these examples to their clipboard as a starting point for using the shortcode.

Using the Shortcode

Shortcode Parameters

This shortcode will accept 4 different parameters that you can use to customize the single-select and button.

  • defaultoptiontext - this parameter enables you to pass the text you would like to use for the default state of the single-select.
  • linkurl - this parameter enables you to specify a url that will be prepended before the value of the option chosen in the single select. This is useful if you want every option to link to the same page, but you just need to change an attribute or query string based on the single-select option (see dynamically generated options example below).
  • linktext - this parameter enables you to customize the text used for the button.
  • options - this parameter is used for passing in a comma/caret delimited list that represents the options you wish to use in the single-select (see examples below).

Generating Single-Select Options

There are two different ways of generating the options for the single-select piece of this shortcode – manually & dynamically.

Dynamically Generated Options

For generating a list of options by campus for instance, you can just use the entity command to loop through campuses and then use the campus Guid property or whatever piece you need in your button url. Remember, you will need to have `RockEntity` enabled on the block it is used within.

{% capture options %}
    {% campus where:'Public == "Yes"' iterator:'campuses' %}
     {% for campus in campuses %}
      {{ campus.Guid }}^{{ campus.Name }}{% if forloop.last != True %},{% endif %}
     {% endfor %}
    {% endcampus %}
{% endcapture %}

{[ dynamicSelect defaultoptiontext:'Select Your Campus' options:'{{ options }}' linkurl:'/workflows/477?Campus=' linktext:'Request Help' ]}

Manually Generated Options

You can also generate a list of options manually be just supplying a comma delimited list of urls that can be picked for your button. Each url can be followed by a caret (^) and then the option label so that the url itself is not visible in the single-select.

{% capture options %}
/registration/HHIGauntlet2019Attendee^Hilton Head,
/registration/MYRGauntlet2019Attendee^Myrtle Beach,
/registration/NECGauntlet2019Attendee^Northeast Columbia,
/registration/RKHGauntlet2019Attendee^Rock Hill,
{% endcapture %}

{[ dynamicSelect defaultoptiontext:'Select Your Campus' options:'{{ options }}' linkurl:'' linktext:'Request Help' ]}