New video series: Building with XenForo 2

A long time ago, in a forum not particularly far, far away (may the fourth be with you), we produced a series of videos showing off how easy it was to build rich pages with XenForo's templates and javascript framework.

While many of the principles demonstrated in these videos remain a key part of XenForo 2, most of the syntax employed by XenForo 1 back then has changed, and there are many more tools at your disposal, like entities and command-line functions.

Building with XenForo 2


Alongside the release of XenForo 2.2.5, it seemed a good time to put together a new series, rounding up all of the key parts of XenForo add-on development, starting with the basic steps of creating a new add-on and moving on to the template system, working with the database using finders and entities, creating and editing content, putting together paginated lists of content items and extending existing classes to add new functionality.

We hope that the videos have something for everyone, from those who are only just starting to think about building with XenForo to those who have been doing so for ages, and may even trigger the realisation that XenForo is not solely a platform upon which add-ons for XenForo can be built, but rather a community framework, capable of acting as the foundational layer for rich community applications in their own right.
Video series logo - Building with XenForo 2
Parts one and two of the series are released today, with parts three and four to follow tomorrow.



On Thursday, as part of XenForo Insights Episode 6 (9am US Central, 3pm UK time via Zoom) we'll have a live recap of the steps so far, and a look ahead to what's in parts five and six, which will be posted immediately following the webinar.

Further parts of the series will be released in the coming days.

Each new part posted will be added to the Building with XenForo 2 playlist.

If you have any comments or suggestions, please post them here in this thread rather than over at YouTube so we can handle them like other content posted here and ensure that they receive the attention they require. As always, requests for technical support should be directed to the appropriate forum.

Here is a list of the videos in the series, which we'll keep updated as new parts are published:
  1. Getting started
  2. Creating and linking test pages
  3. Passing variables to templates
  4. Working with the database - entities and finders
  5. Creating a custom entity
  6. Creating, editing and saving content
  7. Building a form
  8. Listing your content
  9. Paginating your content lists
  10. Class extensions and self-to-many relations
  11. Implementing inline editing with the XF javascript framework
 
Last edited:

Kier

XenForo developer
Staff member
Obligatory question: What editor style is that?
1620142441147.png


1620142467780.png
 

XenForo

Company info
Staff member
Parts three and four of the Building with XenForo 2 video series are now available.

In part three, we look at how to pass variables from PHP to templates and how to work with them using variable filters and other XenForo template syntax, like <xf:foreach>.


Moving on to part four, we introduce the concepts of Entities and Finders - XenForo's semi-magical structures to make working with the database easy, quick and powerful.

 

Lee

Well-known member
Superb information, very useful - is there likely to be more to come?

Scrap that I hadn't watched the last 10 minutes Haha.
 
Last edited:

DeltaHF

Well-known member
Incredible stuff, thank you, @Kier!

I'm about to start building out a significant custom feature for my website on XenForo. These videos have come at the perfect time and will be invaluable for me. :love:
 

Lee

Well-known member
Unfortunately I'll miss the beginning of insights because I'll be picking my children up from school, but will hopefully jump in when I can as it sounds super interesting.
 

Renegade

Well-known member
This is awesome, I had gone through the whole developer documentation a few weeks back. Getting the same in video form is really useful. Hope to start building the first custom add-on real soon, just going through PHP right now.
 

XenForo

Company info
Staff member
Updates! Part five - creating a custom entity, and Part six - add, edit and save, are now available on YouTube.

Part five deals with creating a custom entity to manage your own custom content. We look at the structure, getters, field verification and manipulation, and automated changes applied at save time. To finish off, we use the entity to insert our first content into the database.


With the entity ready for action, we need to build actions to help us add, edit and save our content with error management and redirection on success. Starting with some edits to the 'notes' route to allow us to target specific note content, part six holds your hand through the process.

 

XenForo

Company info
Staff member
Parts seven and eight have now been published.

The seventh part of the series guides you through the process of building a simple form to act as a front-end for your add and edit actions, delving into the XenForo template syntax for form elements. We start with using the link builder to link directly to content items, then build single and auto-sizing multi-line text input fields and a submit button with an icon before using the form to add new content, tracing the process as it operates using Xdebug.


With some notes added and saved to the database, we need to put together some code to fetch and list them. We'll call a finder for our custom content, fetch the data and pass it to the template, where we build a basic block to display each note complete with some basic text formatting, before looping through the items with <xf:foreach>.

Next, we put in place an edit link into our template, which will open the edit form in a dynamically-loaded overlay, then we use an <xf:if> conditional to show the edit date if applicable.

To finish off the page, we add a call-to-action button using <xf:pageaction> to encourage users to add new content.

Finally, we set our notes controller to be visible solely to registered users, and update the navigation entry to display only to registered, logged in visitors.


More next week. Enjoy, and please do let us know if you have any questions or suggestions for future parts.
 

briansol

Well-known member
edit, this is covered but the quality/text size is unreadable and i haven't successfully been able to reuse the same save function for add/edit.

Can you share the code base?
 
Last edited:

Kier

XenForo developer
Staff member
edit, this is covered but the quality/text size is unreadable and i haven't successfully been able to reuse the same save function for add/edit.

Can you share the code base?
That’s surprising - the videos are all uploaded at 4K, so you should be able to hit the gear icon and select the 2160p version, if you’ve switched to full screen view from the embedded version. Alternatively, just click the links I’ve put at the beginning of each update post to view them directly on YouTube.
 

mcatze

Well-known member
@Kier i have one question about video 5 custom entity. At 1:02 you can create easily the Note entity. I've tried it by myself but it didn't work. Is there a trick for that?

Bildschirmfoto 2021-05-07 um 21.07.39.png


Bildschirmfoto 2021-05-07 um 21.07.57.png
 

smozgur

Active member
That’s a custom live template I’ve built for PhpStorm - I’m going to look into packaging them up and putting them on the resource manager next week
Beautiful tutorials, thank you @Kier. I've been developing custom add-ons for a while, but I just made a fresh start with the latest videos to make sure I am not missing anything. Honestly, I was using the XenForo editor for template editing, and I just completely understood how can I do that in the IDE directly by using the _output folder :) Thank you.

Is it possible to get all live templates that you've been using in development? See, you type <xf.block in phpStorm and it gets converted to the div block easily. That would be awesome!

Thank you! It is great content for XenForo 2!
 
Top