Overview

Helix is Rock's toolkit for building interactive web pages with Lava. It brings together four technologies, and all of them are part of core Rock. Lava Applications came to core in Rock v18.1.

• HTMX
• Lava Applications
• Lava Commands
• Control Shortcodes

HTMX

Ever felt limited by Lava's single opportunity to construct a page at load time? Imagine the flexibility of refreshing parts of the page without a full reload. That's precisely what HTMX offers. Here's a brief overview of the HTMX library.

Helix seamlessly incorporates HTMX into Rock. Just add a Lava Application Content block to your page, and you're all set. From there, you can use HTML snippets like the one below, which effortlessly interact with the endpoint, updating the target element (such as a div with the 'group-list' CSS class) with the endpoint's contents.

<a class="btn btn-primary" hx-get="^/group-toolbox/my-groups" hx-target=".group-list">

<ul class="group-list"></ul>

Lava Applications

You might be intrigued by HTMX and wondering where to obtain the necessary endpoints. While Lava Webhooks or custom APIs are options, they have drawbacks that might not make them ideal for HTMX. That's where Lava Applications come in.

Lava Applications offer a comprehensive framework for crafting Lava endpoints that generate HTML snippets for HTMX use. Begin by defining an application for your project, which simply requires a name, description, optional configurations, and a slug (as seen in the 'group-toolbox' example above).

The next step involves setting up endpoints within your application, which is where the core development takes place. These endpoints specify the Lava template to be executed upon a Helix request, are identified by slugs (like 'my-groups'), and are associated with an HTTP method (e.g., GET, POST) to dictate their execution context. Additionally, endpoints include security features to control access.

Lava Commands

Once you familiarize yourself with HTMX, you'll likely recognize its vast potential. Soon enough, you'll be imagining all sorts of features you could create. A common hurdle is updating data from Lava. Lava includes commands built for changing data, not just reading it. They're documented in the Lava reference:

• Modify Entity: Change or add entity data. Read More
• DB Transaction: Update several entities at once, with rollback if something fails. Read More
• HTTP Response: Build an HTTP response from server-side logic. Read More

Control Shortcodes

Armed with HTMX and the latest Lava commands, you might feel quite empowered. However, to achieve forms that seamlessly blend with Rock's native aesthetic, you'll need to delve into custom logic and markup, possibly even picking up some JavaScript. To ease this process, we've developed a series of Lava Shortcodes designed to streamline form creation.

So instead of this:

<div class="form-group campus-picker {% if isrequired %}required{% endif %}">
    <label class="control-label" for="{{ id }}">Primary Campus</label>
    <div class="control-wrapper">
        <select name="{{ name }}" id="{{ id }}" class="form-control">
            {% assign campuses = 'All' | FromCache:'Campus'  %}
            {% for campus in sc-campuses %}
                <option value="{{ campus.Id }}">{{ campus.Name }}</option>
	    {% endfor %}
	</select>
    </div>

    {% if isrequired %}
        <span id="rfv-{{ id }}" class="validation-error help-inline" style="display:none;">{{ validationmessage }}</span>
    {% endif %}
</div>

You can simply do this:

{[ campuspicker label:'Primary Campus' value:'1,2' types:'768' statuses:'765' selectablecampuses:'1' ]}