Elxis CMS Forum

Support => Elxis 4.x/5.x DEV => Topic started by: datahell on May 13, 2019, 21:45:15

Title: Migrate forms from elxis 4.x to elxis 5.x
Post by: datahell on May 13, 2019, 21:45:15

Elxis 5.x uses a new forms generation library named elxis5Form. The old one (elxisForm) for Elxis 4.x kept for backwards compatibility with old extensions. In this post I will show you how to change the code in order to upgrade a form from elxisForm library (Elxis 4.x style) to elxis5Form library (Elxis 5.x style). Why to do that? Better HTML, better CSS, native form fields validation, new awesome form element types and more.

Here is a typical Elxis 4.x style form built with the elxisForm library

$action = $elxis->makeAURL('mycomponent:something/save.html', 'inner.php');
elxisLoader::loadFile('includes/libraries/elxis/form.class.php');
$formOptions = array(
   'name' => 'myform', 'action' => $action, 'idprefix' => 'elo', 'label_width' => 180,
   'label_align' => 'left', 'label_top' => 0, 'tip_style' => 1
);
$form = new elxisForm($formOptions);
$form->openTab('First tab');
$form->addText('title', $row->title, $eLang->get('TITLE'), array('required' => 1, 'dir' => 'ltr', 'size' => 40));
$form->closeTab();
$form->openTab('Second tab');
$form->addInfo('Important note', 'Blah blah');
$form->closeTab();
$form->addHidden('task', '');
$form->addHidden('id', $row->id);
$form->addButton('save', $eLang->get('SAVE'), 'submit');
$form->render();

The form's action in Elxis 5.x will be the same:
$action = $elxis->makeAURL('mycomponent:something/save.html', 'inner.php');

The first thing to do is to include the elxis5Form library:
elxisLoader::loadFile('includes/libraries/elxis/form5.class.php');

Initialize elxis5Form:
$form = new elxis5Form(array('idprefix' => 'elo'));

Open/Start Form (widths / align removed you can set several options but this is for an other post):
$form->openForm(array('name' => 'myform', 'method' =>'post', 'action' => $action, 'id' => 'myform'));

In Elxis 5.x you must declare all tabs you are going to use (if any) from the very begin:
$form->startTabs(array('First tab', 'Second tab'));

Now open the first tab:
$form->openTab();

Add a text input box. Remove the dir and size attributes. See how required attribute changed:
$form->addText('title', $row->title, $eLang->get('TITLE'), array('required' => 'required'));

Close tab and open the second one:
$form->closeTab();
$form->openTab();

Continue as before:
$form->addInfo('Important note', 'Blah blah');
$form->closeTab();

Tabs ended, we must declare that:
$form->endTabs();

Continue as before:
$form->addHidden('task', '');
$form->addHidden('id', $row->id);
$form->addButton('save', $eLang->get('SAVE'), 'submit');

Now, in Elxis 4.x the form html's gets stored into the buffer and displayed to the browser with the render method. In Elxis 5.x by default the form's html is echoed directly to the browser. So, there is no render method. If you want instead elxis5Form to return you the html instead of echoing to the browser you must set returnhtml
parameter to true when you initialize the elxis5Form class. Or use the setOption method:
$form->setOption('returnhtml', true);

In this case catch the generated html like this:
$html = $form->addHidden('task', '');
$html .= $form->addHidden('id', $row->id);

Finally, instead of rendering the form we close it (closeForm method):
$form->closeForm();

That's it! You converted an Elxis 4.x style form to Elxis 5.x style.

The final code for Elxis 5.x / elxis5Form:

elxisLoader::loadFile('includes/libraries/elxis/form5.class.php');
$form = new elxis5Form(array('idprefix' => 'elo'));
$form->openForm(array('name' => 'myform', 'method' =>'post', 'action' => $action, 'id' => 'myform'));
$form->startTabs(array('First tab', 'Second tab'));
$form->openTab();
$form->addText('title', $row->title, $eLang->get('TITLE'), array('required' => 'required'));
$form->closeTab();
$form->openTab();
$form->addInfo('Important note', 'Blah blah');
$form->closeTab();
$form->endTabs();
$form->addHidden('task', '');
$form->addHidden('id', $row->id);
$form->addButton('save', $eLang->get('SAVE'), 'submit');
$form->closeForm();


Read the form5.class.php library file to see all the amazing things you can do with it.