Hide ticket forms based on user's organization (Professional Add-on and Enterprise) Follow

Comments

29 comments

  • Avatar
    Ryan Mayes (Edited )

    Awesome article, Robbert! For those interested in limiting tickets by tag and avoiding hard coding form ids, I have a slight variation on this approach.

    In our environment, we named our ticket forms with a prefix to notate which user tag we wanted to tie the form to. For example, "Learner - iPad Repair" would only be available to users with the tag "learner".

    $(window).load(function() {
        var i = 0;
        var checkExist = setInterval(function() {
            i++;
            if ($("a.nesty-input").length){
                clearInterval(checkExist);
                $("a.nesty-input").each(function() {
                    $(this).bind( "click", function() {
                        //Create dictionary of available forms
                        var forms = {}
                        var options = document.getElementById("request_issue_type_select").getElementsByTagName("option");
                        for (i = 1; i < options.length; i++) {
                            forms[options[i].text] = options[i].value;
                        };
                        //Iterate through each form 
                        Object.keys(forms).forEach(function(item){
                            formTag = item.split(" - ")[0].toLowerCase();
                            //Remove forms that do not meet user criteria
                            if (!(~HelpCenter.user.tags.indexOf(formTag))){
                                $(("#"+forms[item])).remove();
                            }
                        });
                    });
                });
            }
            if (i > 10){
                clearInterval(checkExist);
            }
        }, 100);
    });
    
  • Avatar
    Jessie Schutz

    Thanks for sharing your code, Ryan!

  • Avatar
    Rich Lorenzo (Edited )

    Thank you Robert, I think this is going to be useful for me! I gave up on this a while back and implemented a redirect JS to point users who belong to an Org with a specific tag to the associated request form.

    I am far from an advanced coder but I think I can use this same Org tag concept for showing/hiding a form. Has anybody else already done this? Justin's solution sounds closer to what I'm thinking of but I'm not sure that's exactly what I need. I'll have to give this all a closer look some other time.

  • Avatar
    Rich Lorenzo

    I tried to play around a bit with incorporating this with what I'm already doing with finding an Org tag and redirecting but wasn't able to figure it out.

    While I'd love to start celebrating I'm still pretty much where I was before I found this article. I'd ideally like to be able to do things like permission certain forms based on an Org tag like account region or based on product specific Org tags. If your Org purchased access to Platform ABC and XYZ the Org is tag accordingly and when end-users from that Org go to the help center they only see Form ABC and XYZ.

    Since I know you can do look ups for Org tags in the manner I have described and execute certain actions based on their presence it seemed like it wouldn't be that hard to apply that same logic to showing the forms.

    How can I remove all forms by default? I think I'd need to remove them across the board and then only permission them by the logical decisions I described above.

  • Avatar
    Rich Lorenzo (Edited )

    So after playing around with a few ideas I came up with a good solution for my particular setup...and one that I could have done before this article.

    I hide the "My activities" and "Submit a request" links by default on my Zendesk in the CSS. The WWW at large won't see those links. If they know the actual URL for any of our request forms or to the /new page they'll be able to get to those pages but this does not really concern me.

    So I hide those links in the CSS and then look for the relevant Org tag and then show the "Submit a request" link and replace it with the URL to the specific form I want users in Orgs with that Tag to use. I know this doesn't satisfy a use case where certain Org members might need to use more than one form, but for now, this meets our needs:

    // Show the My Activities and Submit a Request links for end-users with the helpcenteraccess tag inherited from their Organization membership

    (function() {
    var isCust;
    // find the helpcenteraccess tag in the array
    function isCustomer(element, index, array) {
    return (element === 'helpcenteraccess');
    }
    // go through the HelpCenter object and look for Org tags
    HelpCenter.user.organizations.forEach(function(x) {
    isCust = x.tags.some(isCustomer);
    return (isCust === true);
    });
    // if user has helpcenteraccess tag show them the links and point them directly to request form
    if (isCust === true) {
    $('a[href$="requests/new"]').show();
    $('.my-activities').show();
    $('#user-menu .my-activities').show();
    $('a.submit-a-request').show();
    $('a.submit-a-request').replaceWith('<a href="https://support.mycompany.com/hc/en-us/requests/new?ticket_form_id=12345"> Submit a request</a> ');
    }
    }());

  • Avatar
    James Boggs (Editor)

    Hi Robert, is there a variation on your code to show a ticket form only to the organization(s) listed? Ticket form would be hidden by default and shown to those in the organization coded into the JS.

  • Avatar
    Rich Lorenzo (Edited )

    Does anyone know if it's possible or how to search for in jQuery a tag that is on the end-user's DEFAULT org only?

    I have this setup where I'm hiding the "choose your product" drop down option globally in the CSS and then using jQuery to change the "submit a request" link to point to a product form that is specified by a tag on the Org.

    Sometimes the same end-user needs to belong to two different product specific Orgs. When this happens I set both of the Orgs for a "product mix" setting which points the submit a request link to the choose your product page and obviously also uses jQuery to show the "choose your product" drop down.

    However, I'm experiencing some issues with this product mix setup when a user belongs to two Orgs with different settings for the submit a request link treatment. I'd like to be able to make the jQuery look for the tag only on the end-user's default Org so that it doesn't get confused when it finds a conflicting tag on a second Org the end-user belongs to.

    I think I'd need to change something in this part if it's possible:

    (function() {
    var isCust;
    // find sdk_form_enabled tag in the array
    function isCustomer(element, index, array) {
    return (element === 'sdk_form_enabled');
    }
    // go through the HelpCenter object and look for Org
    HelpCenter.user.organizations.forEach(function(x) {
    isCust = x.tags.some(isCustomer);
    return (isCust === true);
    });

    Looking for the tag only on the Default org (for Web form submission) would exactly mimic the behavior of an email submitted request. When an end-user is a member of two Orgs a ticket submitted by email is submitted as if from the end-user's Default Org.

    Also, I forgot to mention that I'm also hiding the "Choose your Org" drop down globally on CSS. We have end-user's in "helper" Orgs for various reasons and we don't want to expose those internal Org memberships or give customers the ability to submit a ticket as a member of the "helper Org".

  • Avatar
    Rich Lorenzo (Edited )

    I've given up the idea of trying to hid the Org selector dropdown. I will show that to everyone in more than one Org now.

    I think all of my difficulties come from the fact that Zendesk has some serious limitations regarding curating different experiences for end-users with different product mixes. Does anyone monitor this thread? Here are my two suggestions that would make my job a lot easier:

    1. Make it so that you can assign a support address to an external facing request form. If a customer submits ABC Request Form I should be able to assign support address abc-support@ to that form and if a customer submits XYZ Request Form I should be able to assign support address xyz-support@ to those tickets.

    2. Create more configurable options for showing/hiding various elements on the help center request forms. I've pretty much reached my limit of what I can accomplish with the jQuery. It would help me curate different experiences for users with different product mixes if I could permission access to support request forms based on their Org membership(s). If I'm only in Product ABC Org I should have access to only ABC Form. If I'm in Product ABC and Product XYZ Org I should have access to ABC Form and XYZ Form.

    I permission access to help center content based on Org memberships. And I route tickets based on the agent assigned to a specific Org.

  • Avatar
    Ryan Mayes

    Hey Rich,

    Not sure how helpful this is, but just wanted to let you know that I took a look as well, and I think that you are correct that the default org is not exposed in the HelpCenter object. There is a "default" field for each "organizations" entry, but instead of the expected boolean value, it is actually populated with the mapped domains for the org. Interestingly, each entry in "groups" has a "default" field, and it is populated with the expected boolean value.

    If you switch back to using the default submit a request link, you could use a modified version of the script I posted above in the comments to only show ticket forms in the drop down that are "linked" to orgs the user is a member of.

    -Ryan

  • Avatar
    Rich Lorenzo (Edited )

    Thanks for taking another look at this for me Ryan, this is helpful input.

    I'll revisit this whole thing with a fresh set of eyes and try out some other approaches using your script as the starting point.

    Another unrelated thing that would have helped me is if all of a user's tags would be present on a ticket from all of his Orgs and not just the default Org. This would facilitate email ticket routing through one support address for end-users in more than one Org. when they submit an email I have no way to know that they are in more than one Org. I'd have to put that value on the default Org somehow but then it would apply to all members of that Org while only a subset of members might actually be a member of the other Org.

    My end goal is to leave email tickets through One single support address from members of more than one product/service Org unassigned (a person needs to look at it to know which support group it belongs to). And all tickets submitted through the web form to be routed to the correct group associated with that form. And to only show the web forms that are appropriate for that end user based on his Org membership(s).

    I still feel like there is a way for me to do all of this myself but it would be even better if these sort of configurations were built into the application. I'll keep iterating through ideas it's kind of fun but also stressful because my success in my job depends on it.

  • Avatar
    Rich Lorenzo

    @Ryan Well, I gave this my best shot but I just don't have the ability to do this. I'm trying to use your script but look for the "form tag" on the end-user's Organization(s) rather than on the end-user profile itself.

    I think I need to change this part to look for the form prefix, the formTag variable, in the end-user's Organization(s) but I don't know how to do this.

    if (!(~HelpCenter.user.tags.indexOf(formTag))){
    $(("#"+forms[item])).remove();

    How do I make this if statement look for a match on the Organization tags and not the user tags?

  • Avatar
    Ryan Mayes (Edited )

    @Rich,

    I didn't test this, but I think this will work. Above the "//Iterate through each form" code block, add a block to create an array of all org tag arrays concatenated together:

    //Create array of concatenated org tags
    orgTags = [];
    ~HelpCenter.user.organizations.forEach(function(item){
        orgTags = orgTags.concat(item.tags);
    });
    

    Then, change the line you pointed out:

    if (!(~HelpCenter.user.tags.indexOf(formTag))){
    

    to this:

    if (!(orgTags.indexOf(formTag))){
    
  • Avatar
    Rich Lorenzo

    @Ryan thanks again. I tried this out during some time off over the holidays. It kind of worked but not completely. For some reason I had to remove the Not operator from the If statement to make it show/hide the correct forms. For instance when the Org had the "Learner" tag it was showing the "User" form and vice versa.

    Also, when the Learner and User tags are both on the same Org the script seems to only find one of the tags. Same thing when the Learner tag is on Org A and User tag is on Org B. It only responds to the presence of one of the tags.

    I'm going to consult with an internal resource at my company for additional dev support. It seems like there are several ways I could go about achieving what I'm trying to do here. Thanks again for pointing me in the right direction and being responsive Ryan!

  • Avatar
    Michael DeMaria (Edited )

    @Ryan, I am really liking your JS code for how we are trying to work around our end-user visibility to forms. Question... how could I modify this to look up the "form name for agent" as opposed to "form name for end-users" (if that is possible) or suppress the tag in the form request selection? From the user's perspective, I think it would have a better look given the tags are not quite user friendly.

    Thanks for your help.

  • Avatar
    Ryan Mayes

    Hi @Michael, Thanks!

    I'm not sure what you mean by "form name for agent", but you should be able to hide the form "tags" by adding an else statement to this block of code:

    //Remove forms that do not meet user criteria
    if (!(~HelpCenter.user.tags.indexOf(formTag))){ $(("#"+forms[item])).remove();
    //Add this to hide form "tags" from user view }else{
    $(("#"+forms[item])).text(item.split(" - ")[1]);
    }
  • Avatar
    Martin Bennett (Edited )

    I'm actually looking to set something up more along the lines of what @James was asking. Can anyone provide some guidance on that? 

    edit: This seems like a very useful feature to have built-in. Forms with specific access.

  • Avatar
    Ron F

    I have a multi brand instance of Zendesk. Currently since ZD does not have a way to restrict ticket forms to specific brands/help centers. I am using the following code under the "new request page" to restrict certain ticket forms from showing up in the wrong brand. 

    $('#request_issue_type_select option[value="69357"]').remove();
    $('#request_issue_type_select option[value="69267"]').remove();

    The issue I have now, is that want to continue to restrict my ticket forms per brand but also at the user level within that brand. Example below. 

    Brand 1:

    TF A: is for organization Square

    TF B: is for organization circle 

    Brand 2:

    TF C:for all end user

    TF D: for organization triangle 

    The code that you provide above is not working. Is there a way that I can successful achieve this goal? 

  • Avatar
    Eric Paul

    Our use case is that there is one Ticket Form that any end user should see.

    Nearly all of our customers use "Default Form", but we are starting to have customers who have additional fields that we need to capture.  What I'm trying to accomplish is skipping the "Please Choose your Issue" dropdown...

    How can I have the form selected automatically for the user based on the organization they are in?

    This code works great at making that list appropriate, showing only the one option they should see, but I want to have the appropriate selection made for my customers so they don't have to change their experience and click on a drop down with a single option...

  • Avatar
    weop

    Great tip Robbert

  • Avatar
    Philip Z.

    Hi Eric,

    I believe that if you follow the example displayed on this URL link: https://support.zendesk.com/hc/en-us/articles/206977397#only_one_form you should be able to achieve the results that you are after. Each ticket form has it's own id, you can use the form id to point the customers to the form directly instead of giving them the choice to select form from the list.

    Please let me know if this helps or if you have further questions.

  • Avatar
    Rupert Hawkes

    Hi,

    how can I prevent a certain field ('team') from being displayed in the new Help Center if the end user isn't in our organisation?

    Can this be done in javascript, if so how/where do I apply it?   If you could please provide a step by step guide that would be great.

    Or do I need to write an app?   Really need help!


    We are using Zendesk Plus.

  • Avatar
    Jessie Schutz

    Hey Rupert,

    If you're referring to a field in the Submit a request form in Help Center, all you have to do is make sure that the visibility on that custom field is set so it's not visible to end users: Adding custom fields to your tickets and support request forms.

     

  • Avatar
    Rupert Hawkes

    I want to show it for external end-users (i.e. end-users not in our company) but show it for internal end-users (i.e. end-users in our company).

    In the old support portal you could do this.   The new helpdesk has dropped this useful functionality and is a backward step in my opinion.

  • Avatar
    Mike Uy

    @Ryan 

    Hello. 

    Is there a variation of your code where I don't mind hardcoding the specific tag and form id number into the JS?

    Doing it your way would require renaming our forms in a manner we don't want to have visible to agents or end-users.

  • Avatar
    eXe Customer Experience Team

    Hi Robbert,

    Many thanks for sharing this, it works perfectly.

    Quick question if I may; if I wanted to add more than one ticket from so that multiple ticket forms could only be accessed by the end-user organisation specified in code, would you be able to show me how I might achieve this?

    I know it's a big ask but I'm afraid that my knowledge of Javascript is bordering on non-existent and I was hoping that the solution was an easy one.

    Thank you.

    Thomas

  • Avatar
    Steve Morrell

    How is the "My activities" hidden in CSS. I have the following code set in my CSS, as explained in other threads.

    a[href$='requests/new'], a.submit-a-request, .my-activities, #user-menu .my-activities {
    display: none;
    }

    This removes submit a request, but the activities entry is always there.

    Also, why do you need to do this in CSS? Couldn't it be done easier by using hide() rather than show() in the JS?

  • Avatar
    Wes Drury

    @Steve - Both CSS and JS will work however it's always better to do it via CSS if possible.  The reason for that is that with JS there will always be a small delay while the DOM is loading.  So if you hide something via JS the end user may see it for a few seconds before the JS actually hides it.  The CSS way will not do this.  

  • Avatar
    Steve Morrell

    Thanks Wes. Makes sense.

  • Avatar
    Nitin Gopalani

    Hi Robbert,

    Your original code works perfectly for me.  I am just curious how to add additional organizations and ticket forms to your existing code.

    Are you able to show what part of the javascript needs to be repeated in order for this to work?  Thanks so much for your help.

Please sign in to leave a comment.

Powered by Zendesk