The CreatorCon Call for Content is officially open! Get started here.

Duplicate a row within a MRSV?

MBarrott
Mega Sage

The business would like the ability to duplicate a row on a MRVS at the Service Portal / Catalog Item level, so if they have one row that holds 90% of the same data they can just duplicate it and then make the changes.

 

I know there is the ability to modify and remove rows but surprised this isn't an OOTB feature to copy an entire row.

 

Is this a doable?

1 ACCEPTED SOLUTION

MBarrott
Mega Sage

Resolved the issue - I used a custom widget on the form. 

 

The end result has a button which goes across the Catalog Item. That is my personal preference but if you'd like something half the size or more custom then you can change that via CSS. 

 

Here is the HTML and Client controller (everything else remained default) if anyone needs to use it. 

 

HTML:

<div>
  <button type="button" class="btn btn-primary btn-block" ng-click="c.DupLastRow()">
    Duplicate Last Row
  </button>
</div>

Client Controller:

api.controller=function($scope) 
{
  /* widget controller */
    var c = this;
  c.DupLastRow = function() 
  {
    var g_form = $scope.page.g_form;
    var fieldName = "[YOUR MRVS]"; // <-- change to your MRVS internal name

    var mrvs = JSON.parse(g_form.getValue(fieldName) || '[]');
    if (!mrvs.length) return;

    var lastRow = JSON.parse(JSON.stringify(mrvs[mrvs.length - 1])); 
    mrvs.push(lastRow);

    g_form.setValue(fieldName, JSON.stringify(mrvs));
  };
};

 Example:

MBarrott_0-1748631910812.png

 

View solution in original post

4 REPLIES 4

Robert H
Mega Sage

Hello @MBarrott ,

 

Here is a very cheap trick:

 

Add a select box variable with one option named something like "Duplicate last row" underneath your MRVS, and tie the following onChange Client Script to it:

 

function onChange(control, oldValue, newValue, isLoading) {
    if (isLoading || newValue == '') {
        return;
    }

    var mrvsName = 'my_mrvs';

    var data = g_form.getValue(mrvsName);
    if (!data) return;

    var rows = JSON.parse(data);
    if (rows.length > 0) {
        var lastRow = rows[rows.length - 1];
        g_form.setValue(mrvsName, JSON.stringify(rows.concat(lastRow)));
    }

    g_form.clearValue('mrvs_action');

}

 

Result:

 

RobertH_0-1748626926053.png

 

Regards,

Robert

 

Hi @Robert H - this actually worked great but ran into issues when testing on the Service Portal. I found adding a custom widget achieved the result via a button press. Greatly appreciate you taking the time to help me!

Hello @MBarrott ,

 

That's great. Maybe you can share your widget code here for the benefit of the community, and then mark your post as the correct answer.

 

Regards,

Robert

MBarrott
Mega Sage

Resolved the issue - I used a custom widget on the form. 

 

The end result has a button which goes across the Catalog Item. That is my personal preference but if you'd like something half the size or more custom then you can change that via CSS. 

 

Here is the HTML and Client controller (everything else remained default) if anyone needs to use it. 

 

HTML:

<div>
  <button type="button" class="btn btn-primary btn-block" ng-click="c.DupLastRow()">
    Duplicate Last Row
  </button>
</div>

Client Controller:

api.controller=function($scope) 
{
  /* widget controller */
    var c = this;
  c.DupLastRow = function() 
  {
    var g_form = $scope.page.g_form;
    var fieldName = "[YOUR MRVS]"; // <-- change to your MRVS internal name

    var mrvs = JSON.parse(g_form.getValue(fieldName) || '[]');
    if (!mrvs.length) return;

    var lastRow = JSON.parse(JSON.stringify(mrvs[mrvs.length - 1])); 
    mrvs.push(lastRow);

    g_form.setValue(fieldName, JSON.stringify(mrvs));
  };
};

 Example:

MBarrott_0-1748631910812.png