ReyDev

Action and Moderation Menus can be one of the most tedious development tasks, while also being critical to user experience.
For example, we may add support for pinning/unpinning content, then we need to remember to include the ability to pin/unpin that content in all the HTML templates. 3rd party developers add screens inside their applications, and then they need to add a link to the User Menu to make that accessible.
With Invision Community 4, this would require a template hook targeting fairly complex classes and children that was susceptible to structural changes to templates between versions.
In Invision Community 5, we have made significant changes to menu creation in order to streamline the process, and also to allow 3rd party developers better accessibility.
 
New Helper Classes
Menus are now built using helper classes, rather than relying on lengthy HTML templates. A menu is created by initializing a new Menu object.
$menu = new Menu( 'AccountMenu' ); We can then add elements to the menu.
$menu->addTitleField( 'menu_content' ); $menu->add( new Link( $member->url(), 'menu_profile', icon:'fa-solid fa-user' ) ); $menu->addSeparator(); $menu->add( new Link( Url::internal( "app=core&module=system&controller=markread", "front", "mark_site_as_read" )->csrf()->addRef( Request::i()->url() ), 'mark_site_read', dataAttributes: [ 'data-action' => 'markSiteRead', 'data-controller' => 'core.front.core.markRead' ], icon: 'fa-solid fa-eye' ) ); The most common menu element is the Link. This will generate the appropriate <li> element within the menu. You can define the URL, CSS class (default is ipsMenu_item), data attributes, icon, title, among other properties.
Titles and Separators are added using the Menu::addTitleField() and Menu::addSeparator() methods respectively.
You can also insert custom HTML into the menu using the Menu::addHtml() method.
In your HTML template, you would then simply display the menu object as a string.
{{if $menu->hasContent()}} {$menu|raw} {{endif}} The menu templates will include the link that opens the menu, as well as the menu itself.
You'll notice that the above contains a call to the hasContent() method. This method will check if the menu object has any elements inside; if a user does not have permission to any of the elements, nothing will be displayed.
 
Content Menus
Almost all content items and comments (and reviews) require some kind of menu for moderation. Previously, this meant creating large chunks of redundant HTML code throughout the codebase. We've implemented \IPS\Content\Item::menu() and \IPS\Content\Comment::menu() to build these menus in a central location. The new methods include checks for whether a feature is in use and whether the user has permission to perform this action.
Example:
if( IPS::classUsesTrait( $this, 'IPS\Content\Pinnable' ) AND $this->canPin( $member ) ) { $links['pin'] = new ContentMenuLink( $this->url()->csrf()->setQueryString( array( 'do' => 'moderate', 'action' => 'pin' ) ), 'pin' ); } Now, the HTML template simply contains:
{$entry->menu()|raw} (Note: Yes, these content menus can be extended using... you guessed it. UI Extensions.)
 
Other Menus
We have also migrated the following menus to the new structure:
User Menu Mobile Menu Create Menu  
Badges
Another area with redundant HTML was our content badges. For example, pinned topics will display an icon on both the topic list and the topic header. We have created helper classes for badges and badge icons to centralize this logic. Within the new Item::badges() method, we build an array of icons that will be shown.
if( IPS::classUsesTrait( $this, Featurable::class ) AND $this->isFeatured() ) { $return['featured'] = new Icon( Badge::BADGE_POSITIVE, 'fa-solid fa-star', Member::loggedIn()->language()->addToStack( 'featured' ) ); } The above generates a badge icon with the badge type ipsBadge--positive (constants have been declared for all common types, but any class can be used), the star icon, and the "featured" language string as the tooltip.
In our template HTML, we now have
<div class='ipsBadges'> {{foreach $entry->badges() as $badge}}{$badge|raw}{{endforeach}} </div>  
UserMenu Extension
Now that we've moved the menus into the codebase and out of the templates, we needed a way to allow 3rd party developers to insert their own menu items. We've introduced a new extension called UserMenu.
The UserMenu extension contains the following methods:
accountMenu
This method allows you to add menu elements to the user menu. The method includes a parameter to allow you to add elements in one of 3 places within the menu: content, settings, or logout. mobileMenu
Allows you to add elements to the mobile navigation menu. All elements are inserted before the "sign out" option. createMenu
Replaces the CreateMenu extension, which has been deprecated. accountSettingsLinks
Allows you to add links to the inner sidebar in the Account Settings overview tab (under the link for Notification Settings). Note: No, this does not add tabs to the Account Settings page, but fear not, that's coming. (Not in the UI Extension.)
userNav
This method will insert HTML in the user bar, to the left of the Create Menu. mobileNav
Similar to the userNav method, but inserts HTML into the mobile navigation header.  
What do you think of our changes to the Menus? Let us know in the comments below.

