Actions and custom data

From version 1.241+

Normally the SSE feature will continue to stream new data, this streams the same contents in a loop, and in most cases is not needed. To improve this we can use special custom actions on streams to only flush data when there is an actual change.

Define the custom action to the SSE block

To make the server side events flush data based on actions we need to add the action name to the sse stream. The name (my-action) is custom that you can define yourself.

<div class="row">
    <span class="alert" id="notifications"
        data-sse-src="{{ .Tools.GetSSESrc "da-sse-notifications-page"}}"
        data-sse-behaviour="push"
        data-sse-action="my-action">
    </span>
</div>

When this is loaded the stream will not flush any data until that action has been detected.

Send the action

We can use two different methods to send the actions. After the server receives the event it will flush the stream.

Form based actions

With form based actions all possible inputs are visible in the template html code.

<form method="post">
    <input type="hidden" name="AutomatApi.StreamActionEvent.Name" value="my-action">
    <button type="submit">Trigger action</button>
</form>

Template driven action

With this the data is hidden from the html code. Suitable for actions that contain data that we do not want the end user to see or edit.

We still use a form but what is being sent is hidden.

    <form method="post">
        <input type="hidden" name="Send" id="send" value="1">
        <button type="submit" class="form-button">Trigger action</button>
    </form>

    {{ if .Data.Parameters.Send }}
        {{ .Tools.StreamActionEvent "my-action" }}
    {{ end }}

Passing data with the action

We can also pass data with the action trigger. We can then read the data on the possible streamed page and change the rendered content based on the input.

The data should be in json format but the structure is custom.

With forms

With the regular forms data manipulation is limited. Also note that everything sent like this will be visible in the html code and can be adjusted by the user.

<form method="post">
    <input type="hidden" name="AutomatApi.StreamActionEvent.Name" value="my-action">
    <input type="hidden" name="AutomatApi.StreamActionEvent.Data" value=`{"key": "value"}`>
    <button type="submit">Trigger action</button>
</form>

Template action

All template sent data will be hidden, and we can safely add data from session or other values that we do not want the user to edit or see.

    <form method="post">
        <div class="form-input">
            <label for="name">Name</label>
            <input name="Name" id="name" value="{{ .Data.Parameters.Name }}">
        </div>

        <div class="form-input">
            <label for="send">Action</label>
            <input name="Send" id="send" value="{{ .Data.Parameters.Send }}">
        </div>

        <button type="submit" class="form-button">Submit</button>
    </form>

    {{ if .Data.Parameters.Send }}

        {{ $data := printf 
            `{"type": "%s", "name": "%s"}` 
            .Data.Parameters.Send 
            .Data.Parameters.Name
        }}

        {{ .Tools.StreamActionEvent "my-action" $data }}

    {{ end }}

Reading action data

We can read the data that is being passed with the actions and use it to change the data that we render.

We assume the data is:

{
  "name": "Some user",
  "content": "some text" 
}

The get method here is the same as elsewhere with dynamics.

<h4> {{ .Data.Stream.Get "name" }} </h4>
<p>
<!-- Render server time when content is 'clock' and the content itself when not -->
{{ if eq (.Data.Stream.Get "content").String "clock" }}
    {{ dtCurrent }}
{{ else }}
    {{ .Data.Stream.Get "content" }}
{{ end }}