Create EDIT button in Widget page

[Sohini Kar]

NEED URGENT HELP!!!

Requirement: As per below screenshot, there is an option: Edit roles. 

Edit roles will provide roles in Drag and drop method.

Now my requirement is "EDIT ROLE" should be a Button. Not a link as shown below.

The HTML Code of the widget is below:

<div ng-if="data.isValid && data.show_config" class="panel panel-default b">
<div class="panel-heading">
<h4 class="panel-title" >${Actions}</h4>
</div>
<div class="panel-body">
<!-- Edit roles action -->
<div class="m-b-xs" >
<span > • </span>
<a href="javascript&colon;void(0)" ng-click="editRoles()">${Edit Roles}</a>
</div>

<!-- Enable/Disable login -->
<div class="m-b-xs" >
<span > • </span>
<a id="enable_login" ng-if="c.data.locked" href="javascript&colon;void(0)" ng-click="c.lock(false)">${Enable Login}</a>
<a id="disable_login" ng-if="!c.data.locked" href="javascript&colon;void(0)" ng-click="c.lock(true)">${Disable Login}</a>
</div>
</div>
</div>

Can you please tell me how can I change it to Button?

[Sohithanjan G · Accepted solution]

Hi @Sohini Kar 

To change the "Edit Roles" option from a link to a button, you need to modify the HTML code to use the <button> element instead of the <a> (anchor) element. Here's how you can do it:

<div ng-if="data.isValid && data.show_config" class="panel panel-default b">
    <div class="panel-heading">
        <h4 class="panel-title">${Actions}</h4>
    </div>
    <div class="panel-body">
        <!-- Edit roles action -->
        <div class="m-b-xs">
            <span> • </span>
            <button type="button" class="btn btn-default" ng-click="editRoles()">${Edit Roles}</button>
        </div>

        <!-- Enable/Disable login -->
        <div class="m-b-xs">
            <span> • </span>
            <a id="enable_login" ng-if="c.data.locked" href="javascript&colon;void(0)" ng-click="c.lock(false)">${Enable Login}</a>
            <a id="disable_login" ng-if="!c.data.locked" href="javascript&colon;void(0)" ng-click="c.lock(true)">${Disable Login}</a>
        </div>
    </div>
</div>

In the above code, I've replaced the <a> element with a <button> element. I've also added the type="button" attribute to ensure it behaves like a button and doesn't trigger any default anchor behavior. Additionally, I've given the button a class of "btn btn-default" assuming you want it to look like a default button. You can adjust the class according to your styling requirements.

[Sohini Kar]

Hi, Thanks for your help.

 I need two more help from your.

1) Can you please tell me the process to move the edit button on top right side? Currently it is showing like this:

2) I want to create another edit button which will take value from User table. Something like this:

Is it possible to create such Edit button on Widget Portal Page?