Instructions
...
Related articles
| Filter by label (Content by label) | ||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
...
| hidden | true |
|---|
...
For creating rich UI templates, we suggest using React Native components. Canvas Technology platform provides hooks to attach React Native components as templates for Template View App (widget).
| Info |
|---|
To build custom React Native components, the Developer must have programming skills in React Native. Refer React Native Documentation for learning React Native. |
Let’s say that you need to create Loan Summary carousel for a bank as shown in the following two screen shots:
...
To create such a carousel, you can either use a React Native NPM library or build on your own.
For the purpose of documentation, we used the Swiper carousel from GitHub, refer react-native-swiper. In this example, we create an app (widget) with view type as Template.
Steps to Create a Template and Template View App
In Canvas Studio, click Create > Template and create a empty template as follows:
...
| Info |
|---|
Pay attention to the Template Config field in the screen shot, where we just added an empty <div> </div> tags.This is necessary to use a React Native component and not the template provided here. The Template ID used here is Loan_summary. |
2. Using the App Designer in Canvas Studio, create a new app (widget) of Template type as follows:
...
3. Click the search icon in the Template ID field and select the LOAN_SUMMARY template we created in Step 1:
...
4. Save the app and add it to a workspace using Workspace Designer in Canvas Studio.
5. In the React Native project, create a new React Native component Loan_Summary.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 Swiper from 'react-native-swiper'
import { GlobalLiterals } from "../../GlobalEnums/Canvas.enum";
import Styles from "../../styles/structure.scss"
export default class Loan_Summary extends Component {
constructor(props) {
super(props);
this.scope = this.props.scope;
this.listConfig = this.props.listConfig; // All records are passed to the component via this.props.listConfig.ALL_RECORDS
this.state = {
recordList: this.listConfig.ALL_RECORDS,
};
}
_renderSwipeableComponent(){
let swipeableComps = [];
this.state.recordList.map(comp => {
let imgPath = GlobalLiterals.APP_PATH + "/" + "images/loan_summary/" + comp.PROD_IMG;
swipeableComps.push(
<View style={Styles.loan_summary_template_wrapper}>
<Image
style={Styles.loan_summary_template_img}
source={{uri: imgPath}}
/>
<View style = {Styles.loan_summary_template_title_wrapper}>
<Text style = {Styles.loan_summary_template_title_txt}>{comp.LOAN_TYPE} </Text>
<Text style = {Styles.loan_summary_template_title_txt}>{comp.LOAN_NO}</Text>
</View>
<View style = {Styles.loan_summary_template_desc_wrapper}>
<View >
<Text style = {Styles.loan_summary_template_desc_title}>Payment Due Date </Text>
<Text style = {Styles.loan_summary_template_desc_value}>{comp.PAYMENT_DUE_DT}</Text>
</View>
<View >
<Text style = {Styles.loan_summary_template_desc_title}>Next Payment </Text>
<Text style = {Styles.loan_summary_template_desc_value}>{comp.NEXT_PAYMENT}</Text>
</View>
</View>
<TouchableOpacity style = {Styles.loan_summary_template_btn}>
<Text style = {Styles.loan_summary_template_btn_title}>
Pay Now
</Text>
</TouchableOpacity>
</View>
)
})
return swipeableComps;
}
render() {
return (
<Swiper style={Styles.loan_summary_template_swipper_wrapper} dotStyle = {Styles.loan_summary_template_swipper_dot} activeDotStyle = {Styles.loan_summary_template_swipper_activeDotStyle}>
{this._renderSwipeableComponent()}
</Swiper>
)
}
}
CLCR.registerCmp(
{
COMP_TYPE: "Template", // This is always "Template"
COMP_NAME: "Loan_summary" // This is the template ID provided in studio
},
Loan_Summary // This is the component Name
); |
| Note |
|---|
Pay attention to lines 66 till 72 in the above code snippet.This is very important to link the component with the template ID. |
6. Import the Loan_Summary 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 "./Loan_Summary"; |
7. Build the mobile app.
8. Check the Loan Summary carousel in the mobile app.