App Connect Bootstrap 4 Form Generator - using text area / medium editor

Wappler General
,
#1

I have a single database table that has two text fields that contain html formatted content.

I have looked at the tutorials and credited an update action and then used the Bootstrap 4 Form Generator. If I accept all the defaults then I have a form with all the fields included - my two fields with html content are created as text input.

I would like to be using either a text area or even better the medium editor for updating these fields. I have tried various options (e.g. changing the “type” to text area when using the Generator) but without any success. When doing this then no updates are made to the database.

Similarly I have not been able to get “inner html” to work if I try to update the dynamic attributes even with the default generated form.

Can anyone help please ?

#2

Hello,
In the form generator set your form field(s) to textarea. Then on the page select the textarea and click the “Enable Medium Editor” button in the properties panel. This will enable the medium editor in your textarea.

#3

Hi Teodor, I have done what you suggested but now the Save button does not update any of the database fields. Additionally I don’t see the contents of the Description field in the Medium editor before doing changes & using the Save button.

I have included screenshots of the different stages.

update-1
update-1776×587 72.1 KB
update-2
update-2771×562 81.5 KB
update-3
update-3442×540 38 KB
update-4
update-4793×367 31.2 KB
update-5

#4

Are there any errors in the browser console, when you load your page in your browser?

#5

Yes I am seeing - MediumEditor is not defined at base.js:1 and then Unknown component found ! medium-editor.

update-6

#6

Then please check the medium editor js includes in the page <head>
They must be in this order:

<script src="dmxAppConnect/dmxMediumEditor/medium-editor.js" defer=""></script>
<script src="dmxAppConnect/dmxMediumEditor/dmxMediumEditor.js" defer=""></script>
#7

Yes they were in the wrong order - see the screen shots. I have fixed this and now the console has no errors but says “value null - mediumEditor.js.107”

But the form is not updating the database (both for the Text Area or any of the other fields)

head Before

update-7
update-7805×177 46.9 KB

head After

update-8
update-8815×196 45.5 KB

#8

Do you see the dynamic value in the medium editor, when you load the page?

#9

On the web page I am seeing the dynamic content - but it looks like a normal text input field and not the Medium Editor (or text area).

However in the App structure all looks OK with “Medium Editor Textarea: inp_Description”

#10

What do you mean by: " it looks like a normal text input field and not the Medium Editor (or text area)." ?
Have you tried to select parts of the text wit your mouse, so that you can see the editor options?

#11

You are right - I can select part of the text and I am seeing the attributes from the medium Editor.

However the Save button does not cause any updates to happen.

#12

Then … please follow this tutorial:

#13

Done as you suggested - working now ! The update action was missing. Many, many thanks !

Going back to the first issued (scripts in the wrong order) - what might have caused this ? I thought I had created the page in a completely standard manner.

1 Like
#14

It can happen if the components are added, removed and re-added multiple times I think

#15

Brian, many thanks - I have found your videos very helpful.

3 Likes
#16

More to follow soon when i get over my man-flu, cant talk properly at present!

2 Likes
#17

I’ve always assumed this was a bug which was waiting to be fixed. The issue has cropped up quite a few times.

If you select a textarea and click ‘Enable Medium Editor’, there’s no problem. If you select Medium Editor Textarea or Region, from the Elements panel, the files are listed in the wrong order.

#18

Hey Tom,
Can you explain the exact steps to reproduce this, in a separate Bug report topic?
We’ve not really been able to reproduce the issue, but if you know when exactly it happens we will be able to fix it.

#19

Bug report added.

1 Like