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.

Single Sign On (SSO)

May 1

Cloud CMS introduces a Single Sign-On service that will make it easy for the users to connect using their already existing business accounts.

Cloud CMS supports two Enterprise SSO features – SAML 2.0 and JWT. These are two popular SSO mechanisms that work with many commercial and open-source identity providers including Microsoft Active Directory Federation Services (ADFS), JBoss Keycloak etc.

Using SAML 2.0 and JWT, Cloud CMS can be easily integrated with your corporate security infrastructure. Users who log in using either SAML or JWT will have their accounts automatically created and synchronized within Cloud CMS. Cloud CMS will not have any password information stored since the username/password sign on happens somewhere else. Not just the custom user properties but even the groups from either the JWT payloads or SAML assertions can be mapped into Cloud CMS letting the information be synchronized.

Try this feature out yourself using SAML 2.0:

1. Log into Cloud CMS as a user who has Manager rights over the platform. Usually this is the administrator of the platform or someone on the DevOps/IT side.
2. On the left-side, select Platform Settings.
3. On the sub-menu, select SSO.

To enable SSO using SAML, select “SAML 2.0” from the selection list. Next step is to configure the settings like providing the URL of the Identity Provider you want to redirect to and the field mappings which lets you synchronize the user properties from the identity provider into Cloud CMS.

SAML 2.0 merely describes the redirection of the browser to the identity provider, the login and the POST back to Cloud CMS of the assertion. Once Cloud CMS receives the assertion, it will sync the user and then authenticate as that user (through its own means).

Try this feature out yourself using JWT:

• Go to Platform Settings > SSO.
• Select JWT from the list as below

The configuration screens look like:

Once the JWT is configured, requests coming into Cloud CMS are expected to have a header or a cookie that contains a JWT token. This token is used to identify the user and also map the user properties with Cloud CMS to have synchronization.

Provide the necessary information as above. Further, you can provide the field mappings to synchronize the user properties of JWT profile fields into Cloud CMS. While logging in again, the system will check whether the JWT token is found and is valid. It can also be redirected to a remote login. Visit the documentation for more information.

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 - Image Cropping and Resizing Features

Apr 30

Lets face it – CMS editors just want to do their job and not spend too long in the tools.

Recently we added a feature to allow Content editors to do image cropping within the Cloud CMS User Interface rather than having to do this outside Cloud CMS and re-upload the image. This is a simple powerful feature which will save the content editor many clicks and minutes.

The image editing tool allows for:

1. reversing an image, and rotating an image
2. cropping the image
3. saving and reverting back to the original

Try this feature out yourself:

If you haven’t already done so register for a Cloud CMS Trial. Included in the Cloud CMS Trial there is a sample site where you can manipulate images. For example:

• go to Sample Project
• click Content (left Nav) – this may take a couple of seconds for the content to appear

• click on Dean Martin
• click Editor (left Nav) 

Now you can experiment with the editor features.

Further enhancements

There will be an update to the image editing tool in the coming weeks which will have the following additional functionality:

1. shows pixel sizes
2. resize image
3. Templates for common set of crops for commonly used sizes

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.