Issue with Ion-select multiple="true"

Issue with Ion-select multiple="true"

Dorel Manolescu -
Atsakymų skaičius: 3
Plugin developers paveikslėlis

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!

Priedas Screenshot 2022-01-25 at 16.14.47.png
Įvertinimų vidurkis: -
Atsakymas į Dorel Manolescu

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

Dani Palou -
Core developers paveikslėlis Moodle HQ paveikslėlis Particularly helpful Moodlers paveikslėlis Peer reviewers paveikslėlis Plugin developers paveikslėlis

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

Įvertinimų vidurkis: -
Atsakymas į Dani Palou

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

Dorel Manolescu -
Plugin developers paveikslėlis
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!

Priedas Screenshot 2022-02-11 at 12.28.26.png
Įvertinimų vidurkis: -
Atsakymas į Dorel Manolescu

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

Dani Palou -
Core developers paveikslėlis Moodle HQ paveikslėlis Particularly helpful Moodlers paveikslėlis Peer reviewers paveikslėlis Plugin developers paveikslėlis

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 besišypsantis

Cheers,

Dani

Įvertinimų vidurkis: -