Forums/Community/Community tips & tricks

Show or hide tabs based on organization tags (Web portal)

Mikhail Zakharov
posted this on April 19, 2012 23:42

Original topic placed here https://support.zendesk.com/entries/175801-show-or-hide-tabs-based-... . But this method based on OrganizationID and is not flexible. I'll show other way to control menu tabs, based on organization tags.

For example we need to show "Create new" and "My requests" tabs for organization without tag "expired". There are two ways:

- Create single Custom HTML widget with script. This widget will hide tabs if organization has a tag "expired". But you can't place this widget to all pages e.g. forum post.

- Create two widgets. Global CSS which will hide tabs for everyone and Custom HTML which will show tabs if organization hasn't a tag "expired".

I choose second way. Let's do it.

 

1. Create Global CSS widget and place next code:

.tab_new
{
display:none;
}

.tab_requests
{
display:none;
}

 

2. Create Custom HTML widget and place it to all pages.

<p> Show menu widget</p>

<script type="text/javascript" charset="utf-8">

Event.observe(document, 'widgets:load', function() {

new Ajax.Request('/users/current.json',
    {
    method:'GET',asynchronous: true,onSuccess: function(transport)
        {
        var obj = transport.responseText.evalJSON();
        org_id = obj['organization_id'];

        new Ajax.Request ('/organizations/'+org_id+'.json',
            {
            method:'GET',asynchronous: true,onSuccess: function(transport)
                {
                var obj = transport.responseText.evalJSON();
                tags = obj['current_tags'];
                    
                if (tags.search("expired")<0)
                    {
                    $j('.tab_new').show();
                    $j('.tab_requests').show();
                    };
                };
            });
        }
    });
        
});
</script>

 

 

Comments

User photo
Duke Adamonis
nuodb

This is exactly what I was looking for. It's so much more efficient to control access to the tabs based on the organization rather than the OrgID. Thank you!

July 30, 2012 13:55
User photo
Duke Adamonis
nuodb

I spoke too soon. While the tabs are successfully hidden the Custom HTML doesn't display them based on the org tag. I have placed the HTML widget on the Home and Forums pages, does it need to go anywhere else?

July 30, 2012 14:10
User photo
Mikhail Zakharov
Портал технической поддержки

Hi Duke.

Glad to see that my post is helpful for you.

Now I'm using Global Javascript widget. This is easier than Custom HTML. In this case you no need to place widget on pages.

Try to deactivate Custom HTML widget and create Global Javascript widget with code from sec.2 between "Event.observe"

 

 

new Ajax.Request('/users/current.json',
    {
    method:'GET',asynchronous: true,onSuccess: function(transport)
        {
        var obj = transport.responseText.evalJSON();
        org_id = obj['organization_id'];

        new Ajax.Request ('/organizations/'+org_id+'.json',
            {
            method:'GET',asynchronous: true,onSuccess: function(transport)
                {
                var obj = transport.responseText.evalJSON();
                tags = obj['current_tags'];
                    
                if (tags.search("expired")<0)
                    {
                    $j('.tab_new').show();
                    $j('.tab_requests').show();
                    };
                };
            });
        }
    });

July 30, 2012 22:56
User photo
James Reeves
infinitez

Hi - This is also exactly what Im looking for, but unfortunately, I dont read javascript very well.

 

What I currently use to add a menu to the menu bar is the following:

Event.observe(window, 'load', function() {
$$('#top-menu #green')[0].insert('<li class="main"><a class="tab">More</a><ul class="menu-drop"><li><a href="link here" target="_self">some text</a></li></ul></li>');
});

 

I would like to have this menu displayed based on the user having a specific tag (like your "expired") ... How do I combine your method of testing for that Tag and conditionally executing my code?

 

August 03, 2012 16:36
User photo
James Reeves
infinitez

Well, you know what they say about monkeys typing at a keyboard ... with enough hacking I figured it out ... thanks for the original idea of how to do this!! Here's what I ended up doing:

Add a Widget using the Global Javascript with the following code:

 

Event.observe(window, 'load', function() {

new Ajax.Request('/users/current.json', {
method: 'GET', asynchronous: true, onSuccess: function (transport) {
var obj = transport.responseText.evalJSON();
org_id = obj['organization_id'];

new Ajax.Request('/organizations/' + org_id + '.json', {
method: 'GET', asynchronous: true, onSuccess: function (transport) {
var obj = transport.responseText.evalJSON();
tags = obj['current_tags'];

// ***** Check the tag "special_tag" *****
if (tags.search("special_tag") >= 0) {
// add the menu
$$('#top-menu #green')[0].insert('<li class="main"><a class="tab">Special Menu</a><ul class="menu-drop"><li><a href="https://some-link" target="_self">Some text</a></li></ul></li>');
};

}
});

}
});
});

August 03, 2012 16:54
User photo
Mikhail Zakharov
Портал технической поддержки

Hi James,

I'm glad that you found solution :) It's really good variation of my script.

August 05, 2012 21:35
User photo
James Reeves
infinitez

Hi Mikhail - I'd like to check the tag based on the Users tags and not the organization tag. How can I reference just the user tag? 

August 06, 2012 17:55
User photo
Mikhail Zakharov
Портал технической поддержки

James,
If you need to operate a user tag you can also use this script. It's will be simplier.

I post only script part here.

Event.observe(document, 'widgets:load', function()
{
new Ajax.Request('/users/current.json',
{
method:'GET',asynchronous: true,onSuccess: function(transport)
{
var obj = transport.responseText.evalJSON();
tags = obj['current_tags'];

if (tags.search("expired")<0)
{
$j('.tab_new').show();
$j('.tab_requests').show();
}
};
});
});

 

at pastebin http://pastebin.com/pF77LmJ3

August 06, 2012 21:56
User photo
Mikhail Zakharov
Портал технической поддержки

Original script runs next steps

1. Get current user data

2. Read OrganizationID from user data

3. Get organization data by OrganizationID

4. Read Tags from organization data

 

For reading only user's tags steps 2-4 can be removed.

August 06, 2012 21:59
User photo
James Reeves
infinitez

Actually, I dont think its possible to read the user tags since this information is not available to a user. You can get the current user info with /users/current.json but it does not contain the current_tags data. Curiously, you can read the organization tags, as in the original example.

August 06, 2012 22:05
User photo
Mikhail Zakharov
Портал технической поддержки

User's tags are inherited from organization. Yes, if you set up only organization tags you can see it in user info (in webpage) and tickets but not in user.json data. In this case I have to read current user data and organization data in my script.

But If you set's user's tags directly in user info the "current_data" will contain those tags.

 

p.s. I would be glad if Zendesk has finally made a normal comments editor, with the ability to insert images :)

August 06, 2012 22:52
User photo
Daniel Bechtel
pentaho

Hi Mikhail,

I am trying to implement your script above but I am running into issues where the user cannot execute the json and I get  the following error back when querying the organization (current user works)

{
  "error": {
    "title": "Forbidden",
    "message": "You do not have access to this page. Please contact the account owner of this help desk for further help."
  }
}

Did you run into this and if yes how did you overcome?
Thanks
Daniel
August 10, 2012 12:18
User photo
Skip Moore
Zendesk

@Daniel, Try something like this 

$j.getJSON('/organizations/'+currentUser.organization.id+'.json', function(data){ console.log(data); });
August 10, 2012 12:34
User photo
Daniel Bechtel
pentaho

Skip, I am not a javascript guy. I can copy past etc. and run firebug to debug to see where it goes and what it does, but above does not mean a lot to me.

Could you translate that into the javascript above which Mikhail posted?

August 10, 2012 12:41
User photo
Daniel Bechtel
pentaho

Skip, got it working ... I think, but when I log in as end-user I still get message below in the console.

As admin it works fine.

{  "error": {  "title": "Forbidden",  "message": "You do not have access to this page. Please contact the account owner of this help desk for further help."  } }
August 10, 2012 12:55
User photo
Skip Moore
Zendesk

@Daniel, sorry for the confusion. I was assuming a user when testing and the call worked because of my admin session id. I tried again after logging out and logging in as a user and it fails. 

August 10, 2012 14:42
User photo
Mikhail Zakharov
Портал технической поддержки

Daniel, Skip

I was a little bit not understand what does not work. Authorized user have an access to objects https://yourdomain.zendesk.com/users/current.json and https://yourdomain.zendesk.com/organizations/<id>.json

But  don't have an access to organization or user list

August 12, 2012 23:11
User photo
Duke Adamonis
nuodb

I'm still experiencing an issue getting this to work correctly. Here is what I have done:

1. Updated my Global CSS with:

.tab_new
{
display:none;
}

.tab_requests
{
display:none;
}

NOTE: The CSS code works perfectly

2. Implemented the Global JavaScript widget which Mikhail posted from the 31st:

new Ajax.Request('/users/current.json',
{
method:'GET',asynchronous: true,onSuccess: function(transport)
{
var obj = transport.responseText.evalJSON();
org_id = obj['organization_id'];

new Ajax.Request ('/organizations/'+org_id+'.json',
{
method:'GET',asynchronous: true,onSuccess: function(transport)
{
var obj = transport.responseText.evalJSON();
tags = obj['current_tags'];

if (tags.search("communitysupport")<0)
{
$j('.tab_new').show();
$j('.tab_requests').show();
};
};
});
}
});
NOTE: I changed the tags.search criteria to meet my specific tab name.

The result is; netiher ther new nor requests tab is visable.

I have done all of the standard troubleshooting tihngs:
- Verified syntax is correct
- Testing with the appropriate user accounts
- Verified the tag is correct, etc.
- Both widgets are available to all peopel who are logged in and are end-users

I'm sure I'm missing somethiung basic - any suggestions?

August 13, 2012 07:24
User photo
Daniel Bechtel
pentaho

Mikhail, Duke, Skip

I believe the issue ,at least for me, is that the first Ajax to "get current" works fine. I get the organization ID etc.

But I get the "forbidden" message when doing the call to the organization.

I am working in the Sandbox but logged in with a end-user account.

It appears the end-user does not have authority to pull organization details.

 

Is this a setup issue?

I really need to get this working.

Appreciate any help.

August 13, 2012 07:41
User photo
Mikhail Zakharov
Портал технической поддержки

Hi Daniel,

First of all it looks like I'm posted a script at 31st with a braces mistakes. When I copied it I've deleted some our specific code. Try to use this script (I fixed it)

new Ajax.Request('/users/current.json',
{
method: 'GET',asynchronous: true,onSuccess: function(transport)
{
var obj = transport.responseText.evalJSON();
org_id = obj['organization_id'];
new Ajax.Request('/organizations/'+org_id+'.json',
{
method:'GET',asynchronous: true,onSuccess: function(transport)
{
var obj = transport.responseText.evalJSON();
tags = obj['current_tags'];
if (tags.search("communitysupport")<0)
{
$j('.tab_new').show();
$j('.tab_requests').show();
};
});
}
});

 

But I don't think that it raises "forbidden" error. Maybe It's "sandbox" specific issue. You can try to debug on production account. Only script without hiding by CSS. But in this case you should use special software like Firebug.

Or maybe Skip will answered is it sandbox specific or not.

August 13, 2012 22:21
User photo
Daniel Apone
impinj

Hi,

I'm trying to hide tabs for all users who are not "partners" of ours. I was intending to do this based on the tag associated with individual users, by modifying the Global Javascript widget to this:

 

<p> Show menu widget</p>

<script type="text/javascript" charset="utf-8">

Event.observe(document, 'widgets:load', function() {

new Ajax.Request('/users/current.json',  

{

   method:'GET',asynchronous: true,onSuccess: function(transport)   

{    

var obj = transport.responseText.evalJSON();

    tags = obj['current_tags'];

   if (tags.search("partner")=1)    

{

     $j('.tab_new').show();

     $j('.tab_requests').show();

    }

   };

  });

 });

</script>

 

But it doesn't work. Any thoughts?

 

 

 

August 28, 2012 18:22
User photo
Mikhail Zakharov
Портал технической поддержки

Hi Daniel,

Try to change line

 if (tags.search("partner")=1)  

to

 if (tags.search("partner")>=0)


Script will work after that. 

August 28, 2012 22:36
User photo
Daniel Apone
impinj

Hi Mikhail,

 

Thanks for offering some help (and many thanks for fast help!), but it still doesn't work. I can test parts of the whole setup by:

1. Starting with just the CSS - This properly hides the "Submit a request" and "Check your existing requests" tabs

2. Then, if I make a Global Javascript widget and enter only these 2 lines:

               $j('.tab_new').show();     

               $j('.tab_requests').show();

The tabs show up again. The Javascript properly overrides the CSS.

 

However, when I use the full Javascript that is suggested, the tabs aren't shown. It's as if the script can't pull the user's tags properly, or can't evaluate it properly, or something...Any thoughts? or any tips on how I could debug it further?

 

Thanks!

Dan

 

August 29, 2012 00:18
User photo
Mikhail Zakharov
Портал технической поддержки

Daniel, 

Check out the json object https://yourdomain.zendesk.com/users/current.json. Do you see a filled "current_tags" property? It's may be empty and script doesn't work. 

The "current_tags" property can be empty when tag assigned not to User but to Organization. When you assign tag to Organization you can also see this tag at User's page. But it's only inherits from Organization but not present in current.json. In this case you should read tags from user's Organization like described in topic. Or assign tag to User directly.

 

About debugging. There are two tools for it. If you using FIrefox you can install Firebug plugin. If you using Chome debugging tools ebbedded into it.

August 29, 2012 05:50
User photo
Mikhail Zakharov
Портал технической поддержки
August 29, 2012 06:03
User photo
Justin Seymour
Zendesk

Thanks for your work on this, Mikhail! 

August 29, 2012 10:19
User photo
Skip Moore
Zendesk

@Mikhail, thanks for the code that works. I would add that you can avoid the /users/current.json by using the built in javascript obj for currentUser

new Ajax.Request('/organizations/' + currentUser.organization.id + '.json', { 
method:'GET',
onSuccess: function(transport) {
var obj = transport.responseText.evalJSON(); 
tags = obj['current_tags'];
console.log(tags);
}});
August 29, 2012 10:51
User photo
Daniel Apone
impinj

When I navigate to https://yourdomain.zendesk.com/users/current.json, I see all kinds of details about the current user. (it's a fake customer user that I have set up from a personal email account).

However, there is no "current_tags" property, or anything like it. It's not even listed, let alone populated with the "partner" tag that I have assigned to that specific user. (Note: the tag is not assigned to an Organization, nor is the User even connected to an Organization.)

Is there some setting that I need to enable in order to have User tags exposed to these scripts?

Thanks!

August 29, 2012 13:30
User photo
Mikhail Zakharov
Портал технической поддержки

Hi Daniel,

I'm confused. I'm thought I saw this property in "current.json" object. But now there isn't.

Skip, thank you for tip. I also try to check currentUser.isTagged and currentUser.tags properties but all of them returns false and empty. I directly assigned a tag for user but also cannot get it.

Skip can you give some help to us =)

