Custom UI macro for formatter in tickets

[anidhya_gupta]

In the code, below the second g:evaluate is not picking the value of "flow_label" variable. I am trying to build to build a formatter which will have steps and those steps have some sub steps under it which can be opened using a toggle button

<?xml version="1.0" encoding="utf-8" ?>

<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:g2="null" xmlns:j2="null">

    <link rel="stylesheet" type="text/css" href="styles/process_flow_formatter.cssx" />

    <tr>

        <td colspan="2" width="100%" nowrap="true">

            <div>

                <table cellpadding="0" cellspacing="0" style="width: 100%; border:none; border-collapse:collapse" class="process_flow_formatter" role="listbox">

                    <tr role="presentation">

                        <g2:flow_formatter var="jvar_flows" table="$[${ref_parent}.getRecordClassName()]" current="$[${ref_parent}]"/>

                        <g2:evaluate var="jvar_width" jelly="true">

                            var size = jelly.jvar_flows.size();

                            if (size)

                            Math.floor(100 / size);

                        </g2:evaluate>

                        <j2:forEach items="$[jvar_flows]" var="jvar_flow">

                            <g2:set_if var="jvar_step_status" test="$[jvar_flow.getParameter('state') == 'current']" true="step" false="false" />

                            <td style="width:$[jvar_width]%" class="process_flow $[jvar_flow.getParameter('state')]" role="option" aria-current="$[jvar_step_status]" aria-selected="$[jvar_flow.getParameter('state') == 'current']">

                                <!-- Step label and toggle icon -->

                                <a role="presentation" aria-disabled="true" aria-label="$[jvar_flow.getLabel()]">

                                    $[jvar_flow.getLabel()]

                                </a>

                                <j2:set var="flow_label" value="$[jvar_flow.getLabel()]"/>

                                <g2:evaluate var="step_sys_id" jelly="true">

                                    var gr = new GlideRecord("sys_process_flow")

                                    gr.addQuery("table","sn_bom_financial_task");

                                    gr.addQuery("label","$[flow_label]")

                                    gr.query();

                                    if (gr.next()) {

                                    gr.getUniqueValue();

                                    } else {

                                    "";

                                    }

                                </g2:evaluate>

                                <span onclick="toggleSub('$[step_sys_id]')" style="cursor:pointer; margin-left: 6px;">&#x25BC;</span>

                                <!-- Substeps list -->

                                <ul id="sub_$[step_sys_id]" style="display:none; padding-left: 15px; margin-top: 4px;">

                                    <g2:evaluate var="jvar_substeps" jelly="true" object="true">

                                        var subs = [];

                                        var gr = new GlideRecord('u_substeps');

                                        gr.addQuery('u_parent_flow', jelly.step_sys_id);

                                        gr.orderBy('u_order');

                                        gr.query();

                                        while (gr.next()) {

                                        subs.push(gr.getDisplayValue('u_name'));

                                        }

                                        subs;

                                    </g2:evaluate>

                                    <j:forEach items="$[jvar_substeps]" var="jvar_substep">

                                        <li style="list-style-type: disc; color: #000;">$[jvar_substep]</li>

                                    </j:forEach>

                                </ul>

                            </td>

                            <!-- Chevron cell -->

                            <td width="16" height="100%" aria-hidden="true">

                                <img style="margin:0; padding:0px;" alt="" aria-hidden="true" src="images/chevron_$[jvar_flow.getParameter('state')]_$[jvar_flow.getParameter('next_state')].pngx" />

                            </td>

                        </j2:forEach>

                    </tr>

                </table>

            </div>

        </td>

    </tr>

    <script>

        function toggleSub(id) {

            var ul = document.getElementById('sub_' + id);

            if (ul) {

                ul.style.display = (ul.style.display === 'none') ? 'block' : 'none';

            }

        }

    </script>

</j:jelly>

[Ankur Bawiskar]

@anidhya_gupta 

try this

<g2:evaluate var="step_sys_id" jelly="true">
var gr = new GlideRecord("sys_process_flow")
gr.addQuery("table","sn_bom_financial_task");
gr.addQuery("label", jelly.flow_label);
gr.query();
if (gr.next()) {
gr.getUniqueValue();
} else {
"";
}
</g2:evaluate>

