Description
The 'Edit' icon in 'Actions' column in multi-row variable set is not displayed correctly when non-English language is selected after upgrade to Utah EA.
Steps to Reproduce
1.Create a catalog item with multi row value set
2.Switch to English
3.Open the catalog item which is created in step1 on portal
4.Add new row for multi row value set
==>'Edit' icon in 'Actions' column in MRVS is displayed correctly.
5.Switch to Japanese
6.Open the catalog item which is created in step1 on portal
7.Add new row for multi row value set
==>'Edit' icon in 'Actions' column in MRVS is NOT displayed
Workaround
For workaround, Create a UI Macro with the name 'sp_element_sc_multi_row' and copy paste the below given contents in the XML field.
<div class="wrapper-md r-2x" ng-if="field.columns_meta.length > 0" ng-class="{'b': !c.isMEE}">
<sp-widget widget="c.activeRow" ng-if="c.activeRow"></sp-widget>
<div ng-if="!field.readonly && !field.sys_readonly" ng-class="{'m-l m-b ': c.isMEE, 'form-group': !c.isMEE}" style="min-height:0px;">
<button type="button" title="{{::field.max_row_tooltip_msg}}" class="btn btn-primary m-r" ng-click="c.createRow()" ng-disabled="!c.canInsert()" id="{{::field.sys_id}}_add_row" aria-label="{{c.addButtonAriaLabel}}">${gs.getMessage('Add')}</button>
<button type="button" class="btn btn-default" ng-click="c.clearValue()" ng-disabled="!c.canClearValue()" aria-label="{{c.removeAllButtonAriaLabel}}">${gs.getMessage('Remove All')}</button>
</div>
<div style="overflow-x: auto;">
<table class="table table-bordered table-striped" ng-class="{'m-b': c.isMEE, 'm-b-xs': !c.isMEE}" aria-describedby="id-caption-mrvs">
<caption id="id-caption-mrvs" class="sr-only">{{::field.label}}</caption>
<thead>
<tr>
<th id="id-actions" scope="col" ng-if="!field.readonly && !field.sys_readonly" class="text-nowrap">${gs.getMessage('Actions')}</th>
<th id="id-question-{{::col.id}}" scope="col" ng-repeat="col in ::field.columns_meta track by col.id" class="text-nowrap">{{::col.label}}</th>
</tr>
</thead>
<tbody>
<tr ng-if="field._value.length == 0 ">
<td ng-if="!field._loadingData" class="text-center" colspan="{{::field.columns_meta.length + 1}}">${gs.getMessage('No data to display')}</td>
</tr>
<tr ng-if="field._loadingData">
<td class="text-center" ng-if="field._value.length == 0" colspan="{{::field.columns_meta.length + 1}}">
<i class="fa fa-spinner fa-pulse fa-3x fa-fw" aria-hidden="true" title="${HTML:gs.getMessage('Updating value')}"></i>
<span class="sr-only">${gs.getMessage('Updating value')}</span>
</td>
</tr>
<tr ng-repeat="row_display_value in field._displayValue track by $index" ng-animate="{enter: 'animate-enter', leave: 'animate-leave'}" style="word-break: keep-all;">
<td headers="id-actions" ng-if="!field.readonly && !field.sys_readonly" ng-class="{ 'actions-mobile': {{ c.isMEE }} }">
<a href="javascript:void(0);" class="wrapper-xs fa fa-pencil" role="button" data-original-title="${HTML:gs.getMessage('Edit Row')}" aria-label="${HTML:gs.getMessage('Edit Row')} {{$index + 1}}" data-toggle="tooltip" data-placement="top" ng-click="c.updateRow($index)" ng-class="{'btn disabled no-border' : c.disableMRVSActions}"></a>
<a href="javascript:void(0);" class="wrapper-xs fa fa-close" role="button" data-original-title="${HTML:gs.getMessage('Remove Row')}" aria-label="${HTML:gs.getMessage('Remove Row')} {{$index + 1}}" data-toggle="tooltip" data-placement="top" ng-click="c.deleteRow($index)" ng-class="{'btn disabled no-border' : c.disableMRVSActions}" id="remove-row-{{$index}}"></a>
</td>
<td headers="id-question-{{::col.id}}" ng-repeat="col in ::field.columns_meta track by col.id" style="text-overflow: ellipsis;">{{c.getCellDisplayValue(row_display_value[col.name], col.type)}}</td>
</tr>
</tbody>
</table>
</div>
</div>
Note: Please make sure when the instance is upgraded with the next release, the above created UI Macro will be to deleted/deactivated in order for the new changes to be picked up.
Related Problem: PRB1648445