Adaptive Layouts

Method 1

By simply defining objects and their metadata - objectType and propertyType definitions - we have already given the Adaptive Layout processor much of what it needs to know to leverage built-in components and parameter mappings to generate some simple layouts. For example, suppose we have an object containing:

obj = {
    “givenName”: “Robert”,
    “surname”: “Smith”,
    “registered”: true,
}

And supposed we also define an Object Type to handle those properties:

objectType = {
    “propertyTypes”: {
        “givenName”: {
            “dataType”: “string”,
            “label”: “Given Name”,
            “description”: “Your first name”
        },
        “surname”: {
            “dataType”: “string”,
            “label”: “Surname”,
            "description": “Your last name”
        },
	      “registered”: {
            “dataType”: “boolean”
        }
    }
}

This may not seem like much, but already, we have enough to render the object with some appropriate default components. The properties givenName and surname would use TextField components, while registered would use a Checkbox component. Using metadata this way allows you to use declarative efforts to create your layouts. By changing the metadata and adding in constraints and dataTypeParameters, you can influence the way a layout is created. In this method, we are not explicitly defining any real Layout designs.

Results

When we are finished, we may see something like:

Method 2

This method piggy-backs the first Method, but introduces the ability to declare some Layout Parameters. These parameters are instructions that the Adaptive Layout processor uses to influence which components to select, and how to handle parameter mappings to individual Components. If we reuse the example from Method 1, we may decide to tweak the design slightly so that boolean dataTypes are represented by Switch components instead of Checkbox components, and TextFields should ignore descriptions. To do this, we may create some Layout Parameters, such as:

layoutParameters = {
    “preferredComponents”: [
        {
            “dataType”: “boolean”,
            “componentType”: “Switch”
        },
        {
            “dataType”: “string”,
            “componentType”: “TextField”,
            “componentProps”: {
                “showDescriptions”: false
            }
        }
  ]
}

Results

When we're finished, we may see something like:

Method 3

Now, we're going to have to start declaring our layouts much more directly. This method takes the Layouts that we created via Method 2 and enhances them with some explicit instructions on how to actually layout the data we have to work with. In addition, we no longer need to tether the layout to object data or metadata, if we don't really want to. We are free to add spontaneous boxes, headers, text labels or icons.

layout = {
        “componentType”: “Box”,
        “parameters”: {
            “contains”: [
                {
                    “componentType”: “Typography”,
                    “parameters”: {
                        “text”: “Register User Form”
                    }
                },
                {
                    “componentType”: “Box”,
                    “parameters”: {
                        “contains”: [
                            {
                                “componentType”: “TextField”,
                                “parameters”: {
                                    “label”: “Given Name”
                                }
                            },
                            {
                                “componentType”: “TextField”,
                                “parameters”: {
                                    “label”: “Surname”
                                }
                            },
                            {
                                “componentType”: “Switch”,
                                “parameters”: {
                                    “label”: “registered”
                                }
                            }
                        ]
                    }
                }
            ]
        }
}

Results

When we're finished, we may see something like:

Method 4

At this point, we are breaking away from Adaptive Layouts and directly importing and using layouts that have been implemented by a technology, such as Javascript/ReactJS. In this use-case, you are a programmer and may be writing a full-blown application that contains data and components that are outside of Adaptive Layouts or their purpose, but still want to pull in some Adaptive Layout code for an easier integration with Adaptive Framework data. You may also want to massage the data going in and out of the components in order to store and present them in different ways.

Results

A complete application, independent of Adaptive Framework, but importing common layouts:

Method 5

From here on out, we're not really talking about Adaptive Layouts at all, but more interested in the direct interfaces and APIs that can be used to integrate Adaptive Framework data. Perhaps, you import and use the Javascript bindings, or even hit the RESTful interfaces to access and use data. All of the UI is up to you and you may choose to use third-party component libraries to present the UI.

Custom Adaptive Layouts

Adaptive Layouts are intended to be created by end-users and developers in order to provide layout instructions for the Object Types and Property Types that are unique to your data. This section describes the process of creating and maintaining custom Adaptive Layouts.

Custom Adaptive Components

There's a lot of flexibility and options that have been provided with the Adaptive Components provided out of the box. However, just like everything else in Adaptive Framework, these Adaptive Components are intended to be extended, so developers can create and add new Adaptive Components to be used and shared. This section provides steps to being creating your own custom Adaptive Components.