Applying additional post-processing and styles to a screen after rendering

There are two JavaScript functions triggered after each screen is rendered. If either of them is present in your application, it is called automatically by the run-time environment, allowing you to apply additional changes to the screen being displayed:

• onTableShown(TableName) – called once a table has been fully displayed
• onScreenShown(CurrentScreen) – called once the whole screen has been fully rendered

 

Examples:

 

function onTableShown(TableName) {
ShowDialog('Table shown: ' + TableName);
if (TableName === 's1_t1') {
$('#STYLE_s1_t1_COLUMN1_0').css('color', '#FF0000');
$('#STYLE_s1_t1_COLUMN1_1').css('color', '#00FF00');
$('#STYLE_s1_t1_COLUMN1_2').css('color', '#0000FF');

$('#STYLE_s1_t1_COLUMN1_0').css('background-color', '#666666');
$('#STYLE_s1_t1_COLUMN2_1').css('background-color', '#FFFF44');
$('#STYLE_s1_t1_COLUMN3_2').css('background-color', '#66AAFF');
}
}

 

function onScreenShown(CurrentScreen) {
ShowDialog('Current screen: ' + P55_currentscreen);
if (CurrentScreen === 's1') {

var table1 = PROCE55_GetElementByName('s1_t1');
$('#STYLE_s1_t1').css('white-space', 'normal');
$('#STYLE_s1_t1_COLUMN3').css('background-color', '#FFFF00');

if (table1.TableData[table1.SelectedRow].RowData[0] === '01') {

$('#STYLE_s1_t1_COLUMN1').css('color', '#FF0000');
$('#STYLE_s1_t1_COLUMN1').css('background-color', '#FFFFFF');
}
else if (table1.TableData[table1.SelectedRow].RowData[0] === '02') {
$('#STYLE_s1_t1_COLUMN1').css('color', '#00FF00');
$('#STYLE_s1_t1_COLUMN1').css('background-color', '#FFFFFF');
}
else if (table1.TableData[table1.SelectedRow].RowData[0] === '03') {
$('#STYLE_s1_t1_COLUMN1').css('color', '#0000FF');
$('#STYLE_s1_t1_COLUMN1').css('background-color', '#FFFFFF');
}

}
}