How to make the application layout control dynamic in Xpages

Question

I have been working on making the applicationLayout Custom Control more dynamic, so I can more build and extend Xpages apps more easily.

To that end I am now using the switch facet, which helps immensely.

I also want to soft code the Application Links, Title Links, and Navigation Entries.

I think I can build a data structure in which I just put the values I want and the majority of the app layout is loaded from this.

So I will have an array of appliances in a scope variable, like so:

“App 1”, “App 2”,”App 3” etc.

Then for the Title’s I will have to have something like this:

“App 1”,”Title Bar 1”,”Title Bar 2”,”Title Bar 3”, “App 2”,”Title Bar 1”,”Title Bar 2”,”Title Bar 3”,”Title Bar 4" “App 2”,”Title Bar 1”,

So the first Application Link will three title bars, the second 4, etc.

Then for the nav:

“App 1”,”Title Bar 1”,”Nav 1,”Nav 2" “App 1”,”Title Bar 1”,”Nav 1,”Nav 2”,”Nav 3"

and so on.

If I do this then it will be very easy I think to layout an app.

My question is what data structure is best to use? And should I use three arrays or on 3-dimensial array?

=================================================================== Knut's answer is great, but I cannot seem to loop through the array.

var lenArr:Integer = sessionScope.apps.length;
for (i=0; i < lenArr;++i)
{sessionScope.apps[i].app}

When I do a length on the session.Scope variable it returns a 3, but when I loop through the array it returns null when i=2. There are only 2 items in my array, at least there should be. Here is my code for the sessionScope.

<?xml version="1.0" encoding="UTF-8"?>
<xp:view
    xmlns:xp="http://www.ibm.com/xsp/core"
    rendered="false"
    viewState="nostate"
    xmlns:xc="http://www.ibm.com/xsp/custom">
    <xp:this.afterPageLoad><![CDATA[#{javascript:sessionScope.apps = 
     [
      { app: "xpApp1",
        titleBars: [
                    {titleBar: "ccApp1Title1",
                     navs: ["ccNavApp11Title1Nav1"]
                    },
                    {titleBar: "ccApp1Title1",
                     navs: ["ccNavApp11Title1Nav2"]
                    }
                   ]
      },
     { app: "xpApp2",
        titleBars: [
                    {titleBar: "ccApp2Title1",
                    navs: ["ccNavApp21Title1Nav1"]
                    },
                    {titleBar: "ccApp2Title2",
                    navs: ["ccNavApp21Title2Nav1"]
                    }
                     {titleBar: "ccApp2Title3",
                    navs: ["ccNavApp21Title3Nav1"]
                    }
                   ]
      },
    ];
//Now set the selected values
sessionScope.appSelected = "xpApp1";
sessionScope.titleSelected = "ccApp1Title1";
sessionScope.navSelected = "ccNavApp11Title1Nav1";
var uAgent = context.getUserAgent().getUserAgent();
if((uAgent.match("iPhone") !== null || param.platform=="iphone") ||
(uAgent.match("Android") !== null || param.platform=="android") ||
uAgent.match("iPad") !== null){
context.redirectToPage("/mobile.xsp", true);
}else{
context.redirectToPage("/xpApp1.xsp", true);    
}   }]]></xp:this.afterPageLoad>
</xp:view>

What am I doing wrong?

Bryan, don't set the last comma in sessionScope.apps definition. It creates a third empty element. Definition's end should look like this: } ]; — Knut Herrmann

Knut Herrmann Knut Herrmann · Accepted Answer · 2015-07-06T14:36:09

Use JavaScript's arrays and objects to define your application structure

sessionScope.apps = 
     [
      { app: "App 1",
        titleBars: [
                    {titleBar: "Title Bar 1",
                     navs: ["Nav 1", "Nav 2", "Nav 3"]
                    },
                    {titleBar: "Title Bar 2",
                     navs: ["Nav 4", "Nav 5", "Nav 6"]
                    }
                   ]
      },
      { app: "App 2",
        titleBars: [
                    {titleBar: "Title Bar 3",
                     navs: ["Nav 31", "Nav 32", "Nav 33"]
                    },
                    {titleBar: "Title Bar 4",
                     navs: ["Nav 41", "Nav 42"]
                    }
                   ]
      }
    ];

You can access the first app with

sessionScope.apps[0].app

the first app's first titleBar with

sessionScope.apps[0].titleBars[0].titleBar

and first app's first titleBar's second nav with

sessionScope.apps[0].titleBars[0].navs[1]

Use a for loop or forEach to get all elements of an array.

How to make the application layout control dynamic in Xpages

1 Answers