Skip to content

Instantly share code, notes, and snippets.

@joebordes
Created May 14, 2020 21:53
Show Gist options
  • Save joebordes/b6db346d2507e428d82aacd9cae3b0f5 to your computer and use it in GitHub Desktop.
Save joebordes/b6db346d2507e428d82aacd9cae3b0f5 to your computer and use it in GitHub Desktop.
react table corebos question
Name Text Question No Type Status SQL Query Collection Module Page Size Assigned To Created By Created Time Modified Time Columns Condition Description Order by Column Group by Column Type Properties Main Table Alias Unique ID Field Materialized View Cron Map Id Materialized View Workflow Conditions in Filter Format CRM Entity Alias Update View when Related Changes Related Module List Unique Identifier
Contacts in Spain cbQ-0000007 Table Active 0 Contacts 10.00 admin admin 2020-04-19 16:16:52 2020-04-19 16:18:26 [{"fieldname":"firstname","operation":"is","value":"firstname","valuetype":"fieldname","joincondition":"custom","groupid":0,"groupjoin":"firstname"},{"fieldname":"lastname","operation":"is","value":"lastname","valuetype":"fieldname","joincondition":"custom","groupid":0,"groupjoin":"lastname"}] [{"fieldname":"mailingcountry","operation":"is","value":"Spain","valuetype":"rawtext","joincondition":"and","groupid":"0","groupjoin":""}] 0 0 0 0 5009134eb8e5b63df2449bc3d2794ff58114140f
import React, { Component } from 'react'
import { connect } from 'react-redux'
import * as cbconn from 'corebos-ws-lib/WSClientm';
import MainLayout from 'Hoc/MainLayout'
import H1 from 'Components/H1'
import mermaid from 'mermaid';
import debounce from 'debounce';
const apiUrl = 'http://localhost/coreBOSwork';
cbconn.setURL(apiUrl);
class Home extends Component {
static propTypes = {}
/**
* Debounce the code first. When the function
* fires, take the value and attempt to update
* the Mermaid chart.
*
* @memberof App
*/
handleChange = debounce(
(value) => {
console.log(value);
var output = document.getElementById('output');
try {
mermaid.parse(value);
output.innerHTML = '';
mermaid.render('theGraph', value, function(svgCode) {
console.log(svgCode);
output.innerHTML = svgCode;
});
} catch (err) {
console.error(err);
}
},
600,
false
);
/**
* Render an initial chart on mount.
*
* @memberof App
*/
componentDidMount() {
var output = document.getElementById('output');
mermaid.initialize({ startOnLoad: true });
cbconn.doLogin('admin', 'admin', true)
.then(()=> {
cbconn.doInvoke('cbQuestionAnswer', { qid: '48x47034', params: [] }, 'GET')
.then(data => {
/*
data.answer array with row values
data.title
*/
let response = '<H1>'+data.title+'</H1><table>';
response += '<tr><th>First Name</th><th>Last Name</th></tr>';
for (let row=0; row<data.answer.length; row++) {
response += '<tr><td>'+data.answer[row].firstname+'</td><td>'+data.answer[row].lastname+'</td></tr>';
}
response += '</table>';
output.innerHTML = response;
//});
});
});
}
render() {
return (
<MainLayout>
<H1>This is a secondary page</H1>
<textarea
rows="4"
onChange={(e) => this.handleChange(e.target.value)}
/>
<div id="output" />
</MainLayout>
)
}
}
const mapStateToProps = state => ({})
const mapDispatchToProps = dispatch => ({})
export default connect(mapStateToProps, mapDispatchToProps)(Home)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment