reference to the pm4 repo https://github.com/ProcessMaker/bpm/issues/1316

The javascript parsing is not enabled. Enable it. Allow it to be turned on via click on a button

• Add a button to turn on advanced mode w/icon (font awesome js-square)
• Show the javascript parser
• On edit, if the expression is complex, show the javascript box by default

If you set a value to required, the form can still be submitted.

As a developer, I want the ability to add new custom form controls to the form builder and renderer so that I can add additional functionality that might be related to my custom implementation.

I'd like to upgrade the CSS editor to use the monaco editor with this plugin.

https://github.com/Microsoft/monaco-css

Error in mounted hook: "TypeError: Cannot read property 'value' of undefined"
node_modules/@processmaker/vue-form-elements/src/components/FormSelect.vue

Each of the three columns should flex and scroll AS NEEDED and INDEPENDENTLY. The toolbar should be locked to the top as well as the footer.

If I add a multi-column element, the contents of those elements isn't respected in the preview or other uses. Applies to form and mustache elements.

The WYSIWYG control should ONLY work on the text field. Move the WYSIWYG to a form-elements object and import it as it's own type. Revert the change to the text object.

ProcessMaker/vue-form-elements#20

Related to: https://github.com/ProcessMaker/bpm/issues/986

If the check was not checked it did not

So we need a UI to allow definining computed properties on the form data. So if I have two input fields, one is called 'a' and one is called 'b', then I may wanted a computed property called 'c' that is (a + b). So this needs to be something that is stored in the meta form config meta data and handled in the form renderer.

https://github.com/ProcessMaker/vue-form-builder/blob/develop/src/components/vue-form-renderer.vue#L107

Just a heads up, we should never use let that = this or any other previous es6 "hack"

Instead, please look at using arrow functions

Another good doc is: https://leanpub.com/understandinges6/read#leanpub-auto-arrow-functions

Change the copy in the Show If area to:

Show If: => Visibility Rule

This control is hidden until this expression is true

Bpm issue: https://github.com/ProcessMaker/bpm/issues/1443

Mentioned here: ProcessMaker/processmaker#1384 (comment)

A bug in the CSS put the delete X in the top right corner, overlapping other delete Xs

See https://github.com/ProcessMaker/bpm/issues/919

The message being returned is that the description field is required, however in the inspector there not an option for description.

Trying to add a javascript evaluation to the computed property and it fails with "Error: parse error [1:18]: Expected EOF"

if(+down > 0) 101

We need to bind the name of the element to the component so that child elements have easy access. This will be used by the File Downloader in order to specify which file should be displayed/downloaded on the renderer.

Allow using mustache template syntax in the text control to allow embedding data from the form data. Also allow supporting embedded html into the text template/label.

If you switch between 2 text boxes, the text content in the inspector will not refresh, but rather keep displaying data from the first text box. When you interact with the inspector, the values for the second text box will be overridden with those from the first. In order to effectively edit properties for a 2nd text box, you need to select another (non text box) element first, and then the inspector will update properly.

Steps to Reproduce

1. Drag a text box into the screen.
2. Drag a second text box into the screen.
3. Select the first text box and add some text content in the Inspector pane.
4. Select the second text box. Notice the text content property did not refresh and still reads the content for the first box.
5. Select the text content box and add a character or space. notice how the entire content of the second box is now updated to reflect what was both the content for boxes 1 and 2.
6. Drag a line input into the screen.
7. select one of the text boxes and then other. notice again how the content does not refresh.
8. Select the input box and then the text box. notice how when selecting the text box after the input box refreshes its content properly.

The submit button should have a name and value so it can be used as "approve or reject" buttons

I'd like to enhance the text editor to allow for a more rich environment on the page. To do this I'd like to add a WYSIWG editor to the input box on the side bar. Extra points for allowing editing inline on the main canvas.

Features to expose:

font style (h1, pre, etc), bold, italic, align (left, center and right), link and code view
If we have room, show the numbered and unnumbered lists
Make sure we can bind parts of the html to the data model.

