...
Launch CT Studio in chrome and create a new Template as follows
...
...
| Info |
|---|
Pay attention to Template Config section where we just added dummy <div> </div>. This is done as we wanted a react-native component to be used and not the template provided here. The Template ID used here is EMPLOYEE_TEMPLATE. |
2. Then use app designer to create an App as follows.
...
3. Save the app and add it to the workspace of your interest.
4. In the react-native project create a new react-native component EmployeeComponent.js under <path-to-your-project>/src/impl/component.
| Code Block | ||
|---|---|---|
| ||
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;
}
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
);
|
| Note |
|---|
Pay attention to lines 38 till 44. This is very important to link the component with the template ID. |
5. Add the styles in file implStyle.scss under <path-to-your-project>/src/impl/styles directory.
| Code Block | ||
|---|---|---|
| ||
.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;
} |
Since there is an issue in the package react-native-sass-transformer we use to convert sass into reactNative compatible styles, please make any change in the following file to get the modified styles to work.
structure.scss under <path-to-your-project>/src/styles
The change can be a simple space in the scss file.
6. Import the EmployeeComponent component added in the previous step in ImplImports.js under <path-to-your-project>/src/impl/component/ImplImports.js
| Code Block |
|---|
/*
import all template files
*/
import("./EmployeeComponent"); |
7. Now build the app and navigate to the workspace for you to see the row template applied for the grid.