Introduction
This article is primarily intended for creating a simple Apps based on Alpaca JS framework for O365 SharePoint Online.
Download 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”>
<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” 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”,
“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” rel=”stylesheet” />
http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.jshttp://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,
