Developer Docs - Helix - 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.

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 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.

    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:

    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:

    
    
    
    
        
    
    

    {% if isrequired %}
        
    {% endif %}

    You can simply do this:

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