Components

Components are the building blocks of a view. A component can display any type of resource, including text, images, or map, collect user input, determine the layout, and so on.

Components can be predefined components from the Kinvey Studio component palette or your own components.

Web and mobile each have separate sets of components that best suit the delivery media.

Laying Out Components

When you open a view, the central pane of Kinvey Studio shows the layout editor, called Design. You can drag and drop components onto it from the Components palette on the left.

The Components palette is divided into several categories, including:

  • Layout—These components serve to determine the location of other components on the canvas. You can combine and nest these to achieve advanced layouts.
  • Data Management—The components in this category display and otherwise handle tabular data.
  • Form—(Mobile-only)Components for creating forms on mobile devices.
  • Editors—Editor components serve to collect different type of user input, such as text, boolean data, and dates.
  • Charts—(Web-only)These components allows you to place charts of popular types on the canvas.
  • Gauges—Components that display data changing in real time.
  • Scheduling—(Web-only)Contains a Calendar component.
  • Media—Components for displaying rich media such as images, maps, and web pages.
  • Navigation—Components that aid navigating the app.
  • Custom—Contains the special Custom XML/Custom HTML which lets you inject arbitrary markup.

Configuring Components

When a component is selected on the canvas in Design mode, its properties appear for configuring in the Inspector on the right.

The available properties depend on the component type.

Not all native properties of a component are always exposed in the Inspector. In addition, you can create your own properties by extending the component that you might want to expose in the Inspector.

To expose a component property, take the following steps:

  1. In the Inspector, find Additional Properties.
  2. Click Add to add a new property line.
  3. In Name, fill in the name of the property as defined in the component code.
  4. In Value, set the property to the desired value of the suitable type.
  5. Click Save to save the view.

Related Resources

Kinvey Support Knowledge Base solutions: