Cloud Connected

Content Entry Forms Example

May 7

Cloud CMS lets you easily design and deploy forms for your web applications and content contributors. In this blog entry, we’ll walk through how you can do this within the Cloud CMS user interface.

In this example, we’ll create a form that allows editors to create City Guide information. Note: in the Cloud CMS Trial there is a City Guide Content definition which can be used as a starting point or as a reference for this example.

Add a Definition

The Content Definitions can be found in the Cloud CMS project:

Next, we need to Create a new Definition. We begin by telling Cloud CMS what a City Guide is. This is a bit like defining a word in the dictionary. We will define a “City Guide” and tell Cloud CMS what schema it should have. The schema describes the properties, types, constraints and structure of the content.

When someone fills out the form, Cloud CMS can then capture the content and store it in a way that is searchable and reusable.

Click Create Definition.

We provide a few properties for our new definition including a qname which defines a unique key (kind of like a dictionary “word”) which is ours.

Now we define the schema of this definition. Cloud CMS uses JSON Schema for content modeling.

{
    "title": "Guide City",
    "type": "object",
    "properties": {
        "title": {
            "type": "string",
            "title": "Title"
        },
        "summary": {
            "type": "string",
            "title": "Summary"
        },
        "body": {
            "type": "string",
            "title": "Body"
        },
        "state": {
            "type": "string",
            "title": "State"
        },
        "loc": {
            "type": "object",
            "title": "Location",
            "properties": {
                "latitude": {
                    "type": "number",
                    "title": "Latitude"
                },
                "longitude": {
                    "type": "number",
                    "title": "Longitude"
                }
            }
        },
        "highlights": {
            "type": "array",
            "items": {
                "type": "string"
            },
            "title": "Highlights"
        },
        "testimonials": {
            "type": "array",
            "items": {
                "type": "object",
                "properties": {
                    "text": {
                        "type": "string",
                        "title": "Text"
                    },
                    "author": {
                        "type": "string",
                        "title": "Author"
                    }
                }
            },
            "title": "Testimonials"
        }
    },
    "_parent": "n:node",
    "description": "guide:cityexample",
    "$schema": "http://json-schema.org/draft-04/schema#"
}

If happy with your edits you can now save our definition. Cloud CMS instantly compiles the definition with no server restarts and no downtime. The Contentent Definition Overview shows us that our definition is loaded up and ready to go.

Add a Form

So far, we’ve defined what a City Guide is. That is to say, we’ve defined the model for a City Guide. We now want to add a form that can be used to create new City Guide content instances.

Cloud CMS lets you have many forms for a single definition. You might choose have one form for administration that shows all fields and gets down and dirty. You might have another form that simplifies things, has a simple layout and is intended for users on a web site.

Click Form List which will list all the available Forms for the Type Definition - there are none since it is a new definition. Let’s create a simple form. All we have to do is click on Create Form.

We now provide some configuration for our form. We can do many things here such as modify the layout, the placement of fields, plug in custom templates and configure different kinds of fields (or controls) for our field elements.

Let’s use the following configuration to customize the fields for our form:

{
    "title": "Guide City example",
    "fields": {
        "title": {
            "type": "text",
            "label": "Title"
        },
        "summary": {
            "type": "textarea",
            "label": "Summary"
        },
        "body": {
            "type": "ckeditor",
            "label": "Body",
            "ckeditor": {
                "toolbar": [
                    [
                        "Format",
                        "Font",
                        "FontSize"
                    ],
                    [
                        "Bold",
                        "Italic",
                        "Underline",
                        "StrikeThrough",
                        "-",
                        "Undo",
                        "Redo",
                        "-",
                        "Cut",
                        "Copy",
                        "Paste",
                        "Find",
                        "Replace",
                        "-",
                        "Outdent",
                        "Indent",
                        "-",
                        "Print"
                    ],
                    "/",
                    [
                        "NumberedList",
                        "BulletedList",
                        "-",
                        "JustifyLeft",
                        "JustifyCenter",
                        "JustifyRight",
                        "JustifyBlock"
                    ],
                    [
                        "Image",
                        "Table",
                        "-",
                        "Link",
                        "Flash",
                        "Smiley",
                        "TextColor",
                        "BGColor",
                        "Source"
                    ]
                ]
            }
        },
        "state": {
            "type": "state",
            "label": "State"
        },
        "loc": {
            "type": "object",
            "label": "Location",
            "fields": {
                "latitude": {
                    "type": "number",
                    "label": "Latitude"
                },
                "longitude": {
                    "type": "number",
                    "label": "Longitude"
                }
            }
        }
    },
    "engineId": "alpaca1",
    "_form_key": "master"
}

As you can see, each field has been given a label and a type. The type identifies which field control to use.

We now save our form. Cloud CMS automatically compiles the form and brings it online.

Create Content using our Form

Now we can create content using our form.

• In left nav, click Content - a list all the content types will be displayed.
• Select the content type you have just created
• click Create Content

Notice that Cloud CMS automatically fires validation logic for things like required files. The Cloud CMS forms engine is very configurable and provides drop downs for selectors, date pickers, custom formatters and much more.

Any questions?

I hope this article encourages you to further explore the many features of Cloud CMS. If you have a question, or cannot find a feature you are looking for, or have a suggestion - please Contact Us.

Cloud CMS Web and Mobile Forms

Jan 9

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!