Domino Access Service – Posting a document

Introduction

In our app described in previous posts I have included an interface to post a new document using Domino Access Services. Here is how I did it.

HTML structure

The main part of the ‘form’ is the HTML structure.

form

Since we use Bootstrap I included form-groups to layout the fields. In my example I still use XPages, but the inputfields you can replace with HTML input elements.

<form role=”form”>

<h2>Registration</h2>
<div id=”entryForm”>
<div class=”form-group”>
<xp:label value=”Firstname:” id=”label2″></xp:label>
<xp:inputText id=”inpFirstname” styleClass=”firstName”>
<xp:this.attrs>
<xp:attr name=”placeholder” value=”Enter firstname”></xp:attr>
</xp:this.attrs>
</xp:inputText>
</div>
<div class=”form-group”>
<xp:label value=”Lastname:” id=”label3″></xp:label>

<xp:inputText id=”inpLastname” styleClass=”lastName”>
<xp:this.attrs>
<xp:attr name=”placeholder” value=”Enter lastname”></xp:attr>
</xp:this.attrs>
</xp:inputText>
</div>
<div class=”form-group”>
<xp:label value=”Email:” id=”label1″></xp:label>
<xp:inputText id=”inpEmail” styleClass=”email” type=”email”>
<xp:this.attrs>
<xp:attr name=”placeholder” value=”Enter email”></xp:attr>
</xp:this.attrs>
</xp:inputText>
</div>
<div class=”form-group”>
<xp:label value=”Password:” id=”label4″></xp:label>
<xp:inputText id=”inpPassword” type=”” styleClass=”wannebepassword”>
<xp:this.attrs>
<xp:attr name=”placeholder” value=”Enter password”></xp:attr>
</xp:this.attrs>
</xp:inputText>
</div>
<xp:button value=”Submit” id=”button1″ styleClass=”btnRegister btn btn-default”>
</xp:button>
</div>
</form>
<div id=”formResponse”></div>

JavaScript

On the onClientLoad event of the XPage I have included the following script.

Parameters

Keep in mind to include the form name in the URL parameter (?form=Person) since you cannot include that pair in the JSON object that is send to Domino Access Service.

The &computewithform=true parameter ensures the HTTPPassword field will be translated with the @Password function.

<xp:eventHandler event=”onClientLoad” submit=”false”>
<xp:this.script>
<![CDATA[$(document).ready(function() {
$(“.wannebepassword”).attr(“type”, “password”);
$(“.btnRegister”).click(function(e) {
var firstName = $(“.firstName”).val();
var lastName = $(“.lastName”).val();
var email = $(“.email”).val();
var password = $(“.wannebepassword”).val();
var newName = $(“.firstName”).val() + ” ” + $(“.lastName”).val();
if (newName !== ” “) {
var newPersonObj = {
FirstName: firstName,
LastName: lastName,
FullName: newName,
InternetAddress: email,
HTTPPassword: password,
Form: “Person”
};
$.ajax({
url: ‘http://server/fakenames40k.nsf/api/data/documents?form=Person&computewithform=true&#8217;,
type: ‘POST’,
data: JSON.stringify(newPersonObj),
dataType: ‘xml’,
accepts: {
xml: ‘text/xml’,
text: ‘text/plain’
},
contentType: “application/json”
}).done(function(data, textStatus, jqXHR) {
var newPersonLocation = jqXHR.getResponseHeader(“Location”);
$(“#entryForm”).hide();
$(“#formResponse”).html(‘Registration successfull.<br/><a class=”btn btn-default” href=”‘ + newPersonLocation + ‘”>Check it out!</a>’);
}).fail(function(jqXHR, textStatus, errorThrown) {
alert(“Registration has failed:” + errorThrown);
console.log(‘Registration has failed.’);
});
} else {
alert(“Please enter a name”);
}
return false;
});
});]]>
</xp:this.script>
</xp:eventHandler>

Password attribute

XPages does not allow you to define the password type as attribute. I found the answer from Tim Tripcony on Stackoverflow helpful to define a work-around.

Wrap up

That is about it!

This is just a simple example. Probably you would normally include some more validation (avoid double entries) but you get the idea.

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