This forum is closed to new posts and responses. Individual names altered for privacy purposes. The information contained in this website is provided for informational purposes only and should not be construed as a forum for customer support requests. Any customer support requests should be directed to the official HCL customer support channels below:

HCL Software Customer Support Portal for U.S. Federal Government clients
HCL Software Customer Support Portal



Feb 18, 2011, 2:06 PM
23 Posts

How to Create Design from dynamic content

  • Category: Extension Library
  • Platform: All
  • Release: 8.5.2
  • Role: Developer
  • Tags: Dynamic Design
  • Replies: 14
I have a need to insert controls into the xpage source based on content in a config document.
 
If the config document has the following content:
 
<div>
<div>
<%include id="nav1" attrib="value">
</div>
<div>
<span><%include id="pagetitle"></span>
<div>
<span><%include id="pagecontent"></span>
</div>
</div>
</div>

 I need to code a xpage that will display this content replacing the %includes with custom controls
 
I have looked at the Extension library documentation and  found a section about Injecting controls into the tree at runtime : ControlBuilder but I'm at a loss as to how/where to use it. 
 
Any ideas would be greatly appreciated.
Feb 18, 2011, 2:15 PM
40 Posts
Re: How to Create Design from dynamic content
 I think you will want to take a look at the xp:include control.  It allows you to dynamically include the entire contents of another XPage into the current XPage.
Feb 18, 2011, 2:39 PM
23 Posts
Re: How to Create Design from dynamic content
I did look at the xp:include but I don't see how it can do what i need...  
if the content in the config document is
 
<div>
<div>
<xp:include pageName="nav1.xsp"}' id="nav1"></xp:include>
</div>
<div>
<span><xp:include pageName="pagetitle.xsp"}' id="pagetitle"></xp:include></span>
<div>
<span><xp:include pageName="pagecontent.xsp"}' id="pagecontent"></xp:include></span>
</div>
</div>
</div>
 
how do I get that into the xpage so that it will render the includes?  I don't think this will work.


Feb 18, 2011, 2:53 PM
40 Posts
Re: How to Create Design from dynamic content
Then maybe I need a better understanding of what you are trying to accomplish.  Are you trying to give the user the ability to include xp tags on a page, or is it straight HTML? Or do you have predefined blocks of content that you want to dynamically include on the page depending on whether or not they have selected the control for display?  Please explain.
Feb 18, 2011, 3:09 PM
23 Posts
Re: How to Create Design from dynamic content
I am working on a content management system that will support user configurable "skins".  The admin side is going to be all oneuiv2 but the end user site needs to display based on html templates the content managers create.  The HTML template will be stored in a skin document  and will include all of the mark up that will display between the body tags.  The HTML template will need some way of saying "insert the left nav here and display it as a list" or "insert content text here"
 
 
Feb 18, 2011, 6:37 PM
40 Posts
Re: How to Create Design from dynamic content
 Could you then not use an xp:text tag with escape="false" and set the value to the html tags in the value like value="#{configDocument.leftNavFieldName}" (assuming the markup is stored in a field)...
Feb 19, 2011, 1:39 AM
23 Posts
Re: How to Create Design from dynamic content
Yeah, I tried that it just renders <xp:include pageName='testing.xsp'></xp:include> in the browser...
 
 
Feb 19, 2011, 2:26 PM
40 Posts
Re: How to Create Design from dynamic content
You can only use the xp:text to render HTML, not to inject XPages xp:tags into the source XML.  Remember that the XML "source" you place into the source pane of the XPage is interpreted and converted into a .java file, then compiled to a .class for execution on the server at design time. The XML tree is not re-parsed at run time. If you have finalized HTML, then you can use the xp:text...
 
You are going to have to "preplan" where you want to dynamically include content, then place the xp:include tags where you want to include content, then compute the which page to load at run time.  You can use the rendered and loaded attributes of the xp:include tag to turn on or off the rendering of a specific xp:include as well.  
Feb 18, 2011, 2:17 PM
586 Posts
Re: How to Create Design from dynamic content
 I don't know the answer to this.. but I thought this was in the Demo app that comes with the ext. library.  Did you check that?
 
Also...  Make sure that you have the latest Ext. Library. It's updated often and the most recent one wasn't that long ago.  Just a couple of weeks I think. 
Feb 18, 2011, 2:47 PM
23 Posts
Re: How to Create Design from dynamic content
I have looked at the library and found mention of ControlBuilder which sounds like it would do what I want but I am not able to find any other information on it any where.
Feb 19, 2011, 5:55 PM
25 Posts
Re: How to Create Design from dynamic content
 Steve,
 
