RMP Arrays to create a Collection Backoffice like functionality

[somesh.m...@gmail.com]

Hi,

You have an excellent tutorial which directs us how to use a backoffice page for Collections to control data within the collection here:

https://sites.google.com/a/runmyprocess.com/user-guide-runmyprocess/3---developer-guide/data/collection/backoffice-for-collections-v2

I am trying to do the same thing: Show a summarized reporting view with the option to Add/Edit or Delete using the Control widget (as there in your example above), but without using a RMP collection and instead by using a RMP array only.

My question: Does anyone have a working sample for this already, which I can refer to?

Thanks!

[Gareth Thiveux]

Hi Somesh,

I'm sorry but I don't really understand what you're trying to achieve here.

What do you mean by "Control Widget" ? Are you refering to the Custom widget/the "Detail Item" section ?

If you don't have any collection, where would the information be coming from ? Where would it be stored ?

Compared to the BackOffice tutorial, you would like to keep the top section "Detail Item" and replace the collection report by an array ? Is that it ?

Regards,

Gareth THIVEUX

Pre-Sales Consultant / Consultant Avant-Vente

 Fujitsu RunMyProcess

22 rue Chauchat, 75009 Paris - France (GMT+1)

website : Fujitsu RunMyProcess

     

Fujitsu RunMyProcess user? Please add a review on GoogleApps Marketplace

Afin de contribuer au respect de l'environnement, merci de n'imprimer ce message qu'en cas de nécessité.
Be environmentally friendly: do not print this email unless it is entirely necessary.

2013/8/13 <somesh.m...@gmail.com>

--
Fujitsu - RunMyProcess
---
You received this message because you are subscribed to the Google Groups "RunMyProcess Support Forum" group.
To unsubscribe from this group and stop receiving emails from it, send an email to supportforum...@runmyprocess.com.
To post to this group, send email to suppor...@runmyprocess.com.
Visit this group at http://groups.google.com/a/runmyprocess.com/group/supportforum/.
To view this discussion on the web visit https://groups.google.com/a/runmyprocess.com/d/msgid/supportforum/001fc736-0683-4bcf-b512-ff8ae38739c2%40runmyprocess.com.
For more options, visit https://groups.google.com/a/runmyprocess.com/groups/opt_out.

[somesh.m...@gmail.com]

"Compared to the BackOffice tutorial, you would like to keep the top section "Detail Item" and replace the collection report by an array ? Is that it ?"

Yep - That's it.

I do not need the data captured in a collection because the scope of the data is only the process instance.

Apologies for not being able to articulate the need properly.

[Gareth Thiveux]

No problem, it was clear enough, but as it's not a common request, I wanted to be sure to understand your need.

Why do you want to fill the data into an section before "sending" this data into the array below instead of directly filling in the array ?

The advantage and the aim of the array is that you can directly type in it, which you can't do with a report, that's why we needed a backoffice to easily interact with the collection.

Sorry for bothering you with so many questions, but I'm just trying to figure out if this is really the feature you need or if your need could be answered an easier way.

Regards,

Gareth THIVEUX

Pre-Sales Consultant / Consultant Avant-Vente

 Fujitsu RunMyProcess

22 rue Chauchat, 75009 Paris - France (GMT+1)

website : Fujitsu RunMyProcess

     

Fujitsu RunMyProcess user? Please add a review on GoogleApps Marketplace

Afin de contribuer au respect de l'environnement, merci de n'imprimer ce message qu'en cas de nécessité.
Be environmentally friendly: do not print this email unless it is entirely necessary.

2013/8/13 <somesh.m...@gmail.com>

"Compared to the BackOffice tutorial, you would like to keep the top section "Detail Item" and replace the collection report by an array ? Is that it ?"

--
Fujitsu - RunMyProcess
---
You received this message because you are subscribed to the Google Groups "RunMyProcess Support Forum" group.
To unsubscribe from this group and stop receiving emails from it, send an email to supportforum...@runmyprocess.com.
To post to this group, send email to suppor...@runmyprocess.com.
Visit this group at http://groups.google.com/a/runmyprocess.com/group/supportforum/.

