Important Update: Some Community URL Redirects are Under Maintenance. Learn More. .

cancel
Showing results for 
Search instead for 
Did you mean: 

Custom Object Button for <Previous and Next> Tab set

AliHariKrishna
Contributor III

Hi All,

 

We have just developed a custom object code which can help to navigate Previous and Next Tab set within the record.

Please see the code below and expecting your valuable suggestions and corrections :

 

<!DOCTYPE html>
<html>
<body><style type="text/css">
.btn{color:#FFF!important;text-shadow:0 -1px 0 rgba(0,0,0,.25);background-image:none!important;border:5px solid #FFF;border-radius:0;box-shadow:none!important;-webkit-transition:background-color .15s,border-color .15s,opacity .15s;-o-transition:background-color .15s,border-color .15s,opacity .15s;transition:background-color .15s,border-color .15s,opacity .15s;vertical-align:middle;margin:0;position:relative}.btn-primary,.btn-primary.focus,.btn-primary:focus{background-color:#428bca!important;border-color:#428bca}.btn-primary.focus:hover,.btn-primary:active:hover,.btn-primary:focus:active,.btn-primary:focus:hover,.btn-primary:hover{background-color:#1b6aaa!important;border-color:#428bca}.btn-primary.no-border:active,.btn-primary.no-border:hover{border-color:#1b6aaa}.btn-primary.no-hover:active,.btn-primary.no-hover:hover{background-color:#428bca!important}.btn-primary.active,.btn-primary.active:focus,.btn-primary.active:hover,.btn-primary.focus.active{background-color:#2f7bba!important;border-color:#27689d}.btn-primary.no-border.active{background-color:#2b72ae!important;border-color:#2b72ae}.btn-info,.btn-info.focus,.btn-info:focus{background-color:#6fb3e0!important;border-color:#6fb3e0}.btn-info.focus:hover,.btn-info:active:hover,.btn-info:focus:active,.btn-info:focus:hover,.btn-info:hover{background-color:#4f99c6!important;border-color:#6fb3e0}.btn-info.no-border:active,.btn-info.no-border:hover{border-color:#4f99c6}.btn-info.no-hover:active,.btn-info.no-hover:hover{background-color:#6fb3e0!important}.btn-info.active,.btn-info.active:focus,.btn-info.active:hover,.btn-info.focus.active{background-color:#5fa6d3!important;border-color:#4396cb}.btn-info.no-border.active{background-color:#539fd0!important;border-color:#539fd0}.btn-info.disabled,.btn-info.disabled.active,.btn-info.disabled:active,.btn-info.disabled:focus,.btn-info.disabled:hover,.btn-info[disabled],.btn-info[disabled].active,.btn-info[disabled]:active,.btn-info[disabled]:focus,.btn-info[disabled]:hover,fieldset[disabled] .btn-info,fieldset[disabled] .btn-info.active,fieldset[disabled] .btn-info:active,fieldset[disabled] .btn-info:focus,fieldset[disabled] .btn-info:hover{background-color:#6fb3e0!important;border-color:#6fb3e0}.previous{float:left}.next{float:right}.pager{padding-left:0;margin:20px 0;list-style:none;text-align:center;width:50%}
</style>
<div class="pager"; align="left">
<button class="btn btn-info previous">
← Previous
</button>
<button class="btn btn-primary next">
Next →
</button>
</div>
<script>
var btnElm= document.getElementsByClassName("previous");
btnElm[0].addEventListener('click',function(){
var currentActive=document.getElementsByClassName('rtsSelected')[0];
var parentLi=currentActive.parentNode;
var previousElm=parentLi.previousSibling;
while(previousElm && previousElm.nodeType != 1) {
previousElm = previousElm.previousSibling
}
console.log(previousElm);
var linkTag=previousElm.getElementsByTagName("a");
linkTag[0].className += " rtsSelected rtsClicked";
currentActive.classList.remove('rtsSelected');
currentActive.classList.remove('rtsClicked');
linkTag[0].click();
});
var btnElmnext= document.getElementsByClassName("next");
btnElmnext[0].addEventListener('click',function(){
var currentActive=document.getElementsByClassName('rtsSelected')[0];
var parentLi=currentActive.parentNode;
var nextElm=parentLi.nextSibling;
while(nextElm && nextElm.nodeType != 1) {
nextElm = nextElm.nextSibling
}
console.log(nextElm);
var linkTag=nextElm.getElementsByTagName("a");
linkTag[0].className += " rtsSelected rtsClicked";
currentActive.classList.remove('rtsSelected');
currentActive.classList.remove('rtsClicked');
linkTag[0].click();
});
</script>
</body>
</html>

 

Thanks and Best Regards

HariKrishna

4 REPLIES 4

jsol5
Advocate II

Thanks for sharing!

You were looking for some feedback... I built something similar, but what I had done was stuck the script/custom object in an existing section (in other words, a section that exists on every application/record) so that I didn't need to create a section specific to the custom object.

Then, within each tab, I added a custom object with the html for the button... Obviously, each button calls that script.

This way, there's no extra sections on the layout for either the custom object or the button(s).

 

 

tab buttons.png

 

 

*Can't remember why I used "module" in my button names. lol

Hello Jason,

 

Thanks for the response, if you can just share the code then we can check how we can improve this..

 

Thanks and Best Regards

HariKrishna

Posted my version here - https://community.rsa.com/docs/DOC-99632 

Thanks Jason for sharing the information..