×

Please give details of the problem

Docs

Find

    Developer Guide

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

    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.