Card Component

We will use Reactstrap for this example.

We are going to create a page containing Todos card list. To achieve that, first, we will create a card component. Then, we will create React component CardList that gets data by querying x_todo table (using qry_todo1 which was created by UI Wizard) and renders list of cards containing that data.

Let's go ahead and create a card. Go to Cards page and click on button.

Make this configurations and click save.

Open New Editor -> Frontend Sandbox, click on TodoCars under Cards, and copy the code and paste it in editor. TodoCard is a JavaScript object.

This approach is not dynamic meaning that if TodoCard changes the page that contains the TodoCard will not have updated TodoCard object. Dynamic approach would be adding TodoCard as page object.

Here's the code for CardList component. It is a class component that keeps list of todos in its state. When it is rendered it calls iwb.ajax.query function to get todos and updates todos list in its state. Query id is next to query's name.

class CardList extends React.Component {
constructor(props) {
super(props)
this.state = { todos: [] }
/* function that queries x_todo table and saves data in this.state.todos */
this.getData = () => {
iwb.ajax.query(6356, null, (res) => {
this.setState({ todos: res.data })
})
}
/* Call the function */
this.getData()
}
render() {
return this.state.todos.map(this.props.render)
}
}

Here's the complete code. CardList's render method is slightly modified to explain what's going on. In short, CardList calls render method of its prop (TodoCard) and passes todo object as prop. Below, we put image of what is printed on the console. We have two records in x_todo table.

var TodoCard = {
cardId: 652, name: 'TodoCard', _url: 'ajaxQueryData?.w=' + _webPageId + '&_qid=6356&_dvid=652', defaultWidth: 350,
render(props) {
console.log('props: ', props);
return _(Card, {},
_(CardBody, {},
_('div', {}, props.todo)
)
);
}
}
class CardList extends React.Component {
constructor(props) {
super(props)
this.state = { todos: [] }
/* function that queries x_todo table and saves data in this.state.todos */
this.getData = () => {
iwb.ajax.query(6356, null, (res) => {
this.setState({ todos: res.data })
})
}
/* Call the function */
this.getData()
}
render() {
return this.state.todos.map((todo) => {
console.log('todo in CardList:', todo);
return this.props.render(todo);
})
}
}
return React.createElement(CardList, TodoCard)

We created CardList React component that queries x_todo table and renders list of cards.