How to Configure DynamicTable Control
Copy
The DynamicTable is loaded at runtime through event handling, based on the provided configuration and data. You can define its structure in the OnBeforeLoad event, located within the Settings flyout in the Studio.
const tableObject = {
columns: [
{
name: 'supplier_name',
label: 'Supplier Name',
control: {
name: 'supplier_name',
label: 'Supplier Name',
dataType: 'String'
},
width: 500,
hide: false
},
{
name: 'team_id',
label: 'Team',
control: {
name: 'team_id',
label: 'Team',
dataType: 'Item',
dataSource: 'Team'
},
width: 400,
hide: false
},
{
name: 'effective_date',
label: 'Effective Date',
control: {
name: 'effective_date',
label: 'Effective Date',
dataType: 'Date'
},
width: 300,
hide: false
},
{
name: 'contact_number',
label: 'Contact Number',
control: {
name: 'contact_number',
label: 'Contact Number',
dataType: 'String'
},
width: 200,
hide: false
}
],
columnWidthByPercentage: false
};
// Apply configuration to the table
appStudioWizard.setTableConfiguration('dynamicTable', tableObject);During the OnLoad event, actual data can be loaded into the table. The following code snippet should be placed in the OnLoad event handler within the Settings flyout in the Studio.
const dataArray = [
{
id: 'SUPPLIER_ID_001',
properties: {
supplier_name: 'Supplier One',
team_id: {
data_source: { name: 'Team' },
id: 'TEAM_ID_001',
keyed_name: 'Engineering Team A'
},
effective_date: '2025-06-01T00:00:00',
contact_number: '+1-555-100-1000'
}
},
{
id: 'SUPPLIER_ID_002',
properties: {
supplier_name: 'Supplier Two',
team_id: {
data_source: { name: 'Team' },
id: 'TEAM_ID_002',
keyed_name: 'Production Team B'
},
effective_date: '2025-06-03T00:00:00',
contact_number: '+1-555-200-2000'
}
},
{
id: 'SUPPLIER_ID_003',
properties: {
supplier_name: 'Supplier Three',
team_id: {
data_source: { name: 'Team' },
id: 'TEAM_ID_003',
keyed_name: 'Quality Team C'
},
effective_date: '2025-06-05T00:00:00',
contact_number: '+1-555-300-3000'
}
},
{
id: 'SUPPLIER_ID_004',
properties: {
supplier_name: 'Supplier Four',
team_id: {
data_source: { name: 'Team' },
id: 'TEAM_ID_004',
keyed_name: 'Logistics Team D'
},
effective_date: '2025-06-07T00:00:00',
contact_number: '+1-555-400-4000'
}
},
{
id: 'SUPPLIER_ID_005',
properties: {
supplier_name: 'Supplier Five',
team_id: {
data_source: { name: 'Team' },
id: 'TEAM_ID_005',
keyed_name: 'Maintenance Team E'
},
effective_date: '2025-06-09T00:00:00',
contact_number: '+1-555-500-5000'
}
},
{
id: 'SUPPLIER_ID_006',
properties: {
supplier_name: 'Supplier Six',
team_id: {
data_source: { name: 'Team' },
id: 'TEAM_ID_006',
keyed_name: 'Procurement Team F'
},
effective_date: '2025-06-11T00:00:00',
contact_number: '+1-555-600-6000'
}
}
];
// Add sample records to the table
dataArray.forEach((data) => {
appStudioWizard.addControlItem('dynamicTable', data.id, data);
});