4. Template

Tip

This page will introduce you about the template in Floating UI with a simple example.

Template

Template is a set of controls that can be reused multiple times. Using templates lets you employ similar controls in the UI without duplicating code.

Following is the syntax of template:

data Template: {
    
    # Template content, normally a container control, but you can use any control actually
    content: (Control | TextControl)

    # Template parameters
    params: data {
        # `key` is the parameter name, `path` is an nbt path inside the `content` field. 
        # When a template is applied, the field at the specified NBT path inside content is set to the value of the parameter
        <key>: <path>
    }?

    # Custom data of this template. Can be passed to the template when it is applied. Will be stored as stored data `custom_data`
    custom_data: list<data {
        # custom field name
        key: string
        # default value if the field isn't assigned during the template application
        default: string?
    }>?
}

When using a template, you need register it in storage floating_ui:data custom.<template_id> using data command.

For example, we want to build a template test with a textblock on a panel. The template contains a parameter text to change the text of the textblock.

data modify storage floating_ui:data custom.test set value {\
    "content": {\
        "type": "panel",\
        "name": "test",\
        "size": [5f, 5f],\
        "child": [\
            {\
                "type": "textblock",\
                "text": "default"\
            }\
        ]\
    },\
    "params": {\
        "text": "child[0].text"\
    }\
}

And we can use it in the ui layout data:

data modify storage floating_ui:input data set value {\
    "type": "test",\
    "params":[\
        {"key":"text", "value":"Hello FloatingUI"}\
    ],\
}

In this example, parameter text has a path child[0].text. When this template is applied, we pass a string "Hello FloatingUI" to param text, which will be used to replace the path child[0].text in the template content. The textblock control is the first child of the panel , so its field text will be set to "Hello FloatingUI".

Change the string passed to param text to see how the template changes.

You can see a more complex example here