Issue with Ion-select multiple="true"

Issue with Ion-select multiple="true"

por Dorel Manolescu -
Número de respostas: 3
Imaxe de 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!

Anexo Screenshot 2022-01-25 at 16.14.47.png
Media de puntuacións: -
En resposta a Dorel Manolescu

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

por Dani Palou -
Imaxe de Core developers Imaxe de Moodle HQ Imaxe de Particularly helpful Moodlers Imaxe de Peer reviewers Imaxe de 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

Media de puntuacións: -
En resposta a Dani Palou

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

por Dorel Manolescu -
Imaxe de 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!

Anexo Screenshot 2022-02-11 at 12.28.26.png
Media de puntuacións: -
En resposta a Dorel Manolescu

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

por Dani Palou -
Imaxe de Core developers Imaxe de Moodle HQ Imaxe de Particularly helpful Moodlers Imaxe de Peer reviewers Imaxe de 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 sorriso

Cheers,

Dani

Media de puntuacións: -