Too many abbreviations :)

This is probably given before, but I have received a question last week and it would be useful sharing this.

When you run a server-side code at your XPage, your operation may be successful or failed. A newbie developer asked me how to acknowledge the user about the result, like MessageBox functionality in Lotusscript.

Usually, that's not possible, you know. Because the code is running between state transitions. I am using a simple custom control to do that.

<?xml version="1.0" encoding="UTF-8"?> 
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">

      <xp:div styleClass="lotusMessage lotusInfo" role="alert"
              rendered="#{javascript:viewScope.MessageText!=null || sessionScope.MessageText!=null }">
              <xp:image id="image3">
                      <xp:this.url><![CDATA[#{javascript:severity=viewScope.MessageType || sessionScope.MessageType || "";
                                                              viewScope.remove("MessageType");
                                                              sessionScope.remove("MessageType");

                                                              severityseverity==""?"Info":severity;

                                                              return "/icon"+severity+"16.png";}]]></xp:this.url>
              </xp:image>
              <xp:span>
                      <xp:text escape="true" id="computedField4">
                              <xp:this.value><![CDATA[#{javascript:message=viewScope.MessageText || sessionScope.MessageText;
                                                              viewScope.remove("MessageText");
                                                              sessionScope.remove("MessageText");

                                                              return message;}]]></xp:this.value>
                      </xp:text>
              </xp:span>
      </xp:div>
</xp:view>


We can use either sessionScope or viewScope to transmit our parameters. Here is a SSJS example for this:

function someFunction() { 

      // Do Something Useful...

      if(successful) {
              viewScope.MessageType="Info";
              viewScope.MessageText="Operation Completed Successfully...";
      } else {
              viewScope.MessageType="Error";
              viewScope.MessageText="Some Error Occured...";
      }
}


When the page is refreshed (fully/partially), we check for viewScope and sessionScope parameters, show the message and clear them not to duplicate it. It may not be cleared at that moment and extended with a close button that clears the message from the scope. Severity options are determined with the icon names.

Here is the example how it worked... We click the button, it processes some information in background (server-side) and after refresh, it informs user about the result.

Image:XPages Tip: A simple CC for prompting SSJS messages to UI...
Serdar Basegmez   |   May 2 2011 03:00:00 AM   |    Development  HowTo  Tips  XPages    |  
  |   Next   |   Previous

Comments (4)

Gravatar Image
Serdar Basegmez    http://www.developi.com    06/22/2011 9:57:32 AM

Good point, Clay, thanks!

Gravatar Image
Clay Martin       06/22/2011 9:54:39 AM

Very nice, re-worked it a little so it can display all the standard oneui messages

<?xml version="1.0" encoding="UTF-8"?>

<xp:view xmlns:xp="{ Link }

<xp:div role="alert" rendered="#{javascript:viewScope.MessageText!=null || sessionScope.MessageText!=null }">

<xp:this.styleClass>

<![CDATA

#{javascript:var msgtype = severity=viewScope.MessageType || sessionScope.MessageType || "";

var result = null;

switch (msgtype) {

case "Error": result = 'lotusMessage'; break;

case "Warning": result = "lotusMessage lotusWarning"; break;

case "Info": result = "lotusMessage lotusInfo"; break;

case "Confirmation": result = "lotusMessage lotusConfirm"; break;

default: result = 'unknown';

}

result;}

]>

</xp:this.styleClass>

<xp:image id="image3" disableTheme="true">

<xp:this.url>

<![CDATA[#{javascript:severity=viewScope.MessageType || sessionScope.MessageType || "";

viewScope.remove("MessageType");

sessionScope.remove("MessageType");

return "icon"+ severity + "16.png";}]]>

</xp:this.url>

</xp:image>

<xp:span>

<xp:text escape="true" id="computedField4" disableTheme="true">

<xp:this.value>

<![CDATA[#{javascript:message=viewScope.MessageText || sessionScope.MessageText;

viewScope.remove("MessageText");

sessionScope.remove("MessageText");

return message;}]]>

</xp:this.value>

</xp:text>

</xp:span>

</xp:div>

</xp:view>

Gravatar Image
Serdar Basegmez    http://www.developi.com    05/02/2011 12:08:43 PM

Thanks Stephan, Good point.

Consistent UI is actually defined under oneui. It needs to be touched about alignings but seems well.

Gravatar Image
Stephan H. Wissel    http://www.wissel.net/    05/02/2011 12:01:17 PM

Another option you can consider: write into the validation errors and the submission of the form will not happen and your error display like a validation error. Combined with your CC for the success case you have a consistent UI (blue info for success, yellow error if something (either validation or error) went wrong.