You can inject COMPONENTS into an XPage at runtime. I'm not sure if you can inject a custom control into an XPage using this technique but I guess theoretically it is a java class somewhere within the nsf so it may be possible. So, let's say you have an <xp:div id="div1"> component on the page somewhere and you would like to put an <xp:section> component within that div. In the beforePageLoad or afterPageLoad event of the page you could do something like:
 
var navDiv = getComponent("div1");
var newSection = new  com.ibm.xsp.component.xp.XspSection();
newSection.setHeader("The Header of the Section"); 
newSection.setInitClosed(false);
 
var contentDiv = new com.ibm.xsp.component.xp.XspDiv();
var divContent = new com.ibm.xsp.component.xp.XspOutputText();
divContent.setContentType("HTML");
divContent.setValue("<p>Some HTML of your choice</p>"); 

contentDiv.getChildren().add(divContent);
newSection.getChildren().add(contentDiv); 
navDiv.getChildren().add(newSection);  
 
This would do the following:
  •  Get the <xp:div> that's already on the page
  • Create a new <xp:section>
  • Set it's header to "The Header of the Section"
  • Set it's initClosed property to false
  • Create a new <xp:div> component
  • Create a computed text component
  • Set the computed text content type to "HTML"
  • Set the Computed Text component's value to "Some HTML of your choice"
  • Add the Computed Text to the new div
  • Add the div to the section
  • Add the section to the existing div
 Now, you can't really add text or straight HTML to the page using this method, but you can create components, manipulate their properties and place those on the page. Also, while this is quite a bit of code to do something rather simple, it is very flexible and powerful. Place this in a Server Side Javascript library as a function or within an object and with some imagination and time could become quite reusable to perform certain repetitive tasks. In order to find all the properties and methods of components visit  http://www.openntf.org/xspext/xpages%20extension%20library%20documentation.nsf/xpages-doc/Controls.html. This documents almost all of the components available in both the core XSP model and in the Extension Library. Hope this helps.
 
Keith 
Feb 21, 2011, 3:15 PM
23 Posts
Re: How to Create Design from dynamic content
well an xp:include is a component and it has properties....   very interesting this may be what I'm looking for...  I'll have to dig into this idea.  I'll let you all know what I find and if I get this app working the way I want I'll put it out on openNTF
 
thanks to everyone for all the help.
Feb 21, 2011, 9:56 PM
41 Posts
Actually, you CAN inject passthru
var bulletList:com.ibm.xsp.component.UIPassThroughTag = new com.ibm.xsp.component.UIPassThroughTag();
bulletList.setTag("ul");
bulletList.addAttribute("style", "list-style-type:none;"); 
var bullet:com.ibm.xsp.component.UIPassThroughTag = new com.ibm.xsp.component.UIPassThroughTag();
bullet.setTag("li"); 
bulletList.getChildren().add(bullet); 
var bulletLabel:com.ibm.xsp.component.UIPassThroughText = new com.ibm.xsp.component.UIPassThroughText();
bulletLabel.setText("Hello, world. It's me, Tim.");
bullet.getChildren().add(bulletLabel);
Feb 22, 2011, 1:45 PM
23 Posts
Re: Actually, you CAN inject passthru
very nice but I really hope there is an easier way...  I can accept taking the HTML string and splitting it on the <%includes> and looping that but I don't know about splitting every individual tag.  Especially since the users would very likely not enter well formed HTML chunks.  But I guess if I force well formed HTML I could build a dom tree and loop that.
 
 
Mar 30, 2011, 11:48 AM
57 Posts
Re: Actually, you CAN inject passthru
if you want to inject dynamic HTML
option one: (from answers above)
1. inject a "computed field" component in ViewRoot as previous post above with Java
2. set passthrough content as HTML
3. render HTML based on user input
 
option two:
1. put a computed field on xpages designer, set up a sessionscope variable which is an array which will be holding the values input by user, set up HTML template there, set computed field invisible
2. user input activate computed field, mix user input with HTML template from computed field, set computed field visible
 
option three:
1. set up an empty computed field in designer
2. use RPC service(example from Extension library) to generate html content for computed field

regards
wei

This forum is closed to new posts and responses. Individual names altered for privacy purposes. The information contained in this website is provided for informational purposes only and should not be construed as a forum for customer support requests. Any customer support requests should be directed to the official HCL customer support channels below:

HCL Software Customer Support Portal for U.S. Federal Government clients
HCL Software Customer Support Portal