I'm very excited to be posting my first blog entry for IPS, and thrilled that this is what I get to post.
When we started planning the new development tools for v5, we looked at existing resources - from the marketplace, from some contributors, and from our own managed clients - and asked, what is it that developers find themselves doing the most often? Matt’s previous blog entry gave a brief summary of some of those functions. Today’s blog entry is going to focus on one of our powerful new tools, Listeners.
One common reason for a code hook was to execute custom code when a specific action occurs. For example, when a topic is created, or when a new reply is posted. Listeners allow you to execute your code at key points in the workflow, without the worry of finding exactly the right hook location.
Here is an excerpt from the BlogComment listener in our Cloud application:

 
Creating Listeners
Let’s start with the application’s Developer Center.

We’ve added a new tab for Listeners. This tab lists all your existing listeners, as well as the class on which it is listening.
You’ll notice that each listener can only observe a single class. While this may seem slightly tedious, the idea here was that as a developer, you should be conscious of what class you are working with. It also eliminates the need to check what type of object is being passed preventing accidents and unintended consequences when missing class checks.
When you add a listener, there are several listener types available. We will discuss each one in detail.

 
Content Listener
This listener is fired on an Item or Comment (or Review) class. When adding a Content Listener, you must specify the class you are observing. When you hit Save, there is a validation check in place to ensure that the class exists, and that it is a valid class for the selected listener type.
Content Listeners have the following methods available. All methods are included in the default listener file that is generated.
onLoad
Triggered when an object is loaded (in Content::constructFromData) NOTE: Be careful! This event could be fired at unexpected times. If you’re executing code here, you may want to check the dispatcher instance to verify that your code is running where you expect.
onBeforeCreateOrEdit
Fired when a form is submitted, before it is saved. This is the equivalent of Item::processBeforeCreate and Item::processBeforeEdit. This method includes a parameter to indicate whether this is a create or edit. onCreateOrEdit
Fired after a form is saved. This is the equivalent of Item::processAfterCreate and Item::processAfterEdit. This method includes a parameter to indicate whether this is a create or edit. onDelete
Fired after an object is deleted. onStatusChange
Fired when any moderation action occurs. For example, when an item is pinned/unpinned, locked/unlocked. The moderation action is passed as a parameter so that your code can take that into account. onMerge
Triggered AFTER an item is merged. onItemView
Triggered when an item is viewed and the view count is incremented.  
Invoice Listener
An Invoice listener is fired only on the \IPS\nexus\Invoice class. This listener does not require you to specify a class to extend.
The Invoice listener includes a single method, onStatusChange. This is fired when the invoice is saved and the status changes (pending/paid/expired/canceled).
 
Member Listener
The Member listener will be familiar to many of you. We have taken the MemberSync extension and moved it in its entirety to a listener, as it was a better fit for this structure. All the previous methods that were available are still available here. We have also added the following new methods:
onJoinClub
Fired when a member joins a club. If approval is required, this is fired after they are approved. onLeaveClub
Fired when a member leaves or is removed from a club. onEventRsvp
Fired when a member responds to an event. The response is included as a parameter to this method.  
Commerce Package Listener
The Commerce Package listener is fired on any implementation of \IPS\nexus\Invoice\Item. You must specify the class that you are observing.
The methods are the same as those that are available in an item extension.
onCancel onChange onDelete onExpireWarning onExpire onInvoiceCancel onPaid onPurchaseGenerated onReactivate onRenew onTransfer onUnpaid  
Some Technical Notes
All listener files will be generated in a “listeners” directory within your application. Your application’s data directory will include a listeners.json file that defines all your listeners. The json file is automatically generated when you add/remove a listener. All listener methods are optional. The default class that is generated will include all available methods, but they do not have to be present in your file. All listener methods are return type void. If a listener method fails, an exception will be thrown when IN_DEV is enabled. In production, the exception will be logged with a reference to the listener class and the event on which the exception occurred.  
Firing Events
Your code can fire any existing event using the Event::fire method.
Example:
Event::fire( 'onBeforeCreateOrEdit', $comment, array( $values ) ); The Event::fire method is called statically and accepts an event name, the object on which the event will be fired, and an array of additional parameters (varies according to the event that you are triggering).
This concludes our introduction to Listeners. We do intend to implement additional listener types and events based on your feedback and as the need arises.