Use case: a URL generated by a script task

Verify that the enabled tags are whitelisted as part of the save process.

Note the mustache syntax is parsed during rendering. So as long as the mustache syntax is intact in the content, it'll still work.

Possible editors:

https://www.tinymce.com/docs/integrations/vue/
https://trix-editor.org/
https://ckeditor.com/blog/best-wysiwyg-editor-for-vue/

When you pass in an error to a control the error classes aren't being applied.

When you are building screens (not forms) the WYSIWG editor doesnt work at all.

I want to have the ability to hide a field unless a specific criteria is met in the data model

• Add an inspect box for a FEEL expression
• Add label "Hide If:"
• Description: Hide this control unless the following expression is true
• Run the evaluation in the preview and live form
• Write Dusk Test to confirm it works

Due to this bug, file download components do not correspond to their respective file uploads.

In order to utilize this package and it's elements, it's important to export named components.

So the standalone application can be a standalone; however, using this in another project should use the exposed components.

The default export should expose a Vue plugin that can be installed to register components to Vue.

As an implementor, I want to listen to certain parts of the form builder lifecycle so I can tap into it and potentially register new control types.

I want to upgrade all of the select boxes to use the Vue Multi-Select and any time there is a new select box it should be enabled automatically.

https://vue-multiselect.js.org/

The file uploader and the records list are showing the WYSIWYG editor when editing.

text-align select in the inspector

As a developer I want to be able to access individual form elements using the ID of the surrounding div.

Change the code to use the Field Name of the element as the ID of the element div.

Currently mutlicolumns can't cotain datepicker controls, we should enable them

Approve / Reject buttons aren't working
It's supposed to save the value of the button to the data object on submit - it's not, its coming back undefined

From user: I have reject/send buttons as shown. the inspector here is showing the Reject. Currently I get sendSMS: undefined

The data picker control has an issue - it shows a > instead of the HTML for the form.

As a user I want to set the foreground and background colors using the bootstrap color classes.

https://getbootstrap.com/docs/4.2/utilities/colors/

Add the ability to effect elements via CSS. The CSS should be scoped to the form to ensure it doesn't impact anything outside of the form.

• Add a button in the grey menu bar (Custom CSS)
• Add modal to show an editor box for CSS
• Save the CSS to the config
• Apply the CSS to the preview and the live form
• Write test to make sure it saves and is used properly

replace old icons with new font awesome SVGS

Here's the icons we were talking about using...

checkbox: https://fontawesome.com/icons/check-square?style=solid
dropdown: https://fontawesome.com/icons/caret-square-down?style=solid
radiogroup: https://fontawesome.com/icons/list-ul?style=solid
text box: https://fontawesome.com/icons/square?style=regular
text area: https://fontawesome.com/icons/paragraph?style=solid
datepicker: https://fontawesome.com/icons/calendar?style=regular
multi-columns: https://fontawesome.com/icons/columns?style=solid
record list: https://fontawesome.com/icons/th-list?style=solid
page nav: https://fontawesome.com/icons/angle-double-right?style=solid
submit: https://fontawesome.com/icons/share-square?style=solid

In the inspector, when you click on a multi-column, I want to be able to configure up to 12 columns for display (using bootstrap's grid). Show a drop down with numbers 1-12 and adjust the display accordingly

When I add a record list and a form control, the form control is blank in the preview. I've also noticed that the preview stops updating at some point.

I want to be able to group elements in the inspector sidebar on right. Group name, icon and id, by default only open the configuration "tab".

ProcessMaker/modeler#221

See https://github.com/ProcessMaker/bpm/issues/1312

We need to add a file upload control.

When I set a value of an input specifically it is not picking up the responsive value from the json data.

Don't work

The inspector needs to be able to scroll. Current content is off the screen.

I want to add the ability to set the whole date with the datepicker including the time.

Upgrade to use this date picker.

https://mariomka.github.io/vue-datetime/