Issue with Ion-select multiple="true"

Issue with Ion-select multiple="true"

by Dorel Manolescu -
Number of replies: 3
Maletg da Plugin developers

Hi Guys,

I am implementing the mobile feature for one of my local plugins as suggested here:

https://docs.moodle.org/dev/Moodle_App_Plugins_Development_Guide#Using_otherdata using https://workplace.apps.moodledemo.net (Workplace 3.9.5)

I am using an ion-select component with the attribute multiple as true and I get a strange error like :

 invalid parameter value detected (args => Invalid parameter value detected (name => Invalid parameter value detected (Invalid external api parameter: the value is "topicgiz[0]", the server was expecting "alphanumext" type): Invalid external api parameter: the value is "topicgiz[0]", the server was expecting "alphanumext" type): name => Invalid parameter value detected (Invalid external api parameter: the value is "topicgiz[0]", the server was expecting "alphanumext" type): Invalid external api parameter: the value is "topicgiz[0]", the server was expecting "alphanumext" type)

The code for the select in the mustache template looks like this:

 <ion-select [(ngModel)]="CONTENT_OTHERDATA.topicgiz" multiple="true" cancelText={{#str}}

                        cancel, local_explore {{/str}} okText={{#str}} submit, local_explore {{/str}}

                        (ionChange)="updateContent({languagegiz: {{languagegiz}}, topicgiz: CONTENT_OTHERDATA.topicgiz})">

It works as expected when the multiple attribute is false, so I am just wondering if the multiple select has support.

I attached a screenshot. The parameters looks strange when multiple is true and the error makes sense in that context.

Thanks!

Attachment Screenshot 2022-01-25 at 16.14.47.png
La media da valetaziuns: -
In reply to Dorel Manolescu

Re: Issue with Ion-select multiple="true"

by Dani Palou -
Maletg da Core developers Maletg da Moodle HQ Maletg da Particularly helpful Moodlers Maletg da Peer reviewers Maletg da Plugin developers

Hi Dorel,

ion-select with multiple="true" stores the data using an array. You're telling it to store the data in "CONTENT_OTHERDATA.topicgiz", this means that this variable will be an array with the selected values. The WebService only accepts basic types but you're sending an array, that's why it's failing.

The easiest way to fix this is by converting the array to a basic type, a string in JSON format:

(ionChange)="updateContent({languagegiz: {{languagegiz}}, topicgiz: JSON.stringify(CONTENT_OTHERDATA.topicgiz)})">

This means the app will send the something like this to the WebService:

name: "topicgiz"
value: "['a','b','c']"

Then in your PHP function you can convert the JSON back to an array and treat it.

Cheers,

Dani

La media da valetaziuns: -
In reply to Dani Palou

Re: Issue with Ion-select multiple="true"

by Dorel Manolescu -
Maletg da Plugin developers
Hi Dani,
I am afraid the stringify function is not recognized in the moustache template.
See attached screenshot.
Is there a library I need to import or something?
Thanks!

Attachment Screenshot 2022-02-11 at 12.28.26.png
La media da valetaziuns: -
In reply to Dorel Manolescu

Re: Issue with Ion-select multiple="true"

by Dani Palou -
Maletg da Core developers Maletg da Moodle HQ Maletg da Particularly helpful Moodlers Maletg da Peer reviewers Maletg da Plugin developers

Oh, I thought you could use this in an Angular template because it's a Javascript built-in function, but it seems you can't. In this case you will have to implement a function to treat the parameters before sending them. You'll have to do something like this in the template:

(ionChange)="topicChanged()">

You will need to return Javascript code in your PHP method along with the template. This code should implement the function, something like this:

this.topicChanged = () => {
     this.updateContent({
         languagegiz: this.languagegiz,
         topicgiz: JSON.stringify(this.CONTENT_OTHERDATA.topicgiz),
    });
};

I hope this fixes your problem surrir

Cheers,

Dani

La media da valetaziuns: -