By now you might be getting a little tired of hearing about our UI Extensions, but we still have a few more features to talk about. We showed you how to add CSS and data attributes to content. We discussed how to add form fields and menu items. In this final entry on this tool, we'll talk about working with Nodes.
 
ACP Tools
Nodes are different than the Items and Comments, as they are typically managed in the ACP and not on the front-end. Therefore, we needed additional extension methods to allow developers to handle custom actions.
Let's take a look at Nodes in the ACP.

There are a few areas where developers may need to insert custom logic. The UINode extension includes the following methods:
rowButtons
Returns an array of action buttons that will be added to the control strip on the right. This method functions identically to the Model::getButtons() method. rowHtml
Inserts custom HTML to the left of the control strip. rowBadge
If a badge should be displayed, return an array with the CSS class and language string. Note that anything defined in the base class get__badge() method will take precedence over your extension.  
  No Entry
It is important to note that not all Node classes support the form-related methods. We have of course added support for all content containers, such as Forums and Calendars. We will consider including support for other classes upon request, however, nodes that handle infrastructure (e.g. Theme, Lang) will not be supported.
We have also locked down some system-level classes (not all) where any extension is potentially destructive. Classes such as Application and Module cannot be extended.
 
OK, so what CAN I still do? AMA (well, almost anything).
We still have a few more tools to show you, but at this point we'd like to hear from you. We know there is still a lot of uncertainty around how to migrate your modifications from v4 to v5, and we're here to assist with that. Send us your questions or use-cases by submitting a topic here. Please note that this is a private forum; you will not see topics posted by others, so you are free to share code samples if necessary. We will review your questions, and then aggregate them into an FAQ. The deadline for your question to be considered for the FAQ is September 1. After that you may still submit questions in the Contributor forum, where we will do our best to respond.
 
 

In our  previous blog entry, we described the UI Extension and its overall capabilities. Today, we'll talk about how to use this new tool to extend content forms and menus.

Form Fields
A popular modification request is to add fields to a Content Item, such as a Topic. All UI extension classes contain the following methods:
formElements
Returns an array of form elements that will be added to the form. Note: Unlike other UI Extension methods, the first parameter of this method can be NULL, if you are creating a new item.
formPostSave
Allows you to process the fields that were added in the formElements method. Note that this method is triggered after the form is saved. Note: This method has the same function as the ContentListener method onCreateOrEdit, but we've added support for it here as well to avoid the creation of multiple classes, and to keep related code in the same place.
 
Element Placement
By default, all new form elements will be inserted at the end of the form. However, there are times that you may want to insert your fields into specific positions within the form. You can use the new FormAbstract::setPosition() method to specify where the element should be inserted.
Let's look at an example.
public function formElements( ?BaseItem $item, ?Model $container ): array { return [ 'my_new_field' => new Text( 'my_new_field', $item ? $item->new_field : null, true ) ]; } The above will append a Text field called "my_new_field" at the end of the Topic form.
public function formElements( ?BaseItem $item, ?Model $container ): array { $field = new Text( 'my_new_field', null, true ); return [ 'my_new_field' => $field->setPosition( Topic::$formLangPrefix . 'tags', Topic::$formLangPrefix . 'mainTab' ) ]; } By using setPosition, I've placed the new field after the "tags" field, on the main tab in the form.
 
Extending Content Menus
In this blog entry, we introduced our new approach to building menus. With UI extensions, you can add your own items to Item and Comment menus using the following methods:
UIItem::menuItems UIComment::menuItems We will discuss nodes and their menus in a future blog entry.
 
Extending Item Badges
Similarly, you can use the UI Extension to add badges to the item header. The UIItem::badges() method returns an array of badges and/or icons to be appended to the badge display.
 
This concludes our discussion of UI Extension features related to Items and Comments. In our next blog entry, we'll discuss Nodes and what additional methods are available.