Show selection bar hidden - Mashup

[Qlikuser09]

<div Class ="document-header">

<div id="CurrentSelections" class="qvobjects">

<div class="current-selections-placeholder">

<span>Connect to app to see Selection Toolbar</span>

</div>

</div></div>

<div class="tw-w-full tw-h-full tw-flex tw-flex-col">

<div class="">

    <nav id="sidebar" class="tw-fixed tw-h-screen tw- tw-bg-white tw-z-10 w-pin-y tw-shadow-md tw-w-full sm:tw-w-1/3 lg:tw-w-1/4 tw-sidebar-inactive tw-shadow-lg">

        <div class="tw-text-lg tw-h-16 tw-px-6 tw-mb-2 tw-bg-grey-lighter tw-py-5 tw-border-grey-light tw-border-b tw-text-grey-darkest "></div>

        <ul class="list-reset">

                        <li class="hover:tw-bg-teal">

                <a id="menuId68" data-selection="" data-qcmd="68" onclick="changeDirection(this)" class="tw-cursor-pointer tw-flex tw-block tw-px-6 tw-py-5 tw-w-full tw-text-grey-darkest tw-font-bold hover:tw-text-white hover:tw-bg-green-500 tw-text-left tw-text-sm tw-no-underline">

                    <span class="fa fa-band-aid tw-self-center tw-mr-2"></span>

                    <div class="tw-self-center">HAI Overview</div>

                </a>

            </li>

                        <li class="hover:tw-bg-teal">

                <a id="menuId69" data-selection="" data-qcmd="69" onclick="changeDirection(this)" class="tw-cursor-pointer tw-flex tw-block tw-px-6 tw-py-5 tw-w-full tw-text-grey-darkest tw-font-bold hover:tw-text-white hover:tw-bg-green-500 tw-text-left tw-text-sm tw-no-underline">

                    <span class="fa fa-hospital tw-self-center tw-mr-2"></span>

                    <div class="tw-self-center">Page 1 overview</div>

                </a>

            </li>

                    </ul>

    </nav>

    <aside id="navbar" class="tw-text-lg tw-h-16 tw-p-4 tw-bg-grey-lighter tw-shadow-md tw-flex tw-flex-row">

        <button id="menu-switch" class="tw-focus:outline-none tw-z-10">

            <span class="fa fa-bars"></span>

        </button>

        <div class="tw-flex tw-w-full tw-bg-grey-light">

            <div id="Direction" class="h5 tw-hidden md:tw-block tw-w-3/12 tw-pt-1 tw-pl-4">

                Page 2 Overview

            </div>

            <div class="tw-flex-1">

            </div>

            <div class="tw-w-7/12 tw-content-end">

                <div id="CurrentSelectionsApp0" class="qvobjects currentSelectionApp" style="position:relative; top:0; left:50; width:100%; height:38px;">

                </div>

            </div>

        </div>

    </aside>

</div>

this is my Header bar , this code just adds a space in hte header and not the selection bar

[alex_colombo]

Hi @Qlikuser09, can you please post your JS file. If you dont see the selection bar it means that you are not loading selection bar from Qlik Sense App. Are you using Capability APIs and require.js?

[Qlikuser09]

Attached is the two JS scripts that i am using . 

when i am selecting the 

only empty space gets added at the top, and not the actual selections made within the app.

i need the below selection bar to be show on top , 

[alex_colombo]

Please inspect the DOM and check if CurrentSelections object is there but without correct style (maybe if you add height you could see the bar). Show selections bar flag add to your html and js the code for getting the current selections bar automatically.
I noticed in your code that you read the CurrentSelections object twice and you put into CurrentSelections and CurrentSelectionsApp0 html objects. Please refer current selections bar to only one html element.

[Qlikuser09]

Hi @alex_colombo  thanks for the explanation , but i have the current selection added to the HTML , please see my attached data model

[alex_colombo]

What I mean is that you have to inspect HTML with browser developer tool and check if you have something like below under CurrestSelections HTML object. If you have, selections bar is loaded correctly from Qlik app and you have some css errors