Create dash node dynamically on XPAGES

2019-09-09 11:44发布

问题:

I recently installed the Extension Library containing objects responsive In particular I was using the Dashboard component. I was trying to figure out how to dynamically create DashNode with programmatically.

There is a mode for to do this activity from SSJS ?

回答1:

I was doing some experimentation recently for dynamically creating a Carousel control. I'll post the code that achieved it below, and it should give you the starting point for what you need to do to create a Dashboard dynamically. If you can't figure it out, or have further questions, then I may be able to look specifically at a Dashboard version at some point, if I find the time.

<xp:this.afterPageLoad><![CDATA[#{javascript:importPackage(com.ibm.xsp.theme.bootstrap.components.responsive);

        var photos = [["http://www.gstatic.com/webp/gallery/1.jpg","My Caption 1"]];
        photos.push(["http://www.gstatic.com/webp/gallery/2.jpg","My Caption 2"]);
        photos.push(["http://www.gstatic.com/webp/gallery/3.jpg","My Caption 3"]);
        photos.push(["http://www.gstatic.com/webp/gallery/4.jpg","My Caption 4"]);
        photos.push(["http://www.gstatic.com/webp/gallery/5.jpg","My Caption 5"]);

        var carousel:com.ibm.xsp.theme.bootstrap.components.responsive.UICarousel = getComponent("carousel1");

        for(var i = 0; i < photos.length; i++) {
            var data = photos[i];

            var slide:com.ibm.xsp.theme.bootstrap.components.responsive.SlideNode = new com.ibm.xsp.theme.bootstrap.components.responsive.SlideNode();
            slide.setBackgroundSrc(data[0]);
            slide.setCaptionText(data[1]);
            slide.setButtonLabel("Open This Image");
            slide.setButtonHref("/photo.xsp?photo=" + data[0]);
            carousel.addSlideNode(slide);
        }}]]>
</xp:this.afterPageLoad>

<xe:carousel id="carousel1" wrapped="true" pause="hover" slideInterval="2000">
</xe:carousel>

The key is to first get a reference to the component underlying the Carousel control, UICarousel. Then create some SlideNode components, setting their configuration options as desired, and add them to the UICarousel component.