Is there a way to identify tabs?

SuiteCRM Forum - English Language Developer Collaboration
1

I have multiple tabs that I have placed in Cases using Studio. Each tab may or may not be displayed based on what the Case is for. Each tab may have data from an external system (not stored in Suite CRM) that may need to be updated from the external system when the Case is loaded.

I have placed the order of the tabs in no special order but once I put this code in production most likely someone is going to ask for the order of the tabs changed. I am looking for a way to identify each tab no matter what the order of the tabs are. The id attribute of each tab is tab# where number correlates to the order of the tab. By being able to identify a tab other than by its number will help in preventing issues down the road if someone changes the order.

Any ideas on how this might be done?

2

Hi Tkoehn, it seems to me you’re trying to hide/show panels via a Javascript (JQuery ?) function,… is that the case?
If yes, if you can select them by the order just inspect the source code in a browser;
you’ll see something like:

image
image1294×227 5.71 KB

so you could refer to them as:

$("#detailpanel_-1")
$("#detailpanel_0")

…
in the editview or

$( "#top-panel-0" ).parent()
$( "#top-panel-1" ).parent()

…
in detailview.

If you cannot refer to them by the order, you could refer them by theirs data.

ie:

$('div[data-label=\"LBL_AOS_PRODUCTS_OPPORTUNITIES_1_FROM_AOS_PRODUCTS_TITLE\"]')

$('div[data-label=\"LBL_LAST_NAME\"]').show()

you can do the same using data-id.

1 Like
3

@LionSolution, Thanks, I did’t have any panels in some of the tabs. I did took another path. Its a bit more more complicated but it allows me to not rely on tab numbers. I added hidden fields into each tabs tab-content section. If someone knows another way of adding hidden fields I would like to know how to do that.

Not sure if anyone can use this but here’s what I did.

Purpose:
I needed to populate fields on a new Case from our billing system. The billing system needs to know what type of service I needed to pull data from. Our billing system uses fixed fields for data and depending on the service you are requesting, the fields contain different data. This was the reason I needed to know what each tab was for.

I added some non-db type fields with some customCode to insert a hidden field and then using studio I added these fields to each tab.

So in custom/Extension/modules/Cases/Ext/Vardefs I added a file named case_tabs.php.
In this file I added several variables:

$dictionary['Case']['fields']['hiddentab_iptv'] = array(
    'name' => 'hiddentab_iptv',
    'vname' => 'hiddentab_iptv',
    'type' => 'hidden',
    'source' => 'non-db',
    'studio' => 'visible',
    'inline_edit' => false,
    'customCode' => '<input type=\'hidden\' name=\'tab\' value=\'iptv\' />',
);

I changed the name, vname and customCode value for each type of hidden field I wanted to add.

I used JavaScript to hide these div’s upon document.ready():

  $("div[data-field^='hiddentab']").hide(); // Hides hiddentab 
  $("div[data-field^='hiddentab']").next().hide();  // Hides next empty div

Here is some code I used to post to the server. The purpose was to go grab data from our billing system to populate fields on a new Case.

if ($("input[name='record']")) {
    if ($("input[name='record']").val() != "") {
      // Existing Record so Load up data for each tab.
      if ($("[name='bm_userid_c']").val() > 0) {
        var tabs = {};
        $("a[id^='tab']:visible:not(':first')").each(function () {
          var tabnum = $(this).attr('id').match(/tab(\d)/)[1]; // Get Tab #
          if (tabnum > 0) {
            var arr = [];
            $flds = $("#tab-content-" + tabnum + " div[field]").each(function () {
              arr.push($(this).attr("field"))
            });

            $flds = $("div.tab-panel-" + tabnum + " div[field]").each(function () {
              arr.push($(this).attr("field"))
            });

            var tabname = $("div#tab-content-" + tabnum).children().find('input[type="hidden"][name="tab"]').val();

            if (arr.length > 0) {
              var obj = {
                "tab": (tabnum !== undefined) ? tabname : null,
                "fields": arr
              }
              tabs[tabnum] = obj;
            }
          }
        });

        $.ajax({
          method: "GET",
          url: "/index.php?entryPoint=caseGetServices",
          data: "get=getServiceData&userId=" + $("[name='bm_userid_c']").val() + "&data=" + JSON.stringify(tabs),
          method: "POST",
          type: JSON,
          success: populateServiceData,
        });
      }
    }
  }


function populateServiceData(obj) {
  $.each(obj.data, function (tab, fields) {
    $.each(fields, function (fieldname, fieldvalue) {
      $("[name='" + fieldname + "']").val(fieldvalue);
    });
  });
}

The caseGetServices entrypoint just pulls data back from the billing system.

Tony

1 Like
4

Great Tkohen, and thanks for sharing. Your solution is good too