add button, link in tab set

  • 1
  • Question
  • Updated 4 years ago
  • Answered
Looking for a solution for our requirement. we have a detail page containing tab set. object record detail is in one tab and rest of the tabs correspond to its child objects. now customer wants some common actions to be displayed in tab set itself. reason to have it in tabset so that buttons are visible all the time and user doesn't have to click on a tab first to access buttons. we cannot put these buttons above tabset as we already have differently styled buttons in page title section.

there is no direct way of adding button or link in tabset. i was trying to use jquery but it adds button in tab section and not in tabset (tab panel). is there a workaround to achieve this?

thanks
Photo of Sunny Sharma

Sunny Sharma

  • 678 Points 500 badge 2x thumb

Posted 4 years ago

  • 1
Photo of Sunny Sharma

Sunny Sharma

  • 678 Points 500 badge 2x thumb
somehow managed to do it by trial and error. will post solution once i make a dynamic component of it.
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
Glad you were able to make this work.  JQuery was going to be your answer all along.  We'd love to see the details of how you got it figured out. 
Photo of Sunny Sharma

Sunny Sharma

  • 678 Points 500 badge 2x thumb
hi Rob,

with trial and error, I wa able to achieve it with following code:

(function(skuid){         var $ = skuid.$;
    // Register a snippet to run 
    skuid.snippet.registerSnippet('UtilityDetailIcons',function(changeInfo){
        var MODEL_ID = 'Opportunity';
        var uaRow = skuid.model.getModel(MODEL_ID).getFirstRow();
        
var varOppId = uaRow['Id'];
var varOppName = uaRow['Name'];
var varDiv = '<div style="padding: 5px 2px 0px 0px;" align="right">';
varDiv += '<a href="link" target="_blank"><div class="image class" title="title"></div></a>';
varDiv += '</div>';

$("#tabSetId ul").append(varDiv);
    });
    // Run the snippet initially on page load
    $('.nx-page').one('pageload',function(){
        skuid.snippet.getSnippet('UtilityDetailIcons')();
    });
})(skuid);

tabSetId corresponds to id of tab panel. 

however, i am trying to figure out if i can make this work dynamically across all pages. will post my updated code once i am able to do it.