Live Input Macros

Working Examples for REST API

On this page:

  1. Display all Page Variables

Display all Page Variables

This is a simple example showing how to retrieve and update the Macro values using the Page Variable data from the various macros

Page Content

First, add multiple Live macros on the page, including unique Page Variable identifiers in each of the macros.

Then add the following HTML Macro.

Macro HTML

<script>
    $(document).ready(function()
    {
        getPageVariables();

        // Get all the page variables
        function getPageVariables()
        {
            AJS.$.ajax(
            {
                type:   "GET",
                url:    AJS.params.baseUrl + "/plugins/servlet/liveinput/3/pageVariables",
                data:  
                {
                    pageId:     AJS.params.pageId
                },
                success: function(data, textStatus, error)
                {
                    CreateTable(data);
                },
            });
        }

        function CreateTable(data)
        {
            var html = CreateHeader();
            for(var key in data)
            {
                html = html + AddRow(key, data[key].value, data[key].type, data[key].options);
            }
            var div = document.getElementById('var-table');
            div.innerHTML = html;
       }
        
        function CreateHeader()
        {
            return `<table class="confluenceTable"> 
                        <tr> 
                            <th class="confluenceTh">Page Variable</th> 
                            <th class="confluenceTh">Current Value</th> 
                            <th class="confluenceTh">Macro Type</th>
                            <th class="confluenceTh">Edit/Select new value</th>
                            <th class="confluenceTh">Submit and Refresh</th>
                        </tr>`;
        }

        function AddRow(key, value, type, options)
        {
            var html;
            if(options)
            {
                // provide dropdown selector
                html = `<select id="select-${key}">`;
                options = options.split(';');
                for(var k in options)
                {
                    html = html + `<option>${options[k]}</option>`;
                }
                html = html + `</select>`;
            } else {
                // provide text input
                html = `<input id="select-${key}">`;
            }
            return `<tr>
                        <td class="confluenceTd">${key}</td>
                        <td class="confluenceTd">${value}</td>
                        <td class="confluenceTd">${type}</td>
                        <td class="confluenceTd">${html}</td>
                        <td class="confluenceTd"><button class="aui-button update-data" type="button" data-key="${key}" data-type="${type}">Submit</button></td>
                    </tr>`;
        }
        
        function setPageVariable(pageVar, val, macroType)
        {
            AJS.$.ajax({
                type:   "POST",
                url:    AJS.params.baseUrl + "/plugins/servlet/liveinput/3/pageVariables",
                data: {
                    pageId: AJS.params.pageId,
                    variable: pageVar,
                    value: val,
                    type: macroType,
                    email: "false"
                },
                success: function(data, statusText, xhr)
                {
                    console.log("DONE!");
                    window.location.reload();
                }
            });
        }

        // Handler for button clicks
        $(document).on('click', '.update-data', function()
        {
            var pageVar = $(this).attr("data-key");
            var value = $('#select-'+pageVar).val();
            var type = $(this).attr("data-type");
            setPageVariable(pageVar, value, type);
        }); 

    });
</script>
<div id="var-table"></div>