Skip to content

Simulation @Prompt with dijit.Dialog

maart 26, 2011

Using dijit.Dialog in our Disney Employee application

In a recent XPages project we needed to simulate the @Prompt function where the user could select a company from a list before a new XPage contact form was opened. Some essential company data had to be put in corresponding fields on the contact form automatically.

We used the dijit.Dialog widget to simulate more or less the look and feel of the @Prompt function.

How did we achieved this?

Step 1

Create a Notes View (e.g. Companies) consisting of two columns. The first (sorted) column contains the data you want to be displayed in list. The second column contains the return value when the user selects a company, in our case the Document UniqueID. Use the next column formula:

@Text(@DocumentUniqueID)

Step 2

Create an XPage with a View Control containing the contact info.

Add a Button Control to the page to enable the user to add a new contact. Add the following Client-Side JavaScript code to the onclick event:

// URL XPage with the List Box Control
var url = "http://server01/xpages/Test.nsf/selector.xsp";

var dialog = new dijit.Dialog({
 title: "New Contact",
 content: "<iframe src='" + 
        url +
        "' height='250' width='380' frameborder='0' scrolling='no'>",
 style: "width: 400px;"
});
dialog.show();

Modify the XPage properties:

  • All properties\basics\resources -> plus(+)-button -> dojoModule\name -> dijit.Dialog
  • All properties\dojo\dojoTheme -> true

Step 3

Create a XPage (e.g. selector.xsp) which can be used in the dijit.Dialog box. This XPage contains the next Controls:

  • Label Control
  • List Box Control (height: 180, width 350)
  • Link Control

Label Control: add instructions for the user (e.g. Select a company).

List Box Control: add the next value formula (on the Value tab -> Add Formula Item..):

var columnNbrCompany = 1;
var columnNbrUNID = 2;
@DbColumn(@DbName(), "Companies", columnNbrCompany) + "|" +
        @DbColumn(@DbName(), "Companies", columnNbrUNID);

Link Control: change the label of the link (e.g. Continue) and add the next Server-Side JavaScript code to the onclick onchange event:

var listBox1:com.ibm.xsp.component.xp.XspSelectManyListbox =
         getComponent("listBox1");
sessionScope.put("value", listBox1.getValue());  // store documentUNID

Also change the properties of the Link Control into (Options box of the Link tab):

  • Link type: Open Page
  • XPage: contact (the XPage contact form, eg. contact.xsp)
  • Window behavior (computed): return “_top”;

Step 4

Create the XPages contact form (e.g. contact.xsp). Populate the XPage with the needed fields, including the fields for the company data. Add the next Server-Side JavaScript code to the afterPageLoad event of the XPage.

var value = sessionScope.get("value");  // get documentUniqueId

var doc:NotesDocument = database.getDocumentByUNID(value);  // open the document
var name:string = doc.getItemValueString("Name"); // get the company name
var inputText1:com.ibm.xsp.component.xp.XspInputText =
        getComponent("inputText1"); // create a handle to the control
inputText1.setValue(name); // set the company name

Want to learn more:

XP852 – Lotus Domino Designer 8.5.2 Basic XPage Applications

corresponding
2 reacties leave one →
  1. maart 28, 2011 08.39

    Remarks

    In step 2 you can also use the next code (except in IE8):

    var url = “http://server01/xpages/Test.nsf/selector.xsp”;

    var dialog = new dijit.Dialog({
    title: “New Contact”,
    content: “<object id=’foo’ type=’text/html’ data='” + url + “‘>”,
    style: “width: 400px;”
    });
    dialog.show();

    Note: I don’t use the closing tags object and iframe in my code examples because it cause troubles in this blog.

  2. Rohan Batra permalink
    mei 23, 2013 12.41

    I had only used basic dojo dialog box using javascript but was looking for a way to do the same using Xpage code. Thanks for putting it up. One doubt though, how can we attach callbacks for the dialog buttons.

    Thanks

Geef een reactie

Vul je gegevens in of klik op een icoon om in te loggen.

WordPress.com logo

Je reageert onder je WordPress.com account. Log uit / Bijwerken )

Twitter-afbeelding

Je reageert onder je Twitter account. Log uit / Bijwerken )

Facebook foto

Je reageert onder je Facebook account. Log uit / Bijwerken )

Google+ photo

Je reageert onder je Google+ account. Log uit / Bijwerken )

Verbinden met %s

%d bloggers op de volgende wijze: