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
20

Found this thread because I wasn't seeing the dynamic innerHTML showing up. I first manually added Medium Editor Region to my page following this video: https://www.youtube.com/watch?v=HtgIWtUJQSE

Then I saw Teodors' animated gif showing how to enable Medium Editor on a textarea. I then deleted the Medium Editor Region from my page, added a textarea, enabled Medium Editor, applied the dynamic value and still couldn't see anything.

Checking dev tools, I saw the errors described above by @ellisdav showing "MediumEditor is not defined" and the "Unknown component found!" error. Below were the lines in my main.ejs file. They are in the incorrect order according to Teodor. I believe this is from manually adding Medium Editor Region first, rather than converting a text input field...

  <link rel="stylesheet" href="/dmxAppConnect/dmxMediumEditor/dmxMediumEditor.css" />
  <script src="/dmxAppConnect/dmxMediumEditor/dmxMediumEditor.js" defer></script>
  <link rel="stylesheet" href="/dmxAppConnect/dmxMediumEditor/medium-editor.css" />
  <script src="/dmxAppConnect/dmxMediumEditor/medium-editor.js" defer></script>
  <link rel="stylesheet" href="/dmxAppConnect/dmxMediumEditor/themes/default.css" />

After changing the order of the .js files in main.ejs, the errors in dev tools went away.