XF 1.0 Editing Templates and Defining a Callback for Pages

When we debuted the Pages feature, it was intended to be a simple way to get some custom HTML onto a page surrounded by the standard XenForo user interface chrome. By the time we reached Beta 1, it had evolved into an altogether more powerful system.

Pages now support a PHP callback, so your pages can request data from the database and be used as a platform for building any kind of single-page application you might want to build. They also allow you to override the default and specify your own template to be rendered by the page, so the possibilities really are limitless.

This two-part video shows you the basics of building a simple application using the Pages system, and delves into the realms of the template editor to create and edit the custom HTML that will be used to display your page.

To view this content we will need your consent to set third party cookies.
For more detailed information, see our cookies page.

Accept third party cookies

Having built a basic dynamic page, in this second part we add more functionality and data to the page including a sidebar and a list of the authors of the most recent posts. In doing so, we look into advanced template syntax use, and reveal one of XenForo's hidden treasures.

To view this content we will need your consent to set third party cookies.
For more detailed information, see our cookies page.

Accept third party cookies

Part 3
I've just uploaded a third part, answering some questions that have come up:

To view this content we will need your consent to set third party cookies.
For more detailed information, see our cookies page.

Accept third party cookies

... and created a new answer post here:
http://xenforo.com/community/threads/random-questions-answered.114/page-2#post-102179

 

[Jerry]

/me terminals in KDE ......

kate webdav://quartz/cbi/dev/admindav.php/Admin_Templates/color_picker.html

Yup working fine.

 

[EQnoble]

I have a question in regards to debug mode.. I tried to use the if condition with my ip in the config.php and it shows nothing. Debug mode works for me just not with that in config. Some help?

Edit:
Figured it out, there was a rogue character floating around the config file...
disregard this.

 

[we_are_borg]

Really nice that WebDav is present in Xenforo can't wait till i get Webdav working on my Linux system would be great when editing templates.

Kier on a side note i see that you some times make example js files and php files in your tutorials can you please include the finished files in a zip so that we do not have to start from 0%.

 

[Paul B]

Some of them are posted here: http://xenforo.com/community/threads/code-from-have-you-seen-videos.7236/

The scratchpad video files are available here: http://xenforo.com/community/threads/scratchpad-demonstration-ajax-add-on.8369/

 

[we_are_borg]

Some of them are posted here: http://xenforo.com/community/threads/code-from-have-you-seen-videos.7236/

The scratchpad video files are available here: http://xenforo.com/community/threads/scratchpad-demonstration-ajax-add-on.8369/

Thanks Brogan, really love the tutorials but to do everything by hand would take ages for me.

 

[Digital Doctor]

It is currently not possible to edit a Page outside the ACP.

That's too bad. Major Limitation.
As much as the videos show how to create PHP callback pages .... a demo on xenforo.com would cement the idea for many more users.
This needs a demo !

 

[Kier]

The HTML for Pages is stored as templates, so you can edit them in your favourite editor using WebDAV like any other template.

They are stored as _page_node_{node_id}

 

[Veer]

The HTML for Pages is stored as templates, so you can edit them in your favourite editor using WebDAV like any other template.

They are stored as _page_node_{node_id}

So can we edit/update page templates directly from templates? no need to go on nodes area?

 

[Kier]

So can we edit/update page templates directly from templates? no need to go on nodes area?

Correct.

 

[we_are_borg]

Well got WebDav working with Dreamweaver can now edit the templates just like in the video. I must say that this is a very nice feature.

The only thing i need now is to highlight the XenForo syntax in Dreamweaver, or if you can provide that Kier i would be so great full.

 

[Kier]

I'll see if I can get it exported

 

[Kier]

Syntax highlighting for XenForo templates in Dreamweaver:

http://xenforo.com/community/thread...plate-syntax-highlighting-configuration.9800/

 

[we_are_borg]

Thank you

 

[CroNiX]

OK, I purchased XF and am trying to follow these tutorials but there is no "development" tab in my xf admincp? Where/how do you activate that? Sorry...been searching and can't find it.

 

[ragtek]

You have to enable the debug modus.

Add in your config.php

$config['debug'] = true;

 

[CroNiX]

Thanks ragtek.

 

[masterchief]

I tried following along with video, everything eventually falling into place.
I am getting error when I include the sidebar_online_users template.
Please advise.

TemplateDemo.php

<?php

class Dev_PageCallback_TemplateDemo
{
    public static function respond(Xenforo_ControllerPublic_Abstract $controller, Xenforo_ControllerResponse_Abstract $response)
    {
        // fetch recent registration
        $userModel = $controller->getModelFromCache('Xenforo_Model_User');
        $response->params['users'] = $userModel->getLatestUsers(array(), array('limit'=> 5));

        $response->templateName = 'template_demo';
    }
}
?>

TemplateDemo template

<xen:title>{$page.title}</xen:title>
<xen:navigation>
    <xen:breadcrumb source="$nodeBreadCrumbs" />
</xen:navigation>
<xen:require css="template_demo.css" />
<div class="sectionMain">
    <h2 class="subHeading">Most Recent Registrations</h2>
    <ol>
        <xen:foreach loop="$users" value="$user">
            <li class="secondaryContent userThing">
                <xen:avatar user="$user" size="s" />
                <a href="{xen:link members, $user}" class="username">{$user.username}</a>
                <div class="userTitle">{xen:helper usertitle,$user}</div>
                <xen:datetime time="$user.register_date" />
            </li>
        </xen:foreach>
    </ol>
    <div class="sectionFooter">Showing {xen:count $users} users.</div>
</div>

<xen:sidebar>
    <xen:include template="sidebar_online_users" />
</xen:sidebar>

 

[masterchief]

This is test site on localhost with screengrab of the error .. also notice that sidebar indicated no users online. As I have switched my user acct to show online status there should be one user online. NOTE: There are no indicated errors until after sidebar is added to the template. regards

 

[gretagaia]

It is currently not possible to edit a Page outside the ACP.

 

[masterchief]

Take a look at the first video in this thread. The page is created from inside the ACP. SHEESH