XF 2.3 Creating a Progress to X messages widget

[The Wanderer]

Hello,

I would like to create a widget that displays a 'Progress to X Messages'.

I have been playing around with AI tools, the following process and code has been recommended.

I'm looking for feedback on the process and code - any thoughts?

1. Create a Widget Definition

Go to Admin Control Panel → Appearance → Widgets → Add Widget and choose:

• Type: PHP Callback
• Display in: Sidebar or wherever you want
• Callback Class: XF:Widget
• Callback Method: renderProgressToX

2. Add the Callback Code

In your src/XF/Widget/ directory, create a new PHP file called ProgressToX.php and paste:

<?php

namespace XF\Widget;

use XF\Widget\AbstractWidget;

class ProgressToX extends AbstractWidget
{
    public function render()
    {
        $visitor = \XF::visitor();

        // Check if user has permission to view the widget
        if (!$visitor->hasPermission('forum', 'viewProgressWidget')) {
            return ''; // Don't render the widget
        }

        $target = X;
        $current = $this->app->finder('XF:Post')->total();
        $percent = min(100, round(($current / $target) * 100, 2));

        return $this->renderer('widget_progress_to_X', [
            'current' => $current,
            'target' => $target,
            'percent' => $percent
        ]);
    }
}

3. Create a Custom Permission

Go to Admin Control Panel → Groups & Permissions → Permissions → Add Permission and define:

• Permission Group: forum
• Permission ID: viewProgressWidget
• Title: Can view progress to X messages widget

4. Assign Permission to User Groups

Go to Admin → Groups & Permissions → User Group Permissions, and for each group:

• Set to Yes or No depending on who should see it.

5. Create a Template

Go to Admin → Appearance → Templates → Add Template and name it: widget_process_to_x

Paste this HTML/CSS:

<div class="block">
  <div class="block-container">
    <h3 class="block-header"> Progress to X Messages</h3>
    <div class="block-body">
      <div style="margin-bottom: 8px;">{$current|number} / {$target|number} messages</div>
      <div style="background: #eee; border-radius: 4px; overflow: hidden;">
        <div style="width: {$percent}%; background: #4caf50; height: 20px; text-align: center; color: white;">
          {$percent}% Complete
        </div>
      </div>
    </div>
  </div>
</div>

 

[QuackieMackie]

First thing I notice is you don't mention an addon. It looks to me like your actually changing Xenforos core code. I'd avoid that unless you have a really good reason to.

Instead I made a guide here: https://github.com/xenforo-ltd/docs/pull/67/files you'll need to follow lines 4 - 34 on how to make an addon.

Now I'm going to explain each step and how you can do it for your addon.

1. Create a Widget Definition

Go to Admin Control Panel → Appearance → Widgets → Add Widget and choose:

• Type: PHP Callback
• Display in: Sidebar or wherever you want
• Callback Class: XF:Widget
• Callback Method: renderProgressToX

This is incorrect, you want to go to Development -> Widget definitions -> Add widget definition

There you can set the:

• Widget unique id
• Title
• Wescription
• Definition class
• Addon it's attached to.

in your case you want to set the definition class to Vendor\Addon\Widget\ProgressToX.php

Your project would then have a dir called Widget with a php class inside.

2. Add the Callback Code

In your src/XF/Widget/ directory, create a new PHP file called ProgressToX.php and paste:

This mostly looks correct, obiously the x should be replaced with a number, but I can't see anything immediately wrong with this except the location of the php file. Your addon files will be located somewhere like this src/addons/Vendor/AddonName/.

3. Create a Custom Permission

Go to Admin Control Panel → Groups & Permissions → Permissions → Add Permission and define:

• Permission Group: forum
• Permission ID: viewProgressWidget
• Title: Can view progress to X messages widget

This is incorrect, you want to go again to Development->Permission definitions Here you'll be able to define you permission properly. I'd suggest

Permission group: general
Permission Id: viewProgressWidget
Title: Can view progress to X messages widget
Depends on permission id: <- Empty
Permission type: Flag
Interface group: General permissions
Display order: Where ever you want
Addon: Your addon

4. Assign Permission to User Groups

Go to Admin → Groups & Permissions → User Group Permissions, and for each group:

• Set to Yes or No depending on who should see it.

This is almost correct, it's just Groups & Permissions -> User group permissions

5. Create a Template

Go to Admin → Appearance → Templates → Add Template and name it: widget_process_to_x

Paste this HTML/CSS:

This again looks mostly correct, nothing I see straight away that screams wrong.

Final note, I would suggest changing some of the text to phrases. If you'd like to know how they work check out https://github.com/xenforo-ltd/docs/pull/66/files#diff in template-basics.md on lines 70 - 108.

I hope this helps

 

[The Wanderer]

Hi @QuackieMackie, thank you for the detailed response.

I was hoping the widget could be implemented without needing an addon. I haven't created one before, but I'm happy to give it a shot.

 

[QuackieMackie]

Hi @QuackieMackie, thank you for the detailed response.

I was hoping the widget could be implemented without needing an addon. I haven't created one before, but I'm happy to give it a shot.

Without using an addon you'll most likely run into problems with the file health check. If you get stuck or need further help I'm happy to. Just send me a private message or post here again.