[DEV BLOG] IC5: UI Extensions, Part II

[NewsBot]

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.

Wyświetl pełną treść wpisu