I. Desired Effect
When using Excel to import data, the progress bar is required to be displayed, as shown below:
II. Example
2.1 Operation steps
Open a form, select Template > Web Attributes, click Data Entry Settings and add an After Importing Excel event.
The JS code is as follows:
FR.$defaultImport('/com/fr/write/web/excel/es.js','js');
FR.$defaultImport('/com/fr/write/web/excel/es.css','css');
//--- create a DIV as the progress bar
var div = $('<div style="width:200px;height:20px;z-index:10000;left: 800px;top: 0px;position:absolute"/>');
FR.processbar =new FR.SingleProgressBar();
FR.processpane = div;
$(FR.processbar.element).appendTo(div);
//--Associate DIV with BODY page
div.appendTo($('body'));
//---Execute every 0.5 seconds
setInterval(function() {
var v = FR.processbar.value;
if (v <100) {
//---The content of each execution
FR.processbar.setValue(v + 10);
}
}, 500);
FR.processbar.setValue(100);
//---Execute the method, executed every 0.5 seconds
setTimeout(function() {
FR.processpane.hide();
}, 500);
2.2 Preview effect
Save the template, select Data Entry Preview, and the effect is shown in the following figure:
Note: Mobile terminal and H5 do not support this effect.