×

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

    Backoffice for Collections

    Introduction

    To populate a collection and edit existing items, you have to create a backoffice : a place to list all items and add/update/delete ones.

    For every collection you create, you have to design:

    • a custom widget to enter/display the content of each item
    • a webinterface embedding a report widget to display the content of the collection + the above custom widget to add/update/delete items

    In this tutorial we'll create a backoffice for the collection 'cars':

    • Backoffice - Car - Web Interface
    • Backoffice - Car - Custom Widget

    Note:
    The best practice is to create the collection in the MAIN project of your application and to put the backoffice in a separate ADMIN project.
    The USERS of a project are able to read the content of the collections and are able to open the webinterfaces in the current project.
    As only admins will be able to interact with the backoffice but everybody can read content of the collection, there must be 2 separated projects.
    The MAIN project must be included into the ADMIN project.

    Ex : the main application is a car order approval.
    So the main project will be Car Order Approval - MAIN. This will contain the webinterfaces, the workflow processes related to the order and the collection cars.
    There will be another project Car Order Approval - ADMIN containing the backoffice to manage the content of the collection, and including the Car Order Approval - MAIN project.

    To sum up :
    Car Order Approval - ADMIN : contains backoffice of the collection
    Car Order Approval - MAIN : contains the collection

    Behaviour of the backoffice

    The goal is to display the list of cars (Backoffice - Car - Web Interface), and to be able to

    • Add a new one (Add link)
    • Edit or delete an existing one (pen & cross icon)

    Backoffice - Cars - Web Interface will look like :

    2013-02-05_155312

    Create the collection

    The best practice when you create a collection is to use only lower case characters and underscores, no special characters.
    Here, we'll create cars collection, within the 'Car Order Approval - MAIN' project.
    Be careful : as the collection name is used when you interact with collection using freemarker, you should NEVER change its name.

    Create 'Backoffice - Car - Custom Widget'

    Create Car brands list

    As every car will be associated to a brand, let's create a custom list 'Car brands', within the 'Car Order Approval - ADMIN' project :

    2012-05-28_161417

    Note : do only use lower case characters and underscores for values

    Create the custom widget

    Now, create a new webinterface, name it 'Backoffice - Car - Custom Widget' (1), type 'Custom widget'(2), still within the 'Car Order Approval - ADMIN' project.

    2013-02-05_201413

    Note : a custom widget is a group of widgets you can reuse within any web interface

    Go to Design tab and add the following fields :

    2012-05-28_162010

    • Brand : List widget, type 'Custom list', where you'll choose the 'Car brands' list you've created before.
    • Car ID : Text input widget (as it will be generated automatically and you don't want the user to be able to modify it, set it as hidden, in the 'Rules' tab of the widget).
    • Name : Text input widget.
    • Engine : Text input widget.

    Note 2 : When you create items in a collection, you have to choose a field as a unique ID to distinguish each item in the collection. This is what car_id is for. Whatever the way you add items (javascript, REST API, Freemarker), do ensure every ID is unique (in this example, we've created and used the RMPApplication.uuid() function to generate the id).

    Save the custom widget.

    Create 'Backoffice - Car - Web Interface'

    Create a webinterface 'Backoffice - Car - Web Interface', type 'Launchable web interface', again within the 'Car Order Approval - ADMIN' project.

    2013-02-05_205504

    Switch to Collections tab, add collection cars and change its identifier to col_items

    2013-02-05_205342

    Then switch to Design tab :

    2013-02-05_202204

    (1) Create a html widget with following code

    1
    <a href="#" onClick="javascript:clean_item();"> <img src="https://rmp-public.s3.amazonaws.com/public/icons/n_add.png"/>&nbsp;Add a new item</a>
    

    It will display 'Add an item' link

    (2) Create a section widget

    • Header : Detail Item
    • Identifier : id_section_item

    2013-02-05_202431

    (3) In the section widget, include 'Backoffice - Car - Custom Widget' Custom widget

    • Variable : my_item
    • Identifier : id_my_item

    2013-02-05_202613

    (4) Add a html widget with following code:

    1
    <a href="#" onClick="javascript:add_item();"><img src="https://rmp-public.s3.amazonaws.com/public/icons/n_save.png">&nbsp;Add</a>
    

    And add visibility rule "[[action]]" == "add"

    2013-02-05_202824

    It will display 'Add' action link.

    (5)Add a html widget with following code:

    1
    <a href="#" onClick="javascript:update_item();"><img src="https://rmp-public.s3.amazonaws.com/public/icons/n_save.png">&nbsp;Save</a>
    

    Add visibility rule "[[action]]" == "update"

    It will display 'Save' action link

    (6) Create a html widget

    • Leave content as empty
    • Identifier : id_html_msg

    It will display information when item has been properly added, updated, deleted.

    (7) Add a report widget over collection

    2013-02-05_203502

    • (A) Choose collection 'cars'
    • (B) Identifier : id_report
    • (C) Then configure the report:

    2013-02-05_203908

    Here's we choose what field of the items will be displayed as columns.

    • (D) Add property name | Header Name
    • (E) Add property brand_label | Header Brand label
    • (F) Add property brand_id | Header Brand id
    • (G) Add property engine | Header Engine
    • (H) Add property '' (leave empty)| Header Links
    • (I) Click on the page icon on row Links and enter the following code

    This code will create two clickable icons for editing or deleting an item

    1
    "<a href=\"#\" onClick=\"javascript:load_item(\'" + "[[car_id]]" + "\');\"><img src=\"https://rmp-public.s3.amazonaws.com/public/icons/n_edit.png\"></a>&nbsp;&nbsp;&nbsp;<a href=\"#\" onClick=\"javascript:delete_item(\'" + "[[car_id]]" + "\');\"><img src=\"https://rmp-public.s3.amazonaws.com/public/icons/n_delete.png\"></a>";
    

    car_id will have to be replaced by your own item id variable name.

    This script will display 2 html links to edit an item (pen) and delete an item (red cross).

    • (J) Add property car_id | Header car_id
    • (K) Make the car_id column invisible

    Note : to be able to use car_id value into other columns (ex : Links) you must create car_id column (but you can hide it).

    (8) Create a hidden split widget

    (9) Create a Javascript widget called 'JS def', within the previously created split widget, with following code :

      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
     32
     33
     34
     35
     36
     37
     38
     39
     40
     41
     42
     43
     44
     45
     46
     47
     48
     49
     50
     51
     52
     53
     54
     55
     56
     57
     58
     59
     60
     61
     62
     63
     64
     65
     66
     67
     68
     69
     70
     71
     72
     73
     74
     75
     76
     77
     78
     79
     80
     81
     82
     83
     84
     85
     86
     87
     88
     89
     90
     91
     92
     93
     94
     95
     96
     97
     98
     99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    function clean_item() {
        //empty supercar section to create a new one
        id_section_item.setVisible(true);
        id_section_item.open();
        RMPApplication.set("my_item", "{}");
        RMPApplication.set("action", "add");
    }
    
    //add car
    function add_ok(result) {
        id_html_msg.setHtml("<font color='green'><i>Item added</font><i>");
        clean_item();
        id_report.refresh();
    }
    
    function add_ko(result) {
        //Error while adding item in the collection
        id_html_msg.setHtml("<font color='red'><i>Error while adding new item</font><i>");
    }
    
    function add_item() {
        var my_object = eval('(' + RMPApplication.get("my_item") + ')');
        if(!car_already_exists(my_object.name,my_object.brand_id)){
            my_object.car_id = RMPApplication.uuid();
            col_items.saveCallback(my_object, add_ok, add_ko);
        }else{
            id_html_msg.setHtml("<font color='red'><i>Car already exists!</font><i>");
        }
    }
    
    //udpate car
    function update_ok(result) {
        id_html_msg.setHtml("<font color='green'><i>Item Saved</font><i>");
        clean_item();
        id_report.refresh();
    }
    
    function update_ko(result) {
        //Error while updating item in the collection
        id_html_msg.setHtml("<font color='red'><i>Error while saving item</font><i>");
    }
    
    function update_item() {
        var my_pattern = {};
        my_pattern.car_id = RMPApplication.get("my_item.car_id");
        var my_object = eval('(' + RMPApplication.get("my_item") + ')');
        col_items.updateCallback(my_pattern, my_object, update_ok, update_ko);
    }
    
    //load_car
    function load_ok(result) {
        id_html_msg.setHtml("<font color='green'><i>Item loaded</font><i>");
        id_section_item.setVisible(true);
        id_section_item.open();
        RMPApplication.set("my_item", result[0]);
        RMPApplication.set("action", "update");
    }
    
    function load_ko(result) {
        id_html_msg.setHtml("<font color='red'><i>Error while loading item</font><i>");
        id_report.refresh();
    }
    
    function load_item(car_id) {
        var my_pattern = {};
        my_pattern.car_id = car_id;
        col_items.listCallback(my_pattern, {}, load_ok, load_ko);
    }
    
    //delete_car
    function delete_ok(result) {
        id_html_msg.setHtml("<font color='green'><i>Item deleted</font><i>");
        id_report.refresh();
        //empty custom widget
        RMPApplication.set("my_item", "{}");
        RMPApplication.set("action", "add");
    }
    
    function delete_ko(result) {
        //Error while deleting item from the collection
        id_html_msg.setHtml("<font color='red'><i>Error while deleting item</font><i>");
    }
    
    function delete_item(car_id) {
        var my_pattern = {};
        my_pattern.car_id = car_id;
        var my_object = eval('(' + RMPApplication.get("my_item") + ')');
        col_items.removeCallback(my_pattern, delete_ok, delete_ko);
    }
    
    function exists_ok(result) {
        if(result[0]){
            res=true;
        }else{
            res=false;
        }
    }
    
     function exists_ko(result) { }
    
    function car_already_exists(name,brand_id){
        var my_pattern = {};
        my_pattern.name = name;
        my_pattern.brand_id = brand_id;
        var options = {};
        options.asynchronous = false;
        res=false;
        col_items.listCallback(my_pattern, options, exists_ok, exists_ko);
        return res;
    }
    

    Save your web interface and preview it.

    You're done, give it a try!