To view this discussion on the web visit https://groups.google.com/a/runmyprocess.com/d/msgid/supportforum/e199e406-cbaf-48bb-b69d-9a33dff24f26%40runmyprocess.com.

[somesh.m...@gmail.com]

Thanks Gareth.

Let me try to create an example use case to describe the functionality: Let's assume that we have a web page, where a manager can come in and add the professional history of an employee, for evaluation. Hence, the manager needs to be able to add as many professional history entries he wants to, using an "add" option.

Now, the reporting view (array list view) would only display a summarized view of the details the manager has entered and hide the unwanted columns. For example, let's say that the manager entered the previous company name, start year, end year, position, remuneration, title, responsibility and job description (let's assume this is a text area), while "add"ing the detail, the reporting view would only show the company, start year and end year in the list view.

Now, on click of edit, the full details should show up.

Also, there are certain fields like "job description" which is difficult to fill up from the array grid text box and should be available for add/update only in the full detail view.

[somesh.m...@gmail.com]

Certain functions on the RMP Array widget like getRowsCount()/insertRow() helped me facilitate adding rows to an existing array but the pushing and refresh of data needs more client side JS coding.

I presume I would just stick with Collections, unless you can suggest some easier and feasible way using arrays.

[Gareth Thiveux]

Hi Somesh,

I'll build an example on my side and share screenshots with you to help design yours.

Regards,

Gareth THIVEUX

Pre-Sales Consultant / Consultant Avant-Vente

 Fujitsu RunMyProcess

22 rue Chauchat, 75009 Paris - France (GMT+1)

website : Fujitsu RunMyProcess

     

Fujitsu RunMyProcess user? Please add a review on GoogleApps Marketplace

Afin de contribuer au respect de l'environnement, merci de n'imprimer ce message qu'en cas de nécessité.
Be environmentally friendly: do not print this email unless it is entirely necessary.

2013/8/14 <somesh.m...@gmail.com>

Certain functions on the RMP Array widget like getRowsCount()/insertRow() helped me facilitate adding rows to an existing array but the pushing and refresh of data needs more client side JS coding.

I presume I would just stick with Collections, unless you can suggest some easier and feasible way using arrays.

--
Fujitsu - RunMyProcess
---
You received this message because you are subscribed to the Google Groups "RunMyProcess Support Forum" group.
To unsubscribe from this group and stop receiving emails from it, send an email to supportforum...@runmyprocess.com.
To post to this group, send email to suppor...@runmyprocess.com.
Visit this group at http://groups.google.com/a/runmyprocess.com/group/supportforum/.

To view this discussion on the web visit https://groups.google.com/a/runmyprocess.com/d/msgid/supportforum/0c51f5ba-b9de-468a-afa7-37cbfac2df0c%40runmyprocess.com.

[somesh.m...@gmail.com]

Thanks Gareth!

[Gareth Thiveux]

Hi Somesh,

Here we are.

As you can see, I haven't changed anything in the web interface, except replacing the collection report by an array and changing the content of the custom widget based on the example you've given me :

This is the Backoffice - Employee - CW. I've replaced fields related to the car by fields linked to your example.

They all have variables and IDs based on their name (Company field => company / id_company, Row ID => row_id / id_row_id, Start year => start_year / id_start_year ...). Row ID field is invisible and inactive.

Let's go back to the main interface.

So we've replaced the collection by an array. array_employees will be its variable and id_array_employees its ID.

We've created the columns that correspond to the fields in the custom widget. We'll then use the same names/variables/ids : Column Company => company/id_company ...

We've just added an extra column that we've called Links, which is an HTML widget, and its ID is id_links

And this is the code what you should copy and paste in this HTML : 

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

All the columns of the array (and the array itself, in the Rules tab) have been set to inactive, and only Company, Start year, End year and Links columns have been ticked as visible.

Last detail, in the scripts linked to Add rows and Delete rows you should add the following (in both of them) :

