Issue with Ion-select multiple="true"

Issue with Ion-select multiple="true"

av Dorel Manolescu -
Antall svar: 3
Bilde av 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!

Vedlegg Screenshot 2022-01-25 at 16.14.47.png
Gjennomsnittlig vurdering: -
Som svar til Dorel Manolescu

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

av Dani Palou -
Bilde av Core developers Bilde av Moodle HQ Bilde av Particularly helpful Moodlers Bilde av Peer reviewers Bilde av 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

Gjennomsnittlig vurdering: -
Som svar til Dani Palou

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

av Dorel Manolescu -
Bilde av 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!

Vedlegg Screenshot 2022-02-11 at 12.28.26.png
Gjennomsnittlig vurdering: -
Som svar til Dorel Manolescu

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

av Dani Palou -
Bilde av Core developers Bilde av Moodle HQ Bilde av Particularly helpful Moodlers Bilde av Peer reviewers Bilde av 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 smiler

Cheers,

Dani

Gjennomsnittlig vurdering: -