Overview

Helix is the codename for an upcoming project that represents the next evolution of Lava for web development, integrating four distinct technologies.

• HTMX

• Lava Applications

• Lava Commands

• Control Shortcodes

Before diving into the exciting aspects, it's important to be aware that developing applications entails increased responsibility for security and data integrity. While we've made significant efforts to address these concerns, additional responsibilities accompany the use of Helix.

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 drop a Helix content block onto 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, however, is Lava's complexity in updating data—until Helix came along. Helix introduces new Lava commands designed for data modification. For example, consider the Entity Command that enables data updates. Key commands include:

• Modify Command: The core of Helix's new offerings, enabling you to alter or add to entity data. Read More

• DB Transaction: Facilitates updates across multiple entities with transaction support, allowing for rollbacks if necessary. Read More

• HTTP Response: Leverages HTMX's capability for server-side logic execution with straightforward HTTP response construction. 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 to this:

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