JS Create a Progress Bar for Importing Excel

  • Last update:  2020-12-30
  • I. Desired Effect

    When using Excel to import data, the progress bar is required to be displayed, as shown below:

    B7693E38-C1F1-4E4C-94C7-F9AB8FB632A1.GIF

    II. Example

    2.1 Operation steps

    Open a form, select Template > Web Attributes, click Data Entry Settings and add an After Importing Excel event.

    Snag_197db22.png

    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:

    B7693E38-C1F1-4E4C-94C7-F9AB8FB632A1 (1).GIF

    Note: Mobile terminal and H5 do not support this effect.

    III. Completed Template

    Attachment List


    Theme: Data Entry
    • Helpful
    • Not helpful
    • Only read

    滑鼠選中內容,快速回饋問題

    滑鼠選中存在疑惑的內容,即可快速回饋問題,我們將會跟進處理。

    不再提示

    10s後關閉

    Get
    Help
    Online Support
    Professional technical support is provided to quickly help you solve problems.
    Online support is available from 9:00-12:00 and 13:30-17:30 on weekdays.
    Page Feedback
    You can provide suggestions and feedback for the current web page.
    Pre-Sales Consultation
    Business Consultation
    Business: international@fanruan.com
    Support: support@fanruan.com
    Page Feedback
    *Problem Type
    Cannot be empty
    Problem Description
    0/1000
    Cannot be empty

    Submitted successfully

    Network busy