joomla 3.x to 4.x migration

Question

I'm moving from 3.x to 4.x. I wrote a component in 3.x which works fine but in 4.x it throws An error has occurred. 500 behavior::tabstate not found.

I think it is because bootstrap has been removed??

I've tried adding

removed

JHtml::_('behavior.tabstate');

Added

use Joomla\CMS\HTML\HTMLHelper; HTMLHelper::_('behavior.tabstate');

But I'm still getting the same error.

Any ideas what I can do?

thanks

Answer 1

For those looking at this question and wondering what 'tabstate' is, it's the functionality which preserves a record of the tab which you were looking at in a form. For example, on the administrator back-end when you edit an article, click on the Publishing tab, and then hit Close. If you then click on the same article to edit it again you should find yourself back in the Publishing tab.

The functionality is implemented using the browser local session storage. You can see this, for example on Firefox, by opening the developer tools, clicking on the Storage tab, then clicking on Session Storage and your domain. If you have edited an article then you should see one or more Keys set to the URL of the article edit functionality, with Value set to the name of the tab.

In Joomla 4 tabstate is no longer implemented through adding

JHtml::_('behavior.tabstate'); 

Instead you should do the following.

In your tmpl file where you set tabs (using bootstrap.addTab etc), change all of these to be uitab instead of bootstrap. (ie change bootstrap.addTab to uitab.addTab etc).

In the startTabSet call you need to pass more array elements.

Instead of

JHtml::_('bootstrap.startTabSet', 'myTab', array('active' => 'details'));

(where 'details' is the name of my first tab) you need to have

HtmlHelper::_('uitab.startTabSet', 'myTab', array('active' => 'details', 'recall' => true);

'recall' => true means it will return to the saved tab.

You can also optionally pass further array elements:

'orientation'=>'vertical'    // if you want vertical tabs

'breakpoint' => 800   // specifies the value of the screen width 
// at which the UI will change from tabs to an accordian (default is 768)

If you use

<?php echo LayoutHelper::render('joomla.edit.params', $this); ?>

to render some of your tabs then you need to have set:

$this->useCoreUI = true;

Otherwise that layout will use the bootstrap.addTab etc instead of uitab.addTab.

Finally you also have to include joomla-tab js and css via the Joomla 4 web asset manager:

Factory::getDocument()->getWebAssetManager()
            ->useStyle('webcomponent.joomla-tab')
            ->useScript('webcomponent.joomla-tab');

If you use the joomla.edit.params layout then it will include it for you.

In general if you are planning to upgrade a component from Joomla 3 to Joomla 4 I would strongly recommend that you redesign your code along the lines of Joomla 4. The backward compatibility doesn't work perfectly, and you'll have to do it at some stage. If you want to get an idea of what's involved then https://docs.joomla.org/J3.x:Developing_an_MVC_Component/Upgrading_to_Joomla4 should help.