Cloud Connected

Thoughts and Ideas from the Gitana Development Team

* Showing search results for tag: alpaca

Cloud CMS Web and Mobile Forms

One of the things that Cloud CMS does really well is forms - specifically, web and mobile forms.

If you’ve ever worked with the development of forms before, you know they’re pretty tricky to put together. You typically have back-end code that is responsible for taking a data structure, validating it and writing it to a database. And you also have front-end code which does user-facing data validation that is cosmetically appealing (pretty red boxes) and helpful. You need to think about customizing the front-end controls (using JavaScript typically) to offer a compelling end-user experience while also offering an intuitive layout. Form elements need to interact together such that changes to one part of a form automatically update or validate with other parts of the form.

It gets more interesting as the requirements grow. For example, you may be asked to have your form work across multiple pages. Perhaps there is a need for a wizard with previous, next and submit buttons. Or perhaps there is conditional logic such that certain sections of a form only appear if a user selects something. Or perhaps the next button should take you to a different set of pages depending on your form’s data (such as having to fill out certain income schedules for a tax payment submission).

And across all of that, there is the question of validation and making the user interface intuitive to end users as data changes. End users should be informed of when they are allowed to proceed to the next step in a form and be shown what updates are required or how they can fix things.

All of this is usually very challenging to deliver, particularly since it requires so much front-end and back-end code that needs to be kept in sync. As such, it has been a hard problem to generalize until very recently.

In the past few years, we’ve seen some new innovations that have made this easier.

One of these innovations is JSON schema which provides a descriptive way to structure your content. You can use JSON Schema to express forms, their data attributes and how they should be validated. With JSON Schema, you can singularly describe the constraints and validation logic of your form and then have that validation run on both the client and server side. You just write it once and it applies in both places.

Other technical innovations include modularized JavaScript and JSON document databases. Modularized JavaScript and other improvements to JavaScript (including EcmaScript 5 and the pending EcmaScript 6) allow for flexible development of intelligent controls that run in the browser. This effectively allows the browser to be much more intelligent about it’s rendering and enables it to make late decisions about how to lay out the controls onto the page or bind them into wizards. This process can be driven entirely from configuration (also a JSON document) while still allowing for JS controllers and methods (packaged up into AMD modules).

Using HTML injection to build user interfaces or forms has really grown up in the world. Popular frameworks like Angular.js or Ember.js work this way. Instead of generating HTML on the back-end and passing it over to be shown in the browser, the front-end generates its own HTML using JSON data retrieved from the back-end. This allows for really beautiful user interfaces that are customized on-the-fly, per user and per device.

Cloud CMS builds on all of this to deliver really intuitive and easy web and mobile forms. We provide an open-source, JavaScript-based Cloud Forms engine that runs entirely on JSON Schema. It builds forms for you on-the-fly, using a configuration-driven approach. And it saves your form data right into Cloud CMS so that you can collaborate around it, report on it and leverage it within your business.

Several years ago, we decided to open-source our forms engine under the Apache 2.0 license so that anyone could use it within their projects. No strings attached and no funny stuff. We’re big believers in open-source. It’s not just that we want to give back, but we also believe that the open-source process is the best way to build a fantastic product.

The result was Alpaca Forms. We put a web site up and promoted releases, along with documentation, examples and community forums. The result has been amazing! We’ve watched as Alpaca has been used in all sorts of interesting projects, ranging from education and government to the entertainment and medical worlds. We’re so glad that it has helped people to deliver amazing applications!

And beyond that, we’ve really enjoyed working with the community. Such great people with interesting ideas and lots of feedback. We’ve greatly enjoyed being in touch with such a great community!

Cloud CMS continues to build and offer Cloud CMS Forms as part of its offering. Each Cloud CMS subscription comes with a fully-engaged content management system that naturally works with Alpaca’s web forms. We offer technical support, bug fixes and production-level SLA’s for Alpaca within live applications.

If you’d like to learn more about Cloud CMS forms, visit our web site or Sign up for a Free Trial.

Thanks for being part of our community!

Easy Forms with Cloud CMS

One of the many uses of Cloud CMS is as a storage and reporting mechanism for forms. If you’re looking to put a form up onto your web or mobile site, Cloud CMS serves as an excellent option for capturing and storing this information.

Fundamentally, Cloud CMS provides the Alpaca forms engine. Alpaca is an open-source JavaScript library for jQuery. It makes it easy to design and insert forms into your sites.

Cloud CMS built Alpaca and been working with the broader community to improve it and make it more feature complete. Alpaca provides a large library of pre-built controls.

You can easily do things like render a simple form:

image

Or a more complex form with multiple fields:

Alpaca provides a library of lots of field types - ranging from basic input things (text, checkbox, select, etc) all the way to full-screen text editors and Google Maps interactive fields.

You can also fully customize the layout of your forms as well as take advantage of automatic features like validation:

Once you’ve built your form, you can connect it to Cloud CMS. This lets you load and save data to/from the Cloud CMS servers. When your users submit their forms, the form data is stored in a data list.

A data list lets you see all of the records including all of the properties of the form, when it was submitted, who submitted it and more.

Data list items are regular nodes in the Cloud CMS world and so you can work with them just like any other content. For example, you might set up rules that trigger notifications, send response emails or transform content for repurposing within your business.

Alpaca 1.0.3 Released!

We’re pleased to announce the release of Alpaca Web Forms 1.0.3 for jQuery, jQuery UI and jQuery Mobile.

Alpaca is an open-source project that provides an easy way to render web forms using JSON schema. It consists of a jQuery plugin and provides a nice abstraction so that you can change form layouts, validation logic and presentation with simple changes to JSON.

Alpaca provides the web forms capabilities for Cloud CMS - The Cloud Content Management Platform for the Enterprise.

This release includes a number of bug fixes and new features. These fixes and features are described more fully below.

Easier to Build

Alpaca 1.0.3 includes a new build structure that is lightweight and easier to work with. Everything is now fully-driven by Ant and all of the source files are completely intact without any build or compilation step. This mean that you can quickly test changes to core files by simply launching a web server and mounting the source.

AMD Modules

Alpaca 1.0.3 also includes optional support for AMD (Asynchronous Module Definitions). This makes Alpaca compatible with RequireJS, Curl and other AMD loaders.

Alpaca now features a wrapper around its code that detects the presence of an AMD environment. This is similar to how jQuery and others now do it. If AMD is available, Alpaca will define the “alpaca” module.

Cloud CMS hosts its AMD modules, including Alpaca, online here: https://github.com/cloudcms-components

What’s New

Alpaca 1.0.3 has a number of new features and fixes.

  1. Previewing of Form ahead of commit
  2. Arrays now support custom labels on Item move, add and remove
  3. Multi-select of array data
  4. Array name field now properly calculated
  5. Improvements to Mobile UI layout and rendering
  6. Improved JSON formatting via JSON editor
  7. WYSIWYG validation now properly fires
  8. Support for read-only arrays
  9. Easier programmatic access to buttons on rendered form
  10. Addition of DateTime field
  11. Improved support for EventListeners
  12. More Sample Code
  13. Sample Login Form
  14. Lazy Loading of Field Values
  15. Examples of Form Previews
  16. How to use DateTime Control


We encourage our community to check out Alpaca 1.0.3! You can download Alpaca by visiting our web site at http://www.alpacajs.org.

For code-level information on these bug fixes and new features, please visit our GitHub project at https://github.com/gitana/alpaca.