for(var i=0;i<id_array_employees.getRowsCount();i++){

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

}

Last but not least thing to change is the content of def JS widget at the bottom of the interface. Here's the new content :

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");

 id_my_item.load();

}

//add employee

function add_item() {

var nb_rows = id_array_employees.getRowsCount();

if(nb_rows == 1 && (id_array_employees.id_company[0].getValue() == "" || id_array_employees.id_company[0].getValue() == "undefined" || id_array_employees.id_company[0].getValue() == null)){

nb_rows--;

} else {

id_array_employees.insertRow(nb_rows);

}

id_array_employees.id_company[nb_rows].setValue(RMPApplication.get("my_item.company"));

id_array_employees.id_start_year[nb_rows].setValue(RMPApplication.get("my_item.start_year"));

id_array_employees.id_end_year[nb_rows].setValue(RMPApplication.get("my_item.end_year"));

id_array_employees.id_position[nb_rows].setValue(RMPApplication.get("my_item.position"));

id_array_employees.id_remuneration[nb_rows].setValue(RMPApplication.get("my_item.remuneration"));

id_array_employees.id_title[nb_rows].setValue(RMPApplication.get("my_item.title"));

id_array_employees.id_responsibility[nb_rows].setValue(RMPApplication.get("my_item.responsibility"));

id_array_employees.id_description[nb_rows].setValue(RMPApplication.get("my_item.description"));

id_html_msg.setHtml("<font color='green'><i>Item added</font><i>");

  id_section_item.close();

  id_section_item.setVisible(false);

RMPApplication.set("my_item", "{}");

RMPApplication.set("action", "add");

id_my_item.load();

}

//udpate employee

function update_item() {

var row_id = RMPApplication.get("my_item.row_id");

  id_section_item.setVisible(false);

id_array_employees.id_company[row_id].setValue(RMPApplication.get("my_item.company"));

id_array_employees.id_start_year[row_id].setValue(RMPApplication.get("my_item.start_year"));

id_array_employees.id_end_year[row_id].setValue(RMPApplication.get("my_item.end_year"));

id_array_employees.id_position[row_id].setValue(RMPApplication.get("my_item.position"));

id_array_employees.id_remuneration[row_id].setValue(RMPApplication.get("my_item.remuneration"));

id_array_employees.id_title[row_id].setValue(RMPApplication.get("my_item.title"));

id_array_employees.id_responsibility[row_id].setValue(RMPApplication.get("my_item.responsibility"));

id_array_employees.id_description[row_id].setValue(RMPApplication.get("my_item.description"));

id_html_msg.setHtml("<font color='green'><i>Item Saved</font><i>");

}

//load employee

function load_item(row_id) {

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.row_id",row_id);

RMPApplication.set("my_item.company",id_array_employees.id_company[row_id].getValue());

RMPApplication.set("my_item.start_year",id_array_employees.id_start_year[row_id].getValue());

RMPApplication.set("my_item.end_year",id_array_employees.id_end_year[row_id].getValue());

RMPApplication.set("my_item.position",id_array_employees.id_position[row_id].getValue());

RMPApplication.set("my_item.remuneration",id_array_employees.id_remuneration[row_id].getValue());

RMPApplication.set("my_item.title",id_array_employees.id_title[row_id].getValue());

RMPApplication.set("my_item.responsibility",id_array_employees.id_responsibility[row_id].getValue());

RMPApplication.set("my_item.description",id_array_employees.id_description[row_id].getValue());

RMPApplication.set("action", "update");

}

//delete_employee

function delete_item(row_id) {

if(id_array_employees.getRowsCount() == 1 && row_id == 0){

id_array_employees.insertRow(0);

row_id++;

}

id_array_employees.removeRow(row_id);

id_html_msg.setHtml("<font color='green'><i>Item deleted</font><i>");

//empty custom widget

RMPApplication.set("my_item", "{}");

RMPApplication.set("action", "add");

id_my_item.load();

}

You should be all good now.

