×

Please give details of the problem

Docs

Find

    Developer Guide

        1. Todo Validation
      1. Release Your User Login
      1. Process Reporting API
        1. CSS Examples
        2. CSS Personalization
      1. Performance
        1. List Reinitialization
        2. Holidays
        3. Number Currency Format
        4. Label Modification
        5. Array From WS
        6. Launch Process JQuery
        7. Column Inactivation
        8. Date
        9. Print JSONObject
        10. ArrayJSON to JSONArray
        11. Invalid Fields
        12. Round
        13. Initialization Widget Date
        14. JQuery
        15. Inject JSONObject
        16. Google Tables
        1. Summing Array
        2. API Listener
        3. User Lane Picker
        4. Retrieving Variables Values
          1. Chart Dashboard
          2. Report Chart
          3. Google Visualization
          4. Chart Dashboard Collection
        5. Tags
        6. Collection
        7. File Preview
        8. Dynamic List
        9. Dialog Window
        10. JavaScript Report
        11. Autocomplete Widget
          1. homepage.js
          2. homepage.css
        1. Logout
        2. Custom Login Page
        3. Header
        4. Mobile Devices
        5. Basket
        6. Redirection ExecutionMode
        7. Menu Bar
        8. Information Tags
      1. Composite API Example
      1. Markdown Template
        1. Task Reminder Email
        2. SubProcess
        3. PDF
        4. JavaScript Inclusion
        5. Variable Mapping
        6. Backloop
      2. Trigger
        1. File Visibility
        2. Number Currency Format
        3. Error Handling
        4. JSONObject Concatenation
        5. Loop
        6. Dynamic Variable
        7. List 1000+ Objects
        8. Metadata
        9. Freemarker Container Test
        10. JSONObject Keys Values
        11. List Hash Sequence
        12. Special Freemarker Characters
        13. Salesforce Computation
        14. Array To List
        15. JSONArray Conversion
        16. Lock
        17. JSONObject Creation
        18. Number Test
      1. Customer Management
        1. Messages
        2. Scheduled Process
        1. Custom Lists
          1. Web Interface Stylesheet Tab
          2. Web Interface Analytics Tab
          3. Web Interface Implementation Tab
          4. Web Interface Collection Tab
          5. Web Interface API Tab
          6. Web Interface Design Tab
          7. Web Interface JS Tab
            1. Report Widget
            2. List Widget
            3. JavaScript Widget
            4. History Widget
            5. RadioButton Widget
            6. FileUpload Widget
            7. StaticText Widget
            8. HTML Editor Widget
            9. ProgressBar Widget
            10. Section Widget
            11. Spinner Widget
            12. Image Widget
            13. Multi Checkbox Widget
            14. Tab Widget
            15. Tree Widget
            16. HTML Widget
            17. Checkbox Widget
            18. Button Widget
            19. Custom Widget
            20. URLInput Widget
            21. TextInput Widget
            22. Array Widget
            23. Captcha Widget
            24. Geolocation Widget
          1. Version
          2. Project Version Tab
          3. Project Definition Tab
          4. Project Description Tab
          5. Project Rights Tab
          6. Project Versioned Files Tab
          7. Project Collection Tab
          8. Project Files Tab
        2. Collections
          1. Providers
          2. Processes
          3. Connectors
        3. Revision
          1. Composite API Configuration Tab
          2. Composite API Design Tab
          1. Process Input Tab
          2. Process General Tab
          3. Process Measures Tab
          4. Process Variables Tab
            1. Gate
            2. Process Step Output Variables
              1. Process Task Functional Tab
              2. Process Task Connector Tab
              3. Process Task Script Tab
              4. Process Task Loop Tab
              5. Process Task SubProcess Tab
              6. Process Task Manual Tab
              7. Process Task Email Tab
            3. Process Step Input Variables
            4. Process Step Testing Variables
              1. Process Intermediary Event
              2. Process Start Event
              3. Process Timer Event
          5. Process Design
          1. Organization
          2. Roles entities
        1. My Applications
        2. Files
        3. Home
        1. Process Examples
        2. Connectors
        1. Web Interface Reports
          1. Parameters
          2. Runtime Users
          3. Execution Path
          4. Measuring
        1. Configuration
        2. Users
        3. Usage
      1. Mobile
      2. Offline
      1. Collections BackOffice
      2. Collections To List
      3. Collections To Array
      4. Collection JS Freemarker
      1. Access Rights
      2. Delegation
      3. Compound Organization Hierarchy
      4. Dynamic Lanes
      5. Scripted Lanes
      6. Runtime Lanes

    JavaScript Report

    A report widget can be used when your application requires users to interact with large amounts of data, and you want to load it in small chunks, filtered and/or paginated to keep the web pages lightweight and fast loading.

    Our report widget achieves this automatically for you, with no coding necessary. We support three types of data sources - Web interface reports, Process reports, and Collections.

    The JavaScript Report allows further customization; you can load the report widget with your own data, and provide the same user experience (i.e. filters, pagination and sort).

    1 Display and filter the data

    1. In the designer view for your web interface, choose the report widget. Set it to type JavaScript from the options offered under Other Report.

    js_report_1

    2. Define the columns, just as you would for any report. The JSON that you will 'set' to the widget should have the same key as the properties defined here.

    js_report_col

    js_report_2

    3. Set the script, the visible items max, and the identifier.
    The Loading Data Script is the JavaScript that will read and populate the report widget. This JavaScript is executed every time the user interacts with the report (for pagination, filter and reload).
    Visible Items specifies how many records should be displayed per page (for pagination).
    The Identifier gives the widget an identifier, this can be referenced from the JavaScript.

    js_report_3

    In the script below we will use a Composite API (id_capi) to fetch, paginate, filter, and sort data from a third party connector. These aspects are not handled by the JavaScript report as the other report types do (Web interface reports, Process reports, and Collections), but should be handled by your script.

    We have APIs that help you to configure your JavaScript report:

    • id_report.setLoading(true/false) Displays the report progress bar while loading and preparing data
    • id_report.getSortedColumns() Get sorting conditions input by user
    • id_report.getFilters() Get filter conditions input by user
    • id_report.setData(data, options) Fills the report with a JSON array
    • P_first Get the pagination index.

    Example

     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    function successCallback(P_computed){
        var reportOptions = {
            // count of the available data items (mandatory)
            // if the count of data items is not known you should use RMP_Report.DYNAMIC_COUNT here
            count:P_computed.count,
            // pagination index (mandatory)
            first:P_first,
            // A text that may be displayed in the report pager if data items' count is not known (optional)
            pagerCount: "xxx"
        };
        // P_computed.data is a json array that should have the same structure configured in step (2)
        id_report.setData( P_computed.data, reportOptions )
        id_report.setLoading(false);
    }
    
    function failureCallback(P_error){
        alert(JSON.stringify(P_error));
        id_report.setLoading(false);
    }
    
    // the input object is used by the composite API to retrieve, paginate, filter and sort data by calling a third party connector
    var input = {};
    input.pageSize = 20;
    input.first = P_first;
    // sortedColumns looks like [{"order":"name","orderby":"desc"},...]
    input.sortedColumns = id_report.getSortedColumns();
    // currentFilters looks like [{"filter":"name","value":"hakim","operator":"CONTAINS"},...]
    input.currentFilters = id_report.getFilters();
    
    id_report.setLoading(true);
    id_capi.trigger(input,{},successCallback,failureCallback);
    

    4. You can save and test the web interface. You should see the report widget with data filled in with your JSONObject.

    reportwithdata

    2 Exporting the data

    2.1 Exporting a page of data

    A Javascript report enable you to export (in CSV format) the data that is currently displayed on the report by clicking on the export icon.

    export_button

    If you choose the customize option, you will be able to customize your CSV export by choosing :

    • the values separator (comma, semi-colon or tabulation)
    • the charset of the created file
    • the decimal separator (period or comma)
    • the date format (used only for the date columns of the report)

    On the other hand, Your default export is a default configuration based on the language of the connected user.

    export_choice

    2.2 Exporting all of the data

    Let's now imagine that the data you want to display is paginated. Exporting it as above will only give you a CSV containing only the data that is currently displayed. If you want to be able to export all the data, you will have to develop the export feature.

    2.2.1 Configuring the report

    Since you are able to display any kind of data (including from third parties), the platform cannot know what the source of the data is or how this full export should be done. For this reason, you will need to configure your own process to export all the data. Once you have this process configured (see section 2.2.2), you will simply need to attach it to your JavaScript report in the Web interface designer. You can use the Parameter field to pass any required parameters to the process.

    config_process_export

    When the user chooses to Export, if a process is attached to the report an additional checkbox Receive all data, by e-mail will be available on the Customize ... page. If this checkbox is checked when the user clicks on the Export button, the process that has been configured will be launched with some inputs containing the filters chosen by the user, the CSV settings selected and any parameters specified in the parameter field.

    export_full_choice

    2.2.2 Configuring the export process

    An export process should have a simple structure.

    process_export

    In this example, the process contains four simple steps :

    • Init : This step initializes the pagination
    • Get Superheroes as JSONArray : This step loops over the Composite API used to display the data in the JavaScript report. The loop retrieves the data from the third-party if they are paginated. The output of this task is a JSONArray containing all the data.
    • From JSON to CSV : This step creates the CSV file based on the output of the previous step.
    • Send Mail : This step sends an email to the connected user with the CSV file as an attachment.

    We will consider each step in detail:

    1. Init

    We intialize the JSONArray all_superheroes to an empty JSONArray [].

    2. Get Superheroes as JSONArray

    Since the pagination management depends completely on the source of the data, we will not explain in details how to do it. We will just explain how to compute the final output of the task. At the end of each iteration of the loop, you have to add the JSONArray returned by the Composite API to the all_superheroes variable. To do so, we assign all_superheroes with the following freemarker code

    1
    2
    <#assign output = all_superheroes + ${P_result}.data>
    ${output}
    

    3. From JSON to CSV

    The role of this step is to transform the data obtained in the previous step (all_superheroes in the example) into a CSV file. This involves 2 steps :

    • transforming the JSONArray into a CSV text
    • save the CSV text in a file

    To do this we will use the json_to_csv freemarker method to create the variable superheroes_as_csv and assign it with the following value: ${json_to_csv(all_superheroes,options)}

    the options variable is a JSONObject representing the options of the CSV generation. It is good practice to create it by taking into account the choices of the end user. An example of assignation of this options variable could be :

    1
    {"separator":"${separator}","header":true,"parse_dates":{"date":"${date_format}"}}
    

    with

    • separator an input variable passed to the process by the JavaScript report and matching the choice of the end user
    • header an option to generate the headers in the CSV file
    • date_format an input variable passed to the process by the JavaScript report and matching the choice of the end user. In our example, the data exported does not contain any date column which make this option unnecessary.

    An example of the input variables passed to an export process:

    full_export_inputs

    Once the CSV text is created (and stored in the variable superheroes_as_csv in the example), the only thing left to do is to store it in an uploaded file. To do so, we create a new variable output_file_creation and assign it with the following value :

    1
    ${create_file("superheroes.csv", superheroes_as_csv,charset)}
    

    The charset variable is an input variable passed to the process by the JavaScript report and matching the choice of the end user.

    from_json_to_csv

    4. Send Mail

    Configure your task to send an email with your preferred email provider. Configure the email task to send it to the end user.

    1
    To : ${P_user.login}
    

    and attach the file created in the previous step

    1
    Attached file: ${output_file_creation}
    

    You should now be able to export all of your data.