1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.
  2. This forum has been archived. New threads and replies may not be made. All add-ons/resources that are active should be migrated to the Resource Manager. See this thread for more information.

[Part 2] Creating a add-on to insert tabs in profile page (using hooks)

Discussion in 'Development Tutorials [Archive]' started by Fuhrmann, Oct 10, 2011.

Thread Status:
Not open for further replies.
  1. Fuhrmann

    Fuhrmann Well-Known Member

    This is the second part of this tutorial: Creating a Add On to insert tabs in profile page (using hooks)

    Learn more about conditionals in here: http://xenforo.com/community/threads/frequently-asked-questions.5183/#post-182355

    You have to read the first part to understand the second.

    Some codes of this tutorial i have taken of this addon on. (BTW, its a great addon, i always use)


    Ok, so what's up now?

    Since we finished our first tutorial we now have a simple tab heading and his simple content. But what if we want to use some parameters, like User ID, User Name, Group Name or even permissions?

    Ok, lets learn!

    Step 1 - Using parameters in the tab content - Discovering

    Remember our two templates?
    Here it is:
    newProfileTab_ourTab (show the tab link)
    newProfileTab_ourTab_content (show the tab content)

    There is the code of the newProfileTab_ourTab_content to remember you:

    <li id="ourTab" class="profileContent">
       <div class="section">This is the content of our tab</div>
    The content just print a simple phrase "This is the content of our tab". But, we want more, dont? This is so simple! Lets make a test? We are talking about parameters. Since we are in the profile page, its obvious (or not?) that we have some parameters available for use.

    BUT then you ask: "How i am supossed to know this parameters?"

    Well, let me show you.

    Open the template newProfileTab_ourTab_content and add this code:

    {xen:helper dump, $visitor}
    (this code was taken of the Floris addon, Extra Debug)

    This code will show you all parameters of the "$visitor" that are available for use. But only the parameters for the $visitor (us or anyone visiting something in your forum)

    So your code wil be:

    <li id="ourTab" class="profileContent">
       <div class="section">This is the content of our tab</div>
       {xen:helper dump, $visitor}
    Save it.

    Go to any profile page of your forum and click in our tab. ("Our Tab")
    What are you seeing?



    What....?! We have about 70 parameters we can use with the $visitor variable? Wow! That's cool. I will not paste all the parameters here, but i think you can see them all in there.

    So it is:
    ----parameter 1
    ----parameter 2
    ----parameter 3
    ----parameter 4
    ------parameter 1
    ------parameter 2
    ------parameter 3
    ----parameter 5
    And to use, just put the $visitor in front the parameter.

    This also serves to the $user variable.

    $visitor -> Who is accessing the profile page.
    $user -> The user who OWN the profile page.

    Some example:

    Fuhrmann is visiting the profile page of Floris.

    Fuhrmann -> $visitor
    Floris-> $user

    So, lets do something really good?

    Step 2 - Explaining what we will do (do something really good)

    "Ok, now i understand! I can use this parameters to customize the content of my tab!"

    Exactly. We are in this together. Lets make a little modification in our two templates. Remember the list of parameters? I took this: "user_group_id".

    What do we do now? We will only allow access to our tab to:
    ---- only users who are moderators.
    ---- only user who are administrators.
    ---- the user who own tab
    ---- deny to all guests.

    For this, we need to know wich one is the user group ID of each group.
    You know how?

    Ok, i will teach anyway.

    Step 3 - Discovering ID
    Go to AdminCP>Users>List User Groups.
    You will see this:

    Each user group has a link and a ID. Put the mouse over the "Administrative" group.
    You will see the link.

    (this is the link for my localhost test board, your link maybe be diferent)
    This link tells more that we think. Let's see:
    RED -> This is where we are. The user groups manager.
    BLUE - > Name of the group to manage.
    GREEN -> And there is! The USER GROUP ID! Oh! That was not to dificult.
    "Ok, i have the ID, so what now?"
    Now, you will write down the others user group ID.
    Administrative ID: 3
    Moderating ID: 4

    Step 4 - Using conditionals with parameters
    Ok, since we want to allow access to only some usergroup we will need to use conditionals mixed with parameters.
    Here is a generic conditional exemple used in templates:
    <xen:if is="SOMETHING">
    There is another:
    <xen:if is="SOMETHING == SOMEONE">
    <xen:else />
    Now we know the basics lets use! Remember our parameters? That one we took from the 70 parameters? Dont?
    Here is:
    $visitor.user_group_id (show the group id of the visitor)
    Or you can use this too:
    $user.user_group_id (show the group id of the user, the one who owns the profile page)
    Open the template newProfileTab_ourTab and put this code replacing the old one:
    <xen:if is="{$visitor.user_group_id} == '3' OR {$visitor.user_group_id} == '4' OR {$visitor.user_id} == {$user.user_id}">
    <li><a href="{$requestPaths.requestUri}#ourTab">Our Tab</a></li>
    Save it.
    END IF
    See what we've done? Only Administrative, moderating and the own user of the profile page can see the tab link.
    Lets test?
    Trekkan and Romchik® like this.
  2. Fuhrmann

    Fuhrmann Well-Known Member

    Step 5 - Testing the conditionals

    You will have to make sure you have more then once user. Maybe you can make about 3 users.

    User 1 - User Group: Administrative
    User 2 - User Group: Moderating
    User 3 - User Group: Registered and owns the tab
    Guest - Do nothing, just to show to you.

    Log into the account of User1 and see the tab. You are able to see.
    Log into the account of User2 and see the tab. You are able to see.
    Log into the account of User3 and see the tab. You are able to see.
    Logout and stay as guest. Can you see the tab? No!

    So, even if you arent administrative ou moderating, but you own the profile, you can see.

    Job done? Yes!

    This is a way to do the conditionals. But you can do a lot better conditional using this post:

    There are some other examples you can use in conditionals. Remember we have about 70 parameters to use with $visitor and $user?

    1. Same conditional as above, but using another way to verify:

    <xen:if is="{xen:helper ismemberof, $visitor, 3} OR {xen:helper ismemberof, $visitor, 4} OR {$visitor.user_id} == {$user.user_id}">
    <li><a href="{$requestPaths.requestUri}#ourTab">Our Tab</a></li>
    1.1 Same conditional as above, but using another way to verify:

    <xen:if is="{$visitor.is_admin} OR {$visitor.is_moderator} OR {$visitor.user_id} == {$user.user_id}">
    <li><a href="{$requestPaths.requestUri}#ourTab">Our Tab</a></li>
    2. Conditional using the parameter user_id, verifying if the $visitor is logged or just a guest. Dont show for guest.
    <xen:if is="{$visitor.user_id}">
    <li><a href="{$requestPaths.requestUri}#ourTab">Our Tab</a></li>
    Step 6 - Do what?

    Now we have a little base on how to use parameters. We know we can make conditionals, can use some parameters to limit certains user groups to view and etc.

    We need now to put something in the content of our tab (newProfileTab_ourTab_content). Remember? We only have this for now:

    <li id="ourTab" class="profileContent">
      <div class="section">This is the content of our tab</div>
    What if we could put some custom values from custom user fields?

    So, lets do it.

    Step 7 - Creating a Custom User Field (with screenshots!)

    Custom User Fields are used to display custom user data. You can put any information in there. We will be creating a custom user field that display the user's favorite band. First of all: go to your AdminCP>Users>Custom User Fields. You will see a list of pre made user fields that comes with XenForo. What about we create one just for us?

    Hit the button "Create New Field".


    We have 3 tabs.

    Basic Information (please, fill as below)

    Field ID: As show in the form: "This is the unique identifier for this field. It cannot be changed once set.". So set this as favoriteBand.
    Title: The title will appear before the information of this field. Lets put "Favorite Band".
    Description: A simple description of the field. Let's put "User's favorite band".
    Display Location: Where this field should be placed so user can fill? Well, let's chose "Personal Details".
    Display Order: Let this value in 1.

    Options for Text Fields (please, fill as below)

    Field Type: Single-line text box. This options tells for itself.
    Value Match Requirements: Lets not limit the user input. Check "None".
    PHP Callback: Only if we had a method to use it as CallBack (remember the first tutorial? Callbacks, listeners..) leave this as is.
    Maximum Length: Lets put into 50.

    General Options (please, fill as below)

    Field is required: Only if this field is required. In this case, does not check.
    Show during registration: For now, this does not matter.
    User editable: User can edit this field. Yes. Checked.
    --Editable only once: No! We want allow the user to change more then once.
    Viewable on profile pages: DONT check. We wanna put this manually in our own tab!
    Viewable in message user info: Does not matter now. Leave unchecked.
    Value Display HTML: Only if you want to show your custom user field in some kinda of a different HTML then is showed. Example, a image. For now, leave as it is.

    Hit "Save Field". Ok, we have our Custom User Field!

    Lets fill the custom field now. Go to your Personal Details, and you will got this:


    Just put some information you want and save.

    Step 8 - Put the custom user field in the content tab! (its about time!)

    Now we have this custom user field, we can place it in somewhere. Lets use our template newProfileTab_ourTab_content.

    Open the template newProfileTab_ourTab_content and put the folowing code replacing all existing:

    <li id="ourTab" class="profileContent">
    <div class="section">This is our custom user field:</div>
    <dl class="pairsInline userField_favoriteBand">
    <dt>{xen:helper userFieldTitle, favoriteBand}:</dt>

    {xen:helper userFieldTitle, favoriteBand}

    RED: This is what we want to show. The title. "Favorite Band". We made it in Step 7.
    BLUE: This is the unique ID of our custom user field.

    Remember our parameters?
    Well, we are using them.



    $user-> user who own the profile page
    $customFields -> all of your custom fields
    favoriteBand -> our custom field that we created, remember?

    So, you can use any conditionals in our two templates, to limit, deny, acces to any usergroup, or anyuser.


    DaveL likes this.
  3. Fuhrmann

    Fuhrmann Well-Known Member

    Next tutorial will be a little more complex!
  4. James

    James Well-Known Member

    Usergroup checking should be done using this:
    {xen:helper ismemberof, $visitor, X}
    where x is the user group id.

    Note to self: check if multiple ids are possible yet.
    Fuhrmann likes this.
  5. DaveL

    DaveL Well-Known Member

    Hi Fuhrmann,

    Another great tutorial! A couple of questions though, if you dont mind? :)

    What does
    <dl class="pairsInline userField_favoriteBand">
    mean, especially the pairsInline

    Also, for some reason my tab output is looking like this:

  6. Fuhrmann

    Fuhrmann Well-Known Member

    Hey, thanks!!

    "pairsInline" is just a css class. You can found in the discussion_list.css, translate.css and xenforo.css templates!

    Are your custom user field setup like this?

    DaveL likes this.
  7. DaveL

    DaveL Well-Known Member

    Ah thank you. I like to try and establish what each bit of code is for when working through tutorials!

    Found out what was causing the problem - Theres two ways of spelling favorite/favourite! I spelt it the UK way so when I copied your newProfileTab_ourTab_content it was slightly different!

    Got to get ready for work now, but really looking forward to moving onto part 3 tomorrow. You would not believe how helpful your guides are. I really hope you continue to make them and other developers join in as well.
  8. Fuhrmann

    Fuhrmann Well-Known Member

    Great to know! :)

    I really enjoy you are undestand it! Hope i can help you more!

    Yes, i will keep doing those tutorial, i already have a finish! Hope i can get to work...

    Any help you need, just ask!
  9. Floris

    Floris Guest

    Thank you so much for this. Keep up the good work.
    Fuhrmann likes this.
  10. Fuhrmann

    Fuhrmann Well-Known Member

    My pleasure is the feedback of the community! Thanks Floris.
    quocuy likes this.
  11. Trekkan

    Trekkan Well-Known Member

    Just finished the first and now this tutorial, very nice work Fuhrmann! This was very helpful and I appreciate the time you've spent writing these up. Now... I'm on to the next tutorial! =)
  12. Fuhrmann

    Fuhrmann Well-Known Member

    Good to know! Any questions, post in here! :)
  13. DRE

    DRE Well-Known Member

  14. Fuhrmann

    Fuhrmann Well-Known Member

    The8thLegion likes this.
Thread Status:
Not open for further replies.

Share This Page