Keep me posted if you have any issue or if you need any explanation about this mini-tutorial.

Regards,

Gareth THIVEUX

Pre-Sales Consultant / Consultant Avant-Vente

 Fujitsu RunMyProcess

22 rue Chauchat, 75009 Paris - France (GMT+1)

website : Fujitsu RunMyProcess

     

Fujitsu RunMyProcess user? Please add a review on GoogleApps Marketplace

Afin de contribuer au respect de l'environnement, merci de n'imprimer ce message qu'en cas de nécessité.
Be environmentally friendly: do not print this email unless it is entirely necessary.

2013/8/14 <somesh.m...@gmail.com>

Thanks Gareth!

--
Fujitsu - RunMyProcess
---
You received this message because you are subscribed to the Google Groups "RunMyProcess Support Forum" group.

To unsubscribe from this group and stop receiving emails from it, send an email to supportforum+unsubscribe@runmyprocess.com.

To post to this group, send email to suppor...@runmyprocess.com.
Visit this group at http://groups.google.com/a/runmyprocess.com/group/supportforum/.

To view this discussion on the web visit https://groups.google.com/a/runmyprocess.com/d/msgid/supportforum/2f9fa742-1315-4ecb-b96e-0848b0306d50%40runmyprocess.com.

[somesh.m...@gmail.com]

Excellente! Merci!

I will try this out, design my use case and let you know.

[somesh.m...@gmail.com]

Hi Gareth,

Apologies for not being able to circle back earlier in the day. I was able to follow the tutorial above and design my use case successfully.

Included the following snippet within the JS functions add_item and delete_item by using a common JS function:

for(var i=0;i<id_array_employees.getRowsCount();i++){
id_array_employees.id_links[i].setHtml("<a href=\"#\" onClick=\"javascript:load_item("+i+");\"><img src=\"https://rmp-public.s3.amazonaws.com/public/icons/n_edit.png\"></a>&nbsp;&nbsp;&nbsp;<a href=\"#\" onClick=\"javascript:delete_item("+i+");\"><img src=\"https://rmp-public.s3.amazonaws.com/public/icons/n_delete.png\"></a>");
}

Appreciate your help in this regard.

Thanks!

[Gareth Thiveux]

Hi Somesh,

Good to hear that it's working fine.

About the code you're mentionned, I was more thinking about putting it into the add/delete scripts related to the array (see below) :

But if it's working as fine by placing this code directly into the add and delete item functions in the JS code, that's even better !

Regards,

Gareth THIVEUX

Pre-Sales Consultant / Consultant Avant-Vente

 Fujitsu RunMyProcess

22 rue Chauchat, 75009 Paris - France (GMT+1)

website : Fujitsu RunMyProcess

     

Fujitsu RunMyProcess user? Please add a review on GoogleApps Marketplace

Afin de contribuer au respect de l'environnement, merci de n'imprimer ce message qu'en cas de nécessité.
Be environmentally friendly: do not print this email unless it is entirely necessary.

2013/8/15 <somesh.m...@gmail.com>

--
Fujitsu - RunMyProcess
---
You received this message because you are subscribed to the Google Groups "RunMyProcess Support Forum" group.
To unsubscribe from this group and stop receiving emails from it, send an email to supportforum...@runmyprocess.com.
To post to this group, send email to suppor...@runmyprocess.com.
Visit this group at http://groups.google.com/a/runmyprocess.com/group/supportforum/.

To view this discussion on the web visit https://groups.google.com/a/runmyprocess.com/d/msgid/supportforum/3e78b086-9d56-4ef5-ba9b-c529cd6fecc4%40runmyprocess.com.

[somesh.m...@gmail.com]

Thanks Gareth.

Another question, though unrelated to the original question (if you want I can convert this to a different post)

