×

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

    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!