O365 – SharePoint Online: Alpaca JS based Apps development

Introduction

This article is primarily intended for creating a simple Apps based on Alpaca JS framework for O365 SharePoint Online.

Alpaca Demo

Download Source Code

Click here for Source code 

What is Alpaca JS framework?

Alpaca provides the easiest way to generate interactive HTML5 forms for web and mobile applications. It uses JSON Schema and simple Handlebars templates to generate great looking user interfaces on top of Twitter Bootstrap, jQuery UI, jQuery Mobile and HTML5.

Everything you need is provided out of the box. Alpaca comes pre-stocked with a large library of controls, templates, layouts and features to make rendering JSON-driven forms easy. It is designed around an extensible object-oriented pattern, allowing you to implement new controls, templates, I18N bundles and custom data persistence for your projects.

Alpaca is open-source and provided to you under the Apache 2.0 license. It is supported by Cloud CMS and is in use by organizations and within projects all around the world.

Steps to create the Alpaca based Apps for SharePoint Online

Step I

Create the HTML file by using the below source code,

<!DOCTYPE html>

<html xmlns=”http://www.w3.org/1999/xhtml”&gt;

<head>

<title>User Details</title>
<meta charset=”utf-8″ />
http://code.jquery.com/jquery-1.11.1.min.js
http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.0/handlebars.js
<!– alpaca –>
<link type=”text/css” href=”http://code.cloudcms.com/alpaca/1.5.17/bootstrap/alpaca.min.css&#8221; rel=”stylesheet” />

<style>
form {
padding-left: 2%;
width: 60%;
}
</style>
</head>
<body>

$(function () {
$(“#form1”).alpaca({
“schema”: {
“title”: “User Details”,
“description”: “Fill User Details”,
“type”: “object”,
“properties”: {
“Name”: {
“type”: “string”,
“title”: “Name”,
“id”: “txtName”,
“required”: true
},
“Password”: {
“type”: “string”,
“title”: “Password”,
“format”: “password”,
“required”: true
},
“Email Address”: {
“type”: “string”,
“title”: “Email Address”,
“format”: “email”,
“required”: true
},
“Cell Number”: {
“type”: “number”,
“title”: “Cell Number”,
“maxLength”: 10,
“minLength”: 10,
“required”: true
},
}
},
“options”: {
“form”: {
“attributes”: {
“action”: “http://httpbin.org/post&#8221;,
“method”: “post”
},
“buttons”: {
“submit”: {
“click”: function () {
this.ajaxSubmit().done(function () {
$.ajax({
url: “”,
type: “”,
dataType: “json”
});
});
alert(” User Name : ” + $(‘[name=”Name”]’)[0].value + “\n Email Address : ” + $(‘[name=”Email Address”]’)[0].value + “\n Cell Number : ” + $(‘[name=”Cell Number”]’)[0].value);

}
}
}
},
}
});
});

<link type=”text/css” href=”http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css&#8221; rel=”stylesheet” />
http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js

http://code.cloudcms.com/alpaca/1.5.17/bootstrap/alpaca.min.js

</body>
</html>

Step II

Click here for: Step by step creating Content Editor webpart and associate with HTML

Step III

Final result will be as below,

Alpaca Demo

Advertisements

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