×

Please give details of the problem

Docs

Find

    Developer Guide

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

    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!