In the Backoffice - Employee - CW, if I want to do some field validations on save and update (For example, let's assume that I want to make the Company Name, Start Year and End Year mandatory), how should I go about it? Even if I set these fields on the Backoffice - Employee - CW as required, the validation would never trigger.

Should I make these field as required on the RMP rule and then fire the widgetID.isValid() within the add_item and update_item JS methods to enforce the validation check against each field I want to?

Another related question: I have noticed that the field level error messages are default displayed inline (beside the respective field). Is there a easy way to turn this off and group all the error messages in separate location (let's say on the top of the page?)

Thanks again for your help!

[Dimitri MELCHIOR Pro]

Hi Somesh,

Regarding your first question, indeed, you must use the widgetID.isValid() inside the add_item or update_item. Even more, if you have only one BackOffice in that page, you can use the following script :

function showType(widget) {

  try {

    if(!widget.isValid()){

      alert(widget.getName()); /* Inject what you want for notification there */

    }

  }

  catch(err){}

}

RMPWidgets.forEachWidget(showType);

------------------------------------------------------------

Regarding your second question, let me make you a proposal. First, I would like to introduce you to a way to enhance information framed html classes (refer below) :

To create it, first Save the following icons and upload them onto your account :

• success :
  

• error :
  

• info :
  

• warning :
  

Then, copy and paste this CSS code inside your stylesheet or create a new stylesheet that you will attach to your web interface (replace what is in red by the url of previously uploaded icons) :

.info, .success, .warning, .error {

    border: 1px solid;

    margin: 10px 10px;

    padding:15px 10px 15px 50px;

    background-repeat: no-repeat;

    background-position: 10px center;-moz-border-radius:.5em;

    -webkit-border-radius:.5em;

    border-radius:.5em;

    font-weight:bold;

}

.info {

    color: #00529B;

    background-color: #BDE5F8;

    background-image: url('.../info.png');

}

.success {

    color: #4F8A10;

    background-color: #DFF2BF;

    background-image:url('.../success.png');

}

.warning {

    color: #9F6000;

    background-color: #FEEFB3;

    background-image: url('.../warning.png');

}

.error {

    color: #D8000C;

    background-color: #FFBABA;

    background-image: url('.../error.png');

}

Finally, inject this HTML code inside an HTML widget in a new web interface :

<div class='info'>Test with class success.</div>

<div class='success'>Test with class success.</div>

<div class='warning'>Test with class warning.</div>

<div class='error'>Test with class error.</div>

-------------------------------------------------------------------------

Now let's use our Javascript function with our newly created class "error" to make all of our error messages not inline but at the top.

function showType(widget) {

  try {

    if(!widget.isValid()){

      my_html = my_html + widget.getLabel() + widget.getValidationVariableMessage() +"<br>" /* Inject what you want for notification there */

    }

  }

  catch(err){}

}

my_html = "";

RMPWidgets.forEachWidget(showType);

if(my_html!=""){

  id_html_error.setHtml("<div class='error'>"+my_html+"</div>");

}

and finally let's make Error meassages that are inline being hidden injecting that CSS :

.LabelError{display:none;}

------------------------------------------------

Let me know if you meet  some difficulties.

--

Dimitri MELCHIOR

PreSales Consultant

Contact: dmel...@runmyprocess.com

Tel: +331 75 77 51 78

Mobile : +336 52 70 89 82

Website: Fujitsu RunMyProcess

     

Fujitsu RunMyProcess user? Please add a review on GoogleApps Marketplace

Afin de contribuer au respect de l'environnement, merci de n'imprimer ce message qu'en cas de nécessité.
Be environmentally friendly: do not print this email unless it is entirely necessary.

--
Fujitsu - RunMyProcess
---
You received this message because you are subscribed to the Google Groups "RunMyProcess Support Forum" group.
To unsubscribe from this group and stop receiving emails from it, send an email to supportforum...@runmyprocess.com.
To post to this group, send email to suppor...@runmyprocess.com.
Visit this group at http://groups.google.com/a/runmyprocess.com/group/supportforum/.

To view this discussion on the web visit https://groups.google.com/a/runmyprocess.com/d/msgid/supportforum/a29e1caf-ca0d-4b35-b4b4-e827b352c0c7%40runmyprocess.com.