Custom Button in Menu Header

[AshaHB]

Hi, I have a requirement wherein to place a custom button(Submit Certification) in the header.

Adding the code which I have used to create the Custom button:

<div class="toolbar-app-buttons-left">
<a title="Set Value" class="tb-btn-link-left" id="btnSetValue" href="javascript:void(0);" data-check-dirty="false">
<div class="tb-btn" data-icon="&#xE348" data-icon-pos="left">Submit Certification</div>

</a>

</div>

<script type="text/javascript">
var integration = {
statusFieldId:"field ID",
statusSubmit:"Value ID"
};
$('#btnSetValue').click(function(){
UpdatesValueList(integration.statusFieldId, integration.statusSubmit);
$('#master_btnSave').click();
});

function UpdatesValueList(changeId, assignedValue) {
var valueArray = new Array(1);
valueArray[0] = assignedValue;
$CM.setFieldValue(changeId, valueArray, '');
$('#master_btnSave').click();
}
</script>

It all works fine I just now need to add this button header menu. 

[DavidPetty]

Asha, give this a shot.

<script type="text/javascript">
     if($('#btnSetValue').length == 0) $('<div class="workflow-app-buttons"><a title="Submit Certification" class="tb-btn-link-left" id="btnSetValue" href="javascript:void(0);" data-check-dirty="false"><div class="tb-btn" data-icon="&#xE348" data-icon-pos="left">Submit Certification</div></a></div>').insertAfter('#master_toolbar');

     var integration = {
          statusFieldId:"field ID",
          statusSubmit:"Value ID"
     };

     $('#btnSetValue').click(function(){
          UpdatesValueList(integration.statusFieldId, integration.statusSubmit);
          $('#master_btnSave').click();
     });
     
     function UpdatesValueList(changeId, assignedValue) {
          var valueArray = new Array(1);
          valueArray[0] = assignedValue;
          $CM.setFieldValue(changeId, valueArray, '');
          $('#master_btnSave').click();
     }
</script>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[AshaHB]

Hi David,

Thanks for response.I have tried the code. Attaching the screenshot below this is how it is showing. It is not added in the header still

[DavidPetty]

Replace line 2 with,

if($('#btnSetValue').length == 0) $('<div class="workflow-app-buttons"><a title="Submit Certification" class="tb-btn-link-left" id="btnSetValue" href="javascript:void(0);" data-check-dirty="false"><div class="tb-btn" data-icon="&#xE348" data-icon-pos="left">Submit Certification</div></a></div>').insertAfter('#master_btnSave1');‍‍‍‍‍

If you want the button further down in the toolbar, inspect the button that you want your button to appear after and replace what's inside the .insertAfter() with that button id, make sure you include the # at the beginning.

[AshaHB]

Hi David,

Thanks for the help.

Can we make the button to similar to other buttons in the picture. Any help with this will be much helpful David

[DavidPetty]

Asha, you can use the browser and right-click on one of the buttons and select Insect.  You can see what styles are applied to those button and do the same for your button.

Just an FYI the buttons will change style when you upgrade to Archer 6.7+

[AshaHB]

Hi David,

This is the code when I have inspected got this

<a id="master_btnEdit" class="tb-btn-link-left" href="javascript:void(0);" title="Edit" aria-disabled="false" role="button" data-check-dirty="true" tabindex="0"><div class="tb-btn " data-icon-pos="left" data-icon="">Edit</div></a>

I have tried modifying it. Not working

Thanks Again

[AshaHB]

I wanted to know if there is possibility to hide the button which I have created based on Status

[DavidPetty]

Try replacing line 2 with,

if($('#btnSetValue').length == 0) $('<a title="Submit Certification" class="tb-btn-link-left" id="btnSetValue" href="javascript:void(0);" data-check-dirty="false"><div class="tb-btn" data-icon="&#xE348" data-icon-pos="left">Submit Certification</div></a>').insertAfter('#master_btnSave1');‍

For hiding the button, see my post here, Dec 8, 2020 8:29 AM (rsa.com)

[AshaHB]

Thanks David for the Immediate  help.