Using javascript variable or function inside caml query on sharepoint list view page with sharepoint designer

Question

I am trying to put custom JavaScript variable or function into the sharepoint's list view page, inside caml query, using sharepoint designer

for example:

i am opening list view i want to modify. than i am adding custom javascript code which will be executed on page load and i want to use value, returned from this function, inside caml query:

<View Name="{SOMENAME}" MobileView="TRUE" Type="HTML" DisplayName="MyGroups" Url="SOMEURL" Level="1" BaseViewID="2" ContentTypeID="0x" ImageUrl="/_layouts/15/images/issuelst.png?rev=23" >
        <Query>
            <OrderBy>
                <FieldRef Name="ID" Ascending="FALSE"/>
            </OrderBy>
            <Where>
                <Eq>
                    <FieldRef Name="Group_x0020_Name"/>
                    <Value Type="Text">BPA</Value>
                </Eq>
            </Where>
        </Query>
        <ViewFields>
            <FieldRef Name="LinkTitle"/>
        </ViewFields>
        <RowLimit Paged="TRUE">10</RowLimit>
        <Aggregations Value="Off"/>
        <JSLink>clienttemplates.js</JSLink>
        <XslLink Default="TRUE">main.xsl</XslLink>
        <Toolbar Type="Standard"/>
    </View>

so i want to put variable or function here:

<FieldRef Name="Group_x0020_Name"/>
<Value Type="Text">HERE VARIABLE OR JAVASCRIPT</Value>

Is it possible?

I want to have listview based on currently logged in user's group, and since i want to get the currently logged in user's group name from custom list, not from the permission's group, i have no idea how to pass returned value from function executed during page.onload to the listview. The only solution i have found was to use HTML From Web Part, connect this form to my listview and then onload pass value as parameter to the form and trigger postback function. but since postback function trigers page reload, it falls into the endless loop (page load > form submission>page load>form submission..

Answer 1

Use standard SP2013 - CSR - Client Side Rendering to get your "group" info and display the View

https://www.codeproject.com/articles/620110/sharepoint-client-side-rendering-list-views

Answer 2

Thanks for the replay. It is great article and big thanks to both of you. But what about i am tinkering right now is, can't remove extra items correctly from view. for exmaple:

(function() {
function listPreRender(renderCtx) {
    var rows = renderCtx.ListData.Row;
    var i = rows.length;
    while (i--) {
        var del = rows[i]['Group_x0020_Name'] === 'BPA';
        if (del) {
            rows.splice(rows[i], 1);
        }
    }
    renderCtx.ListData.LastRow = rows.length;
}
function registerListRenderer() {
    var context = {};
    context.Templates = {};
    context.OnPreRender = listPreRender;
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(context);
}
ExecuteOrDelayUntilScriptLoaded(registerListRenderer, 'clienttemplates.js');
})();

sometimes removes items from view sometimes no. And despite fact that no item is shown in view, column filter is still viewable. here is image link