Getting a panel out of the info for all panels

[webcliq]

Dear Stefan,

Imagine you run a jsPanels.getPanels() when there are two or three panels open. You get an array of panels. In your examples, you demonstrate what the function returns and you also show how you can obtain the id of each Panel.

What I wanted to do was, something like, _let currentpanel = panelIds[0];_ and then_currentpanel.resize({width: x, height: y})_ but I have tried a couple of ways of creating a key for the PanelIds array, without success, in order to get an instance of a panel

Or would it be possible to get a panel using its ID as in jsPanel.getPanel('jsPanel-dataform");

Your thoughts please.

I promise to say thankyou and tell you it is working if you do a little patch as quickly as you did the last one!!

[Flyer53]

Hi again, When you just need a single panel whose ID attribute value is known simply use

document.querySelector("#jsPanel-dataform").resize({width: x, height: y});

Would that work for you? Or is there any reason you have to use jsPanel.getPanels();?

[Flyer53]

You also could assign the panel to a variable from the beginning

let datapanel = jsPanel.create({
    /* panel config */
});
// later in code:
datapanel.resize({width: x, height: y});

[webcliq]

Thank you Stefan,

Your suggestions clarified my mind.

The instruction, document.querySelector("#jsPanel-dataform") has become my jsPanel.getPanel(). I use jQuery as I am used to it alongside Vue. I had tried var thispanel = $("#jsPanel-dataform"); but that had not worked. Thinking about it this morning after reading your two messages, I am realising that jsPanel is NOT a jQuery extension, so it would be completely arbitrary that it should work. None the less the straight Javascript does work, so problem solved.

jsPanel left to its own devices, sets a unique ID for each instance of the Panel. So if I overrode it, I would have to maintain the matrix in my program. I may have to do that in the future but for the moment a unique instance ID is fine, especially now as I can get a handle on any panel through the internal ID. At present I set the internal Div ID by what type of content is found in the div, i.e. a table (datatable) or a form (dataform). However this approach is going to have limitations, if I want to really develop this type of GUI for my administration pages.

I see no fundamental reason why we should not treat the browser window as a desktop. I have seen various such as OS.js and I have always liked the concept. In contuinues what Users are used on the desktop or laptop. I am not visualising that my Admin desktop could ever be used on a mobile phone. So I have had the courage to say that this version of Cliqon V5 will have a menu bar at the top and a footer and all activities will appear in jsPanel windows. You saw a mockup last time.

Thanks to you solution I can now have multiple Panels on the screen and treat them like popup windows. I trying not to use any other panel or modal and I have replaced Noty alerts with jsPanel alerts.

I am going to hit a problem when I want to do something that would be almost impossible on a non-desktop, that is have two datatables open at the same so that I can cross reference information. I appreciate that one can do this with a fixed grid dashboard but that is not the direction in which I want to go.

So maybe in Version 5.1, I will have to maintain a matrix of unique Div IDs, but just at the moment, the system works well enough.

Once again, thank you for your suggestion.

[Flyer53]

Hey Mark,

My pleasure ... and thanks a lot for the detailed information concerning your project. That's very welcome because the vast majority of jsPanel use cases are not publicly accessible. So I never really know how it's used.

Well, up to and including jsPanel version 3.x it was a jQuery plugin. But I wanted to get rid of all dependencies. I'm a very big fan of jQuery though. Without jQuery I never would have started some javascript programming on my own.

You still could use jQuery to access a panel. But you have to remember that jQuery's $() function returns an object, not the HTML element itself. You would need to use $("#jsPanel-dataform")[0] to get the panel itself. However, I don't see how this makes it any better ...