Creating New Controls

Lava shortcodes, acting as controls, streamline the process of rendering form elements, making them more efficient to use.

When considering creating new controls, evaluate whether they're broadly applicable or specific to your project. If you believe a control could benefit the toolkit, let's collaborate. We can either integrate it directly or assist you in submitting a pull request.

Patterns

Most new controls are developed from the `rock-control` base shortcode, which offers the necessary label and control group for a wide range of controls. Utilizing this pattern is advantageous as it prevents redundancy in the basic structure of your control and ensures updates can be made centrally.

Below is an example of using the rock-control shortcode from the dropdown control.

{[ rockcontrol id:'rc-{{ '' | UniqueIdentifier }}' label:'{{ label }}' type:'{{ type }}' isrequired:'{{ isrequired }}' validationmessage:'Please select a campus.' ]}
    <select name="{{ name }}" id="{{ id }}" class="form-control {% if longlistenabled == 'true' %}chosen-select chosen-select-absolute {% endif %}">

	{% for item in items %}
		<option value="{{ item.value }}" {% if item.value == value %}selected="selected"{% endif %}>{{ item.text }}</option>
	{% endfor %}

    </select>
{[ endrockcontrol ]}

In most cases you'll want your control to provide the following parameters:

1. label - This is the text that will be placed above the control.

2. isrequired - Determines if a value is required for validation.

3. type - The type of control. This is appended to the root form-group. If you don't provide a value rock-control will be used.

4. validationmessage - Message to display when the value is not valid. The default message is "Please enter a value."

5. id - This is the unique identifier for the control. The pattern that has been established is for the value to be: rc-{{ '' | UniqueIdentifier }}

When using the rock-control shortcode you'll need to provide the UI element between the tags (lines 2-8 above).