Opening the Bootstrap modal (dialog) from a repeat control

Here is a simple XPages development tip when working with Bootstrap:

In an app we replaced the Dojo dialog from the Extension Library with the Bootstrap modal due to scrolling problems: When the dialog pane exceeds the content pane, scrolling in the dialog lead often to scrolling of the background content. This was with mobile devices often a crime.

The Dojo dialog you can display in client side and server side JavaScript. The Bootstrap modal only in client-side.

Since I am calling the modal from within a repeat control and I need to update the content of the modal with data from the document represented in the xp:repeat control I needed to first call a function to collect additional back-end document data & perform a partial refresh on the modal (which resides in an xp:panel). Then I needed to call the function to show the modal.

onCompLete

Perhaps a bit well hidden is the onComplete property for the eventHandler. Here is the way I find it:

  • Find the element you want to define and action for (or already have).
  • Select/Highlight the event in the Outline control.
  • Open the Properties view for the Event handler.
  • Navigate to the onComplete property. Here is where you can open the editor.

Here is how it looks like in some screen shots:

outline_event

onComplete

oncomplete_editor

The code looks as followed:

<xp:link escape=”true” text=”Link” id=”link2″>
<xp:eventHandler
event=”onclick”
submit=”true”
refreshMode=”partial”
refreshId=”dialog”
execMode=”partial”
immediate=”true”
onComplete=”$(‘#myModal’).modal(‘show’);”>
<xp:this.action><![CDATA[#{javascript:var id:String = pix.docUNID;

viewScope.put(“helloWorld”, “Hello World from ” +id)}]]></xp:this.action>
</xp:eventHandler>
</xp:link>

As result my dialog is presented with updated content every time it is presented:

result

Advertisements

2 thoughts on “Opening the Bootstrap modal (dialog) from a repeat control

  1. Henrik 2015-November-4 / 8:57 pm

    If you do not use a repeat control and just want the modal dialog display a form with editable text fields from a document in another database. And of course be able to save the document with updates from the modal dialog.

    How do you do that? 🙂

  2. Henrik 2015-November-4 / 9:21 pm

    Another solution is that I just want to send an email with the data from the dialog form to somebody. How is that done? 🙂

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s