I have followed( https://docs.mendix.com/howto/extensibility/create-a-pluggable-widget-one) this documentation
for creating pluggable widget in React for datagid,
and i have coded it accordingly for the xml file, textinput.jsx and the webmodeler.jsx ,
the cmd prompt tells the widget built succesful but
i couldnt able to view the datagrid widget in custom folder. I have attached the sample code below,
It would be grateful if someone help me out with the issue. Thanks in advance!
and here is the source code for
1.Typescript code
2.index.html
3.style.css
import {Grid} from "../../../source/typescript/smart.elements"
(function Data() {
const csvData =
const rows = csvData.split('\n');
const header = rows[0].split(',');
const data = [];
const columns = [];
for(let i = 0; i < header.length; i++) {
const column = {dataField: header[i].replace(/ /ig, ''), label: header[i].trim()};
columns.push(column);
}
for(let i = 1; i < rows.length; i++) {
const row = rows[i].split(',');
const dataRow: any = {};
for(let j = 0; j < columns.length; j++) {
const dataField = columns[j].dataField;
dataRow[dataField] = row[j].trim();
}
data.push(dataRow);
}
window.Data = data;
})();
function getChipColor(colorIndex: number) {
const colors = [
'#18BFFF',
'#F82B60',
'#6B1CB0',
'#1283DA',
'#FCB400',
'#20C933'
];
const color = colors[colorIndex];
return color;
}
Smart('#grid', class {
get properties() {
return {
dataSource: new Smart.DataAdapter(
{
dataSource: window.Data,
dataFields: [
'Customer: string',
'Salesperson: string',
'Category: string',
'City: string',
'PaymentMethod: string',
'ProductName: string',
'Quantity: number',
'Revenue: number'
]
}),
columns: [
{label: 'Sales person', dataField: 'Salesperson', icon: 'fa-user', showIcon: true },
{label: 'City', dataField: 'City', showIcon: true, icon: 'fa-university' },
{label: 'Product', dataField: 'ProductName', icon: 'fa-product-hunt', showIcon: true },
{label: 'Payment Method', dataField: 'PaymentMethod', icon: 'fa-money', showIcon: true,
template: function(formatObject: any) {
if (!formatObject.template) {
if (formatObject.value === 'Mastercard') {
formatObject.template = '<div style="font-family: FontAwesome;"><span style="margin-left: 7px;" class="far fa-cc-mastercard"></span><span style="margin-left: 5px;">' + formatObject.value + '</span></div>';
}
else {
formatObject.template = '<div style="font-family: FontAwesome;"><span style="margin-left: 7px;" class="far fa-cc-visa"></span><span style="margin-left: 5px;">' + formatObject.value + '</span></div>';
}
}
else {
if (formatObject.value === 'Mastercard') {
formatObject.template.firstChild.className = 'far fa-cc-mastercard';
}
else {
formatObject.template.firstChild.className = 'far fa-cc-visa';
}
formatObject.template.lastChild.innerHTML = formatObject.value;
}
}
},
{label: 'Quantity', dataField: 'Quantity', showIcon: true, align: 'center', icon: 'fa-plus-circle', cellsAlign: 'center', width: 120,
template: function(formatObject: any) {
if (!formatObject.template) {
const data = document.createElement('span');
const plus = document.createElement('smart-button');
const minus = document.createElement('smart-button');
plus.style.background = getChipColor(0);
minus.style.background = getChipColor(5);
plus.innerHTML = '<span class="fa-plus"></span>';
minus.innerHTML = '<span class="fa-minus"></span>';
data.innerHTML = formatObject.value;
data.style.marginLeft= '7px';
plus.row = formatObject.row;
minus.row = formatObject.row;
plus.addEventListener('click', () => {
const row = plus.row;
row.getCell('Quantity').value+=5;
});
minus.addEventListener('click', () => {
const row = minus.row;
row.getCell('Quantity').value-=5;
});
const template = document.createElement('div');
template.appendChild(data);
template.appendChild(minus);
template.appendChild(plus);
formatObject.template = template;
}
else {
formatObject.template.firstChild.innerHTML = formatObject.value;
const buttons = formatObject.template.querySelectorAll('smart-button');
buttons[0].row = formatObject.row;
buttons[1].row = formatObject.row;
}
}
}
]
}
}
});
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Grid Custom Elements in Templates</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<link rel="stylesheet" type="text/css" href="../../source/styles/smart.default.css" />
<link rel="stylesheet" type="text/css" href="../../styles/demos.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="styles.css" />
<script type="text/javascript" src="../../source/webcomponents-lite.js"></script>
</head>
<body class="viewport">
<div class="demo-description">
The example show how to render Custom Elements in Grid Cells initialized with Javascript. That is achieved by using the 'template' property of a Grid column.
</div>
<smart-grid id="grid"></smart-grid>
<!-- scripts -->
<script src="../../scripts/data.js"></script>
<script type="module" src="../../source/modules/smart.grid.js"></script>
<script type="module" src="../../source/modules/smart.button.js"></script>
<script type="module" src="index.js"></script>
</body>
</html>
smart-grid-row {
height: 40px;
font-size: 16px;
}
smart-grid-column {
font-size: 14px;
}
smart-grid-column .smart-icon {
font-family: 'FontAwesome' !important;
font-size: 16px;
}
smart-grid-cell smart-button {
margin-left: 7px;
width: 28px;
height: 28px;
color: #fff;
border-radius: 10px;
border: none;
margin-top: -1px;
font-family: 'FontAwesome' !important;
}
smart-grid-cell smart-button:last-child {
margin-right: 7px;
margin-left: 2px;
}
smart-grid-cell smart-button .smart-button {
padding-left: 0px;
padding-right: 0px;
padding: 0px;
display: flex;
justify-content: center;
}
@media only screen and (max-width: 700px) {
smart-grid {
width: 100%;
}
}
You raised an idea, this is a question. Please post in the correct place.