Moving UI action button to top of the form on Service Portal

[Nitin_NOW]

Hello Team

We have an UI action button which exists at bottom left on RITM form on Service Portal. I would like to move this button to top right corner of the form and change the color to 'Blue'. I was trying to configure the it but i see it only shows me the result on ITIL view but not SP form. Any insights on this please ? Below is the image attached for your convenience.

Regards!

[Nitin_NOW]

Yes I figured this out. This will be coming from the widget whatever your page is using there. Please look for that widget put/attach the Client controller, HTML part of your widget here, then I can let you know where we have to make the changes.

Else put your widget xml file if you are comfortable.

Regards!

[Eli Guttman]

HI,

Did anyone was able to find a way to do it?

[SanjivMeher]

Yes. Copy the existing form widget. in the HTML section search for tags which displays the UI actions. Copy and paste it on the top part.

[dave_edgar]

Hi, is this what your after:

Not sure if you got this to work but I had a play.  I made a copy of the Form widget and amended the HTML, copied the panel-footer  section from the bottom and moved it near the top:

Section:

 <div class="panel-footer">
<button ng-click="triggerUIAction(action)" ng-repeat="action in getUIActions('button')" class="btn btn-default action-btn">{{action.name}}</button>
<span>{{status}}</span>
<button ng-if="getPrimaryAction()" type="submit" ng-click="triggerUIAction(getPrimaryAction())" class="btn btn-primary action-btn pull-right">${Save} <span ng-if="saveButtonSuffix">(${{{saveButtonSuffix}}})</span></button>
<div style="clear: both;"></div>
<div ng-if="mandatory.length" class="alert alert-info" style="margin-top: .5em">
<span ng-if="mandatory.length > 0">${Required information} </span>
<span ng-repeat="f in mandatory" class="label label-danger" style="margin-right: .5em; display: inline-block;">{{f.label}}</span>
</div>
</div> 

I put it between:

<div ng-if="!data.isValid && data.emptyStateTemplate" class="panel-shift">
<div class="empty-state-wrapper panel panel-default" ng-include="data.emptyStateTemplate"></div>
</div>

.....

and

....

<div ng-if="data.isValid" class="panel-shift">
<div class="" ng-if="!data.f._view.length && data.hideRelatedLists && data.emptyStateTemplate">
<div class="empty-state-wrapper panel panel-default" ng-include="data.emptyStateTemplate"></div>
</div>

I also changed this line from this:

<button ng-click="triggerUIAction(action)" ng-repeat="action in getUIActions('button')" class="btn btn-default action-btn">{{action.name}}</button>

to this which pulls in the Primary color and moves the bottons to the right:

   <button ng-click="triggerUIAction(action)" ng-repeat="action in getUIActions('button')" class="btn btn-primary action-btn pull-right btn-green">{{action.name}}</button>

and commented out this line which is the Save Cntr+ S button as it conflicts with the UI Save button:

<button ng-if="getPrimaryAction()" type="submit" ng-click="triggerUIAction(getPrimaryAction())" class="btn btn-primary action-btn pull-right">${Save} <span ng-if="saveButtonSuffix">(${{{saveButtonSuffix}}})</span></button>

So instead of this:

I have this:

Hope this helps you or someone else.

[Nisha19]

I tried below code and it worked for me

<div class="panel-title">

<button ng-click="triggerUIAction(action)" ng-if="action.name.toString().toLowerCase()!='save'" ng-repeat="action in getUIActions('button')" class="btn btn-default action-btn pull-right">{{action.name}}</button>
<div style="clear: both;"></div>
<div ng-if="mandatory.length" class="alert alert-info" style="margin-top: .5em">
<span ng-repeat="f in mandatory" class="label label-danger" style="margin-right: .5em; display: inline-block;">{{f.label}}</span>
</div>

</div>