Custom Page Attributes

Mobile pages are Rock entities, which means you can hang your own attributes on them and read those values back in your XAML. That turns per-page details like a hero image, an accent color, or a headline into something an administrator changes from the page's settings rather than something a developer changes in code.

Example Configuration

Navigate to System Settings > Entity Attributes and add a new attribute against the Page entity type. Include the SiteId in the Qualified Field and set your mobile site Id in the Qualifier Value so that this attribute doesn't appear on unrelated pages.

In the example below, we are configuring a Hero Image attribute using the Image field type. The key is what we will reference in Lava, so keep it predictable.

Now open the mobile page you want to customize and edit its settings. Your new attribute appears alongside the built-in page settings, ready for someone to upload an image.

The Content block hands your XAML the page it is sitting on as CurrentPage, so you can read the attribute directly with the Attribute filter:

{% assign heroImageGuid = CurrentPage | Attribute:'HeroImage','RawValue' %}

The RawValue qualifier gives you the GUID of the uploaded file rather than rendered HTML. Pair it with GetImage.ashx and a fully qualified root so the app can resolve the image, then guard against a page that has no value set:

{% assign publicRoot = 'Global' | Attribute:'PublicApplicationRoot' %}
{% assign heroImageGuid = CurrentPage | Attribute:'HeroImage','RawValue' %}

{% if heroImageGuid != '' %}
    <Image Source="{{ publicRoot }}GetImage.ashx?Guid={{ heroImageGuid }}"
        Aspect="AspectFill"
        HeightRequest="220" />
{% endif %}

A hero image is just one example of many practical use cases. Because the value lives on the page instead of in the markup, the same XAML can be reused across pages and each one looks different. Swapping the artwork for a new series becomes an upload rather than a deployment, and the same pattern works just as well for headlines, accent colors, or any other per-page detail you would rather not hard-code.