Page Comparison

For wireframes rich UI that require any elements beyond supported elements other than the basic HTML elements supported in canvas Canvas native , developers will have to use react-native components.

Here in Canvas we provide hooks to attach react native components as row templates.

Suppose say business want you to create grids with rows looking like below.

...

Developer decides to create a react-native component and use it as a row template.

Instructions

...

app, Developers must use React Native components. Canvas Technology platform provides hooks to attach React Native components as Row Templates.

Let’s say that you need to create grids with rows that look as shown in the following screen shot:

...

For the given scenario, the Developer creates a React Native component and applies it as a Row Template to the widget in Canvas Studio.

Steps to Create a Template and Apply it as Row Template to a Widget

1. In Canvas Studio, click Create > Template and create a new Template as follows:

...

2. Then use app designer Use the App Designer in Canvas Studio to create an App app. In this example, we are creating a grid app (widget) as follows.:

...

...

3. Save the app and add it to the workspace of your interesta workspace using the Workspace Designer.

4. In the react-native React Native project, create a new react-native React Native component EmployeeComponent.js under <path-to-your-project>/src/impl/component.:

import React, { Component } from "react";
import { Text, View, Image, TouchableOpacity } from "react-native";
import Styles from "../../styles/structure.scss";
import { Chip, Button } from "react-native-paper";

export default class EmployeeComponent extends Component {
  constructor(props) {
    super(props);
    this.record = this.props.records.record; // Each record is passed in the props
  }

  render() {
    return (
      <View style={[Styles["employee_info_container"]]}>
        <View style={[Styles["employee_name_container"]]}>
          <Text style={[Styles["employee_name_text"]]}>
            {this.record.FIRSTNAME.VALUE}{" "}
          </Text>
          <Text style={[Styles["employee_name_text"]]}>
            {this.record.LASTNAME.VALUE}{" "}
          </Text>
        </View>
        <View style={[Styles["employee_title_container"]]}>
          <Button icon="phone"></Button>
          <Chip
            style={[Styles["employee_title_chip"]]}
            type="outlined"
          >
            {this.record.TITLE.VALUE}
          </Chip>
          <Button icon="email"></Button>
        </View>
      </View>
    );
  }
}

CLCR.registerCmp(
  {
    COMP_TYPE: "Template", // This is always "Template"
    COMP_NAME: "EMPLOYEE_TEMPLATE" // This is the template ID provided in studio
  },
  EmployeeComponent // This is the component Name
);

...

5. Add the styles in file implStyle.scss under <path-to-your-project>/src/impl/styles directory.:

.employee_info_container{
  border-width: 1px;
  border-color: grey;
  margin-top: 5;
  margin-bottom: 5;
  margin-left: 2;
  margin-right: 2;
  height: 60;
}

.employee_title_chip{
  height: 30;
  max-width: 60%; 
}   

.employee_name_container{
  width: 100%;
  flex-direction: row;
  justify-content: space-between;
}

.employee_title_container{
  width: 100%;
  flex-direction: row;
  justify-content: space-between;
}

.employee_title_chip{
  border-color: purple;
  background-color: snow;
} 

.employee_info_container{
  align-items: center;
}     

.employee_name_text{
  font-size: 16;
  color: $theme-color;
}   

6. Import the EmployeeComponent component added in the previous step in ImplImports.js under <path-to-your-project>/src/impl/component/ImplImports.js:

//* import all template files

*/
import("./EmployeeComponent");

7. Now build the Build the mobile app.

8. Open the Native app and navigate to the workspace for you to see view the row template Row Template applied for on the grid widget.