Pages & Components

Most applications have multiple pages (screens), which in ItsyUI can be achieved by defining multiple ItsyUI page widgets.

If the app contains multiple pages in a hierarchical order, use the react-router package to define the routes. widget defines the necessary paths for which the page should render.

We use react-router package for handling all page navigations,

import { Switch, Route, Redirect } from 'react-router-dom';

const PrivateRoutes = () => {
  return <Switch>
      <Route exact path="/todo" component={TodoPage} />
      <Route exact path="/" render={() => <Redirect to="/todo" />} />
    </Switch>;
};

Properties

A widget has properties which can be defined in a JSON schema or as react props.

"todo-form": {
	"name": "todo-form",
	"properties": {
		"title": "Form",
		"typeId": "todo",
		"formSchemaId": "todo",
		"propertyType": "Form",
		"controlID": "",
		"widget": "FormWidget",
		"ui:widget": "form",
		"widgetType": "bound",
		"dataSource": "datasource",
		"padding": 1
	}
}

Layout

ItsyPage also defines layout property that allows to define the position of the widget. It is an array of rows and columns, and it renders in responsive mode.

"layout": [
          {
               "columns": [
                    {
                         "cell": [
                              {
                                   "widget": "todo-form"
                              }
                         ]
                    },
                    {
                         "cell": [
                              {
                                   "widget": "todo-list"
                              }
                         ]
                    }
               ]
          }
     ]