If my response helped please mark it correct and close the thread so that it benefits future readers.

[anidhya_gupta]

I  tried this previously, but it did not work

[Ankur Bawiskar]

@anidhya_gupta 

try to use phase 1 jelly everywhere and then see

If my response helped please mark it correct and close the thread so that it benefits future readers.

[anidhya_gupta]

<?xml version="1.0" encoding="utf-8" ?>

<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide">

    <link rel="stylesheet" type="text/css" href="styles/process_flow_formatter.cssx" />

    <tr>

        <td colspan="2" width="100%" nowrap="true">

            <div>

                <table cellpadding="0" cellspacing="0" style="width: 100%; border:none; border-collapse:collapse" class="process_flow_formatter" role="listbox">

                    <tr role="presentation">

                        <g:flow_formatter var="jvar_flows" table="$[${ref_parent}.getRecordClassName()]" current="$[${ref_parent}]"/>

                        <g:evaluate var="jvar_width" jelly="true">

                            var size = jelly.jvar_flows.size();

                            if (size) Math.floor(100 / size);

                        </g:evaluate>

                        <g:forEach items="$[jvar_flows]" var="jvar_flow">

                            <g:set_if var="jvar_step_status" test="$[jvar_flow.getParameter('state') == 'current']" true="step" false="false" />

                            <!-- Step Cell -->

                            <td style="width:$[jvar_width]%" class="process_flow $[jvar_flow.getParameter('state')]" role="option" aria-current="$[jvar_step_status]" aria-selected="$[jvar_flow.getParameter('state') == 'current']">

                                <!-- Step label and toggle icon -->

                                <a role="presentation" aria-disabled="true" aria-label="$[jvar_flow.getLabel()]">

                                    $[jvar_flow.getLabel()]

                                </a>

                                <g:set var="flow_label" value="$[jvar_flow.getLabel()]"/>

                                <g:evaluate var="step_sys_id" jelly="true">

                                    var gr = new GlideRecord("sys_process_flow");

                                    gr.addQuery("table", "sn_bom_financial_task");

                                    gr.addQuery("label", jelly.flow_label);

                                    gr.query();

                                    if (gr.next()) {

                                        gr.getUniqueValue();

                                    } else {

                                        "";

                                    }

                                </g:evaluate>

                                <span onclick="toggleSub('$[step_sys_id]')" style="cursor:pointer; margin-left: 6px;">&#x25BC;</span>

                                <!-- Substeps list -->

                                <ul id="sub_$[step_sys_id]" style="display:none; padding-left: 15px; margin-top: 4px;">

                                    <g:evaluate var="jvar_substeps" jelly="true" object="true">

                                        var subs = [];

                                        var gr = new GlideRecord('u_substeps');

                                        gr.addQuery('u_parent_flow', jelly.step_sys_id);

                                        gr.orderBy('u_order');

                                        gr.query();

                                        while (gr.next()) {

                                            subs.push(gr.getDisplayValue('u_name'));

                                        }

                                        subs;

                                    </g:evaluate>

                                    <j:forEach items="$[jvar_substeps]" var="jvar_substep">

                                        <li style="list-style-type: disc; color: #000;">$[jvar_substep]</li>

                                    </j:forEach>

                                </ul>

                            </td>

                            <!-- Chevron cell -->

                            <td width="16" height="100%" aria-hidden="true">

                                <img style="margin:0; padding:0px;" alt="" aria-hidden="true" src="images/chevron_$[jvar_flow.getParameter('state')]_$[jvar_flow.getParameter('next_state')].pngx" />

                            </td>

                        </g:forEach>

                    </tr>

                </table>

            </div>

        </td>

    </tr>

    <script>

        function toggleSub(id) {

            var ul = document.getElementById('sub_' + id);

            if (ul) {

                ul.style.display = (ul.style.display === 'none') ? 'block' : 'none';

            }

        }

    </script>

</j:jelly>

I tried this code, but now i am getting this error: