Feature request to expand all and collapse all on demographics page (Work In Progress)

OpenEMR Development Data Analysis
#1

I am not for sure the reason someone would want this ability since the page remembers the way a user sets it but. We are just the programmers, right?

So, I wanted to share what I have done in hopes that someone can take it to the next step.

function toggleAllIndicator(target) {
    let sections = [
        "billing_ps_expand",
        "demograhics_ps_expand",
        "pnotes_ps_expand",
        "patient_reminders_ps_expand",
        "disclosures_ps_expand",
        "amendments_ps_expand",
        "labdata_ps_expand",
        "billing_ps_expand",
        "vitals_ps_expand"
    ];

    sections.forEach( element => {
        toggleIndicator(target,element)

    });

}
    <div style='margin-top:10px' class="main"> <!-- start main content div -->
        <a href="#" id="collapse-expand" class="" onclick="toggleAllIndicator(this)">Expand All</a>

This partially works.
It will expand all the sections on the screen but the demographics. What I was trying to do was to leverage the tech already on the page. Since the manual toggle worked, I thought what if the system just looped through the toggle and that does work. But it is a one-way toggle. It will only expand. It will not collapse.

Let me know what you think @visolve-116

#2

If you plan to retain individual expand/collapse then instead of ToggleAll you would want expandAll and collapseAll.

From programming perspective, in jquery world classes are your little helpers.

<a class="toggle-src" data-lnk="dem">...</a>
<div class="toggle-tgt" data-lnk="dem">...</div>

This will permit you to hide/show all as

$(“div.toggle-tgt”).addClass(“d-none”);
$(“div.toggle-tgt”).removeClass(“d-none”);

Cheers.

1 Like
#3

@mdsupport

They don’t want to hide the divs. They want it to work like the encounter page works. That page was structured totally different than the demographics page so could deploy the same code from that page to the dashboard. They do want to retain the individual collapse and expand. That is why I was looking for a way to programmatically trigger the expand and collapse that is already in the page.

I will try out what you have suggested.

Thanks!

#4

It’s unusual to require all tabs be toggled. If you had item 1,3,4 open and 2,5 collapsed, your code will result in 1,3,4 closed and 2,5 opened. Obviously I missed something.

Doesn’t encounter do jquery-ui tabs vs highly complex load mechanism of demographics. Not sure how mere expand/collapse does anything. But if it helps, you can look at our approach.

Best.

1 Like
#5

I am with you on not understanding the purpose behind wanting the ability to expand all and collapse all on the demographics page.
I had the same thinking about the current functionality and how this would interfere with current design flow of the page. In actuality what happens is that the page expands only. So, if some are collapsed and some expanded. On toggleAll, it only expands. So toggleAll does not really toggle both ways.

It does one odd thing where it does not expand the demographics tab no matter what.

I looked at the suggested approach to break up the demographics page into more manageable pieces. It is great to see someone take that project on. It seems long ago some started down that path of creating fragments but then they vanished so the project never got fully implemented in my opinion.

You guys are doing some great work!

#6

hi @juggernautsei, think current ui is leaning toward a simplified collapse expand experience as evidenced in this recent work:

1 Like