Test script


alert(currentUser.isTagged());
alert(currentUser.tags());

August 30, 2012 23:41
User photo
Daniel Apone
impinj

Hi Mikhail,

Thanks for continuing to look into this. I've filed a support ticket with Zendesk to ask about this issue. I will let you guys know what I hear from them.

Maybe the User's tags just aren't exposed? And I'll have to use the Organization's tags? (it wouldn't be the end of the world...but we'd prefer the flexibillity of having it at the individual user level...)

Thanks,

Dan

August 31, 2012 11:52
User photo
Daniel Bechtel
pentaho

Ok I finally figured out what was not working for me with the Json calls.

I build another script where I needed similar function but based on the organization from the ticket requester.

Here is the relevant section of my code.

 

       
        $j.getJSON('/api/v2/tickets/' + ticket_id + '.json', function(data)
        {
        console.log(data);
        org_id = data.ticket.organization_id;
        console.log(org_id);
        
        $j.getJSON('/api/v2/organizations/' + org_id + '.json', function(data2)
        {
        console.log(data2);
        orgtags = data2.organization.tags;
        banner_text = data2.organization.name;
        
        console.log(orgtags);
        

                if (include(orgtags,"voc"))
                    {
                         setBanner(banner_text);
                    };


        });

        });

August 31, 2012 14:25
User photo
Daniel Apone
impinj

I have an interesting update (and maybe they'll address this on my support ticket....)

Using the Chrome JS debugger, I can see that End Users cannot access the organization object (but when I'm logged in as an Agent, everything works). End Users get this error:

GET https://impinj.zendesk.com/organizations/22070973.json 403 (Forbidden)

September 02, 2012 20:27
User photo
Daniel Bechtel
pentaho

Daniel,

per the new REST APIs that is to be expected!

I know you are using the old version but I don't think that would have changed.

Getting Organizations

GET /api/v2/organizations/{id}.json

Allowed For

  • Admins
  • Agents
September 04, 2012 05:52
User photo
Allen Lai
bitcasa

Is there a way to show/hide a Global JavaScript widget based on an end-user's tag?

April 09, 2013 13:23
User photo
Andrea Saez

Hi Allen,

I'm not sure this will work for widgets - it's a great idea though ! I've been wanting to do this based on language settings.

April 10, 2013 07:34
User photo
Jennifer Rowe
Zendesk

Andrea,

Here's an update from Allen in another post: "We were able to make it working using currentUser.tags in our JavaScript thanks to the help of Skip!"

April 10, 2013 09:35
User photo
Andrea Saez

Neato - maybe there should be an official widget ;)

April 10, 2013 09:46
User photo
Jennifer Rowe
Zendesk

Andrea, Allen shared an example--so you can make your own unofficial widget. :)

https://support.zendesk.com/entries/23567178

April 10, 2013 14:29
User photo
Andrea Saez

Thanks Jennifer :) We run a fully bilingual help desk, so we decided to keep it simple and simply include a widget for our twitter feed.

April 11, 2013 06:24