Sending Data from self written H5P-Editor to the actual program

Submitted by Denise Freier on Thu, 07/15/2021 - 18:34
Forums: 
Developers

Hello,

I tried to create a tiny H5P-Content including an Editor and the actual program. The Editor has two input fields (the first one is a String and the second one is a number as you can see in the editor.png).

In the semantics.png you can see my semantics.json from the actual program. The widget "cyk" is my Editor and I wanted to save the data in the "produktion" and "wortlaenge" fields. I am able to save data in the Editorcode with this.setValue(this.field.fields[0], this.param) but when i press "save" and get to the actual program the data is not accessible (I tried to use console.log(this.options) and console.log(this.options.produktion) in the actual code, but it seems to be empty or undefined).

And now I want to know if there is a way to read the data I typed in the Editor in the actual program.

Attachments: 
Image icon semantics.PNG
Image icon editor.PNG
Content types: 
Editor
otacke's picture

otacke

Fri, 07/16/2021 - 17:33

Hi Denise!

It's always a little tricky to answer those questions if you don't provide the (relevant parts) of your code, but I assume there's some misunderstanding about how the 'setValue' callback works. Are you sure that "this.param" is a proper value for "this.field.fields[0]"? What value does it hold when you use it? Did you potentially mean "this.params"? Have you already checked what the 'setValue' callback is trying to do once you have passed the value (e.g. by setting a break point and stepping into the function call?) ...

Best,
Oliver

Denise Freier

Fri, 07/16/2021 - 21:10

Hey Oliver,

yes you are right my comment was not the best and I am sorry for that. I added a few new pictures for better understanding. the H5P-Editor.png shows the inizialisation of the editor (and should be like the editor widget tutorial). In the setValue.png you can see the code I am using to save the data of the map "productionen" and I also have a few console.log() which you can see in the setValue-Console.png. 

And now I am a bit confused myself, because the last time I checked the console.log(this.field.fields[0]) it had a value but now it is empty..

Attachments: 
Image icon H5P-Editor.PNG
Image icon setValue.PNG
Image icon setValue-Console.PNG

Denise Freier

Fri, 07/16/2021 - 21:17

Hey Oliver,

yes you are right my comment was not the best and I am sorry for that. I added a few new pictures for better understanding. the H5P-Editor.png shows the inizialisation of the editor (and should be like the editor widget tutorial). In the setValue.png you can see the code I am using to save the data of the map "productionen" and I also have a few console.log() which you can see in the setValue-Console.png. 

And now I am a bit confused myself, because the last time I checked the console.log(this.field.fields[0]) it had a value but now it is empty..

Attachments: 
Image icon H5P-Editor.PNG
Image icon setValue.PNG
Image icon setValue-Console.PNG
otacke's picture

otacke

Fri, 07/16/2021 - 23:07

Hi Denise!

If you print objects to the console (that by-reference for objects!) they may not show you the value that they had when calling log() as they may have been altered meanwhile - unless you for instance add a debugger statement or breakpoint (that would help you to track what setValue actually does, by the way).

May I dare to ask what you think setValue() is doing? Seeing your semantics.json and what you're checking for by logging, I assume you believe for your cases it would be something like:

this.field.value = this.params; // NOT what setValue(this.field, this.params) does!
this.field.fields[0].value = this.params; // NOT what setValue(this.field.fields[0], this.params) does!

It doesn't. It sets (sub)values on the global params object in the editor that will later get stored. Your value property in semantics.json is of no use at all (please cmp. https://h5p.org/semantics) unless you want to use it to pass configuration variables to your widget.

In 274 this.params holds the value that is supposed to be set for the group`s field. It would hold an object with all the params of the children: {produktionen:'whatever', wortlaenge: 12345} and setValue() would put assign that value to the correct part of the editor's params object - that will get saved. If you don't simply extend the regular group widget but come up with a completely custom group implementation, you'd have to make sure that this.params contains the values from the group's child fields, of course.

For future posts: Could you please not share screenshots of code snippets but ideally link to the code (e. g. in a repository on github, bitbucket, etc.?). Or at least use the code button (the one with the curly braces) and share the relevant code?

Best,
Oliver

Denise Freier

Sat, 07/17/2021 - 09:50

Hey Oliver,

thank you for the feedback. It seems that I was on a completely wrong way.. I will try to get things right.

And I will keep the tips in mind for future posts.