Get record details based on UI action in UI page

[ShubhamG8662710]

Hello,
I am trying to get record details based on my custom table form in workspace. I have 4 fields on my form, last name, first name, gender and dob. If a user enters value, there is a ui action checks the user info from my custom table based on the field value and opens a ui page displaying the records. I created the ui page and i did call it and i can see the ui page as a modal but info is not there. 
Can someone help me with the logic?

[GopikaP]

Hi @ShubhamG8662710 , I did my best since Show Frame was new to me, but I managed to populate the table with data. I've included a sample code and hope you can make the necessary adjustments.

1. In UI Action Workspace Client Script - 

function onClick(g_form) {
    var firstName = 'Abel';
    // Build query parameters for passing to the UI Page
    var params = {
        first_name: firstName,
    };
    // Convert params object to URL query string
    var queryString = Object.keys(params)
        .map(key => key + '=' + encodeURIComponent(params[key]))
        .join('&sysparm_');
    g_form.addErrorMessage(queryString);
    var uipageID = "b80c0f41c3a0ae1034e250e1b401313f";
    g_modal.showFrame({
        url: '/ui_page.do?sys_id=' + uipageID +'&sysparm_'+queryString,
        title: 'Contender Search Results',
        size: 'xl',
        height: 500
    });
}​

• UI Page HTML -

<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
    <g:evaluate var="jvar_name" jelly="true" object="true">
        var sysparm_name = gs.action.getGlideURI().getMap().get('sysparm_first_name');
        sysparm_name;
    </g:evaluate>
    <g:evaluate jelly="true">
        var contenders = [];
        var userGR = new GlideRecord('sys_user');
        userGR.addEncodedQuery("active=true");
        userGR.addEncodedQuery('nameSTARTSWITH'+jelly.jvar_name)
        userGR.query();
        while (userGR.next()) {
        contenders.push({
        name: userGR.getValue("last_name") + ", " + userGR.getValue("first_name"),
        email: userGR.getValue("email"),
        calendar_integration: userGR.getDisplayValue("calendar_integration"),
        user_type: userGR.getValue("u_usertype"),
        mobile_phone: userGR.getValue("mobile_phone"),
        preferred_language: userGR.getValue("preferred_language")
        });
        }
    </g:evaluate>
    <div class="container">
        <h2>${jvar_firstName}</h2>
        <table class="table table-striped">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Email</th>
                    <th>Calendar Integration</th>
                    <th>User Type</th>
                    <th>Mobile Phone</th>
                    <th>preferred Language</th>
                </tr>
            </thead>
            <tbody>
                <j:forEach var="jvar_obj" items="${contenders}">
                    <tr>
                        <td>${jvar_obj.name}</td>
                        <td>${jvar_obj.email}</td>
                        <td>${jvar_obj.calendar_integration}</td>
                        <td>${jvar_obj.user_type}</td>
                        <td>${jvar_obj.mobile_phone}</td>
                        <td>${jvar_obj.preferred_language}</td>
                    </tr>
                </j:forEach>
            </tbody>
        </table>
    </div>
</j:jelly>​

I have not added any client scripts or processing scripts. Please see the results: (I am only returning users whose name starts with Abel which is passed through the URL from the UI action)

If I remove that condition -  

[ShubhamG8662710]

Thanks a lot! I did achieve it somehow haha but client wanted very OOTB approach and since this was high customization, i ended up finding a workaround. But thanks for this, this solution is great!