Skip to main content

The VertiGIS Community has been moved to the VertiGIS Support Center >>

Minimize / restore workflow panel

Berend Veldkamp

Hi,

I have an application in Web, which is for a large part just an administrative interface, and the map itself is of less importance. The workflow panel is in a Tabs widget, which is about 2/3 of the total width, the map 1/3

In some cases, a user still needs to select a location on the map, so it would be nice if I could temporarily make the map larger (and the workflow panel smaller of course).

I played around with the ui.deactivate and ui.activate commands, but it looks as if the workflow just stops after its panel is deactivated.

Is something like this possible? Or does anyone have an out-of-the-box idea about how to solve this?

0

Comments

3 comments

Date Votes
  • Rafael Edora

    If you wrap the Tabs component in a Panel component, you can enable maximize/minimize buttons that won't interrupt the workflow.

    0
  • Berend Veldkamp

    Hi Rafael Edora this is what we have now, but users still have to click on those buttons. Is there a way to do this from a workflow automatically? I don't believe there's a command for that, right?

    0
  • Zack Robison
    • Edited

    No to the existence of a command for that, but I got something for you that you can run in OOB Workflow and depending on your app it can be relatively straightforward:

    1. Run Operation viewer.get-current-layout > something like $layout
    2. Create Value $layout.result.selectById('panel-abcd1234') > $leftPanel
    3. Evaluate Expression $leftPanel.result.attributes.set('width', 80) (units are em by the way, haven't needed to try to force % yet but haven't had any luck with it so far)

    This works with the min/max buttons Rafael Edora mentioned, but it doesn't work well if you both a) have the Columns element containing the two as resizable and b) you've resized it.  Until the resize-handle is touched though, the method above works.  Clicking that resizer changes the flexbox containing the elements though and unfortunately while there is a way if you need to get at that too, it's a bit more "fun"...

    So, once that resizer-handle is clicked the components on either side of it automatically get their flex style updated which takes precedence over the width setting.  As I haven't yet found the .style property of that DOM element exposed by the layout node (it's gotta be in there somewhere, right...?), I've needed to get at the DOM element through the HTML (instead of the XML-based component stuff).  It's uglier and certainly more questionable, but you can do this through the UI service which that layout object is bound to:

     $layout.result._uiService._reactRoot._internalRoot.containerInfo.querySelector('[data-layout-id="panel-abcd1234"]').style.flex = 0 0 auto 

    If you're already doing this, then you might as well set width like this too instead of through the (probably safer) layout node I described at the top here; I use the flex property so "0 0 500px" or "0 0 80%".

    Regardless of how you skin that cat, you probably only need to update one element and the other will resize itself, even though its element flex-basis, -grow and -shrink styles remain the same.  I don't know much about CSS, but the height & width of the other element in the box seem to update just fine when you merely update the flex content of the other element.  Haven't tried this with multiple columns or rows yet, if you do please let me know how it goes.

    1