• 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)

Status
Not open for further replies.
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)
http://xenforo.com/community/threads/product-xenfans-com-extra-debug.19504/

--------

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:

Code: 
<li id="ourTab" class="profileContent">
   <div class="section">This is the content of our tab</div>
</li>

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:

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:

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

Save it.

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

This:

1.webp

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:
Code: 
-$visitor
----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.

Code: 
{$visitor.parameter1}
{$visitor.parameter2}
{$visitor.parameter3}

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:
2.webp

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

(this is the link for my localhost test board, your link maybe be diferent)
This link tells more that we think. Let's see:
http://localhost/xen/admin.php?user-groups/administrative.3/edit
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:
Code: 
<xen:if is="SOMETHING">
DO STUFF
</xen:if>
There is another:
Code: 
<xen:if is="SOMETHING == SOMEONE">
DO STUFF
<xen:else />
DO OTHER STUFF
</xen:if>
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:
Code: 
<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>
</xen:if>
Save it.
Explaining:
IF (VISITOR IS GROUP ADMINISTRATIVE) OR (VISITOR IS GROUP MODERATING) OR (VISITOR ID EQUALS USER ID WHO OWN THE PAGE)
CAN SEE TAB LINK
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?
 
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:
http://xenforo.com/community/threads/frequently-asked-questions.5183/#post-182355

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:

Code: 
<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>
</xen:if>

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

Code: 
<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>
</xen:if>

2. Conditional using the parameter user_id, verifying if the $visitor is logged or just a guest. Dont show for guest.
Code: 
<xen:if is="{$visitor.user_id}">
<li><a href="{$requestPaths.requestUri}#ourTab">Our Tab</a></li>
</xen:if>

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:

Code: 
<li id="ourTab" class="profileContent">
  <div class="section">This is the content of our tab</div>
</li>

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".

4.webp

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".
Example:
Favorite Band: [CUSTOM INFORMATION HERE]
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:

5.webp

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:

Code: 
<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>
<dd>{$user.customFields.favoriteBand}</dd>
</dl>
</li>

So:

{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.

See:

{$user.customFields.favoriteBand}

$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.

PART 3 HERE

PART 4 HERE
 
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.
 
Hi Fuhrmann,

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

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

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

part2.webp
 
DaveL said:
Hi Fuhrmann,

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

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

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

View attachment 19943
Click to expand...

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?

1.webp
 
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.
 
DaveL said:
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.
Click to expand...

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!
 
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! =)
 
Trekkan said:
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! =)
Click to expand...

Good to know! Any questions, post in here! :)
 
Status
Not open for further replies.

Similar threads

T
questions on 'Creating a add-on to insert tabs in profile page (using hooks) - Part 4'
Replies
2
Views
754
typostudy
T
T
questions on [part 3] Creating a add-on to insert tabs in profile page (using hooks)
Replies
5
Views
873
typostudy
T
T
questions about 'insert tabs in profile page ' tutorial part 1
Replies
7
Views
993
tyteen4a03
tyteen4a03
Back
Top Bottom