Move widgets at runtime

I am trying to implement the following layout. I have vertical tabs on the left. At design time the developer will fill in the content for the "summary" and "other content" (these are just containers which I can identify by class). At run time I want these to be positioned with the tab LIs - with "summary" to be the first child LI of the tabs UL, and the "other content" to be the last child. I have tried using JQuery (using the HTMLSnippet) and it works the first time, but after moving away from the page and coming back the "summary" and "other content" disappear (look to be removed from the DOM completely) - I can see them flash on the page and then they disappear. I could try harder to do with CSS alone - but I would prefer to do this if it can work. I have also tried with Refresh on Context Change and Context Update - but this doesn't make any difference. Any suggestions?   Update:  Here's the actual layout I am trying to do. The "summary" will most likely be a few details from the main content of the page, with more specific related content in each tab. The tabs won't be dynamic (at this stage). The  "other content" will likely be some sort of stats/charts/progress details.      
2 answers

Hi Chris,

I've created something similar on a recent project. In order to have context in your navigation tree, you have to build it yourself rather than using the standard mendix navigation items. I'll do my best to recreate your screenshot.


The first step would to build a page layout that would fix this structure. I made a slight change the default atlas page layout to add a second context for the custom sidebar navigation.

The next step would to set your page to use this layout and build the custom sidebar using a dataview (to give it context), some tables (to create the structure), and use microflow buttons rendered as links (to be used to navigate between pages). Your page could look something along the lines as this. You can also add a third table to display your "other content"

Next step would to style the custom sidebar to look like navigation items. For this example I did not do anything custom, but just used two classes that were already included in the atlas ui theme.

The first class would be table-spaceless (for the first table that will be displaying information related to the page).

The second table would need the class mx-navigationtree to make it look like a navigation tree.


Once you've done all that, your page could look similar to this


With some more styling, you can make it look similar to what you already have. 



I have a couple of questions:

  1. when you mentioned layout, do you mean you want to create this in a Mendix Layout (which is a particular tool in the Modeler), or that you want to build a page that looks like this?
  2. Will the tabs be dynamic (i.e. different number, labels or functionality from on screen to the next)?


From what you have described, you could accomplish this in the Modeler without any CSS or JQuery, I think.  That might look like this:

- A Mendix Layout that calls a Menu in the sidebar, screenshot below:

- The Menu could look like this:

Note that these menu items could call a page, invoke a microflow, etc.  For purposes of this example, I haven't configured this.

The resulting page would look like this:

Again, as its an example, I haven't worked on styling, but I think you'll get the idea.

This approach would work if you will have the same set of Tabs on each page.  If the Tabs need to be dynamic, there are other approaches that could achieve that.

Hopefully that will give you some ideas about how to achieve this.