How to post the selected column of a table gui to my main gui in Ilias?

Question

I am currently working on a plugin for Ilias and I want to have a table in a modal, with a radio button for each column, and after pushing a "save"-Button, I want to have the id of the selected column posted for my saving function.

The problem I am dealing with is, that the save button has to be in the modal footer (convention of the roundtrip modal, and in fact much more beautiful than having a command button), so I cannot use the addCommandButton functionality for the table.

I am having code like this in my main GUI class:

$modal = $factory->modal()
        ->roundtrip("title"), $this->getModalContent()
        ->withActionButtons([
            $factory->button()->standard("save", $this->ctrl->getLinkTargetByClass(myGUIClass::class, "save"))
        ]);
$modalbutton = $factory->button()->standard("open modal", "")->withOnClick($modal->getShowSignal());
$mytemplate->setVariable("SOMEVARIABLE", $renderer->render([$modalbutton, $modal]));

And the getModalContent function does some things and then asks for the table html:

$tab = new ilMyGUIClassModalTableGUI($this, "parentCmd");
$html = $tab->getHTML();

$modalContent = $factory->legacy($html);
return $modalContent;

The table GUI class looks like this:

 function __construct($a_parent_obj, $a_parent_cmd)
 {
     global $DIC;

     $this->ctrl = $DIC->ctrl();
     $this->lng = $DIC->language();
     $this->access = $DIC->access();
     $this->user = $DIC->user();

     $ilUser = $DIC->user();

     $this->parent_obj = $a_parent_obj;
     $this->cur_id = //an_arbitrary_old_id;

     parent::__construct($a_parent_obj, $a_parent_cmd);
     $this->setData($this->getData());
     $this->setTitle("some title");
     $this->setLimit(9999);

     $this->addColumn("", "", "", true);
     $this->addColumn("column1");
     $this->addColumn("column2");

     $this->setEnableHeader(true);
     $this->setRowTemplate("tpl.template.html", "tplPath");
     $this->disable("footer");
     $this->setEnableTitle(true);

     $this->setFormAction($this->ctrl->getFormAction($a_parent_obj));
 }

 function getData()
 {
     return //an array with id, value_column_1, value_column_2;
 }

 protected function fillRow($a_set)
 {
     if ($this->cur_id == $a_set["id"])
     {
         $this->tpl->setVariable("CHECKED", "checked='checked'");
     }

     $this->tpl->setVariable("ID", $a_set["id"]);
     $this->tpl->setVariable("COLUMN1", $a_set["column1"]);
     $this->tpl->setVariable("COLUMN2", $a_set["column2"]);
     $this->ctrl->setParameter($this->parent_obj, "my_postvar", $a_set["id"]);
 }

When I now click on the save-button, it only gets the last parameter that was set, and not the one of the column I selected in the $_GET variable.

Is there any possibility to have the selected column in a post variable or, if not, how to correctly set the get variable for my main gui class?

Thanks a lot!

score 0 · Accepted Answer · answered May 01 '19 at 07:16

Nice Question, I missed it somehow initially, but better late than never ;-).

The issue here is, that there is no Table implementation in the UI Components yet, that you can use for this scenario. The old table implementation does not work that smoothly with modals, as you just figured out.

What your table does, it creats form, for posting your values by the forms submit button (in your case, the button added by addCommandButton). However since you do not whant that button, you need to work around that. In modern browsers you can work your way around by using a the attribute form to have a submit button outside forms, however you would still have issues to work that into the modal.

So what I recomend you to do is to add some some JS to the button of the model, reading a posting the forms (tables) values on submit). Would look something like:

$modal = $factory->modal()
        ->roundtrip("title"), $this->getModalContent()
        ->withActionButtons([
            $factory->button()->standard("save", "#")
            ->withOnLoadCode(function($id) {
              return "$(\"#$id\").click(function({
                        $(\"#$id_of_your_tables_form\").submit();
                     });";
        })
]);

Note that the getId() function of your table probably helps you to find your tables id. If not, use any selector to find the tables form in the dom.

Thanks a lot for this answer. Unfortunately, when I use your type of code, I got an JavaScript SyntaxError: "Invalid destructuring assignment target". But the idea of the withOnLoadCode functionality helped. I now have a really ugly code by replacing parts of the URL to set the $_GET-variable, but I am happy that it works well! Thanks a lot! — feldbusl, May 11 '19 at 18:46

How to post the selected column of a table gui to my main gui in Ilias?

1 Answers1