Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
ibexa_form_builder:
fields:
checkbox_with_richtext_description:
name: Checkbox with RichtextDescription
name: Checkbox with Rich Text description
category: Default
thumbnail: '/bundles/ibexaicons/img/all-icons.svg#input-line'
attributes:
Expand Down
4 changes: 1 addition & 3 deletions code_samples/forms/custom_form_attribute/webpack.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -46,9 +46,7 @@ if (isReactBlockPathCreated) {

Encore.addEntry('app', './assets/app.js');

Encore.addEntry('formbuilder-richtext-checkbox-js', [
path.resolve('./public/js/formbuilder-richtext-checkbox.js')
]);
Encore.addEntry('formbuilder-richtext-checkbox-js', './assets/js/formbuilder-richtext-checkbox.js');

const projectConfig = Encore.getWebpackConfig();

Expand Down
24 changes: 18 additions & 6 deletions docs/content_management/forms/create_form_attribute.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ description to the Form.
## Configure Form attribute

To create a `richtext_description` attribute,
add the following configuration under the `ibexa_form_builder_fields` [configuration key](configuration.md#configuration-files):
add the following configuration under the `ibexa_form_builder.fields` [configuration key](configuration.md#configuration-files):

``` yaml
[[= include_file('code_samples/forms/custom_form_attribute/config/packages/form_attribute_config.yaml') =]]
Expand Down Expand Up @@ -63,15 +63,15 @@ twig:

## Add scripts

Now you need to enable the RichText editor. Provide the required script in a new `public/js/formbuilder-richtext-checkbox.js` file:
Now you need to enable the Rich Text editor. Provide the required script in a new `assets/js/formbuilder-richtext-checkbox.js` file:

``` js
[[= include_file('code_samples/forms/custom_form_attribute/public/js/formbuilder-richtext-checkbox.js') =]]
[[= include_file('code_samples/forms/custom_form_attribute/assets/js/formbuilder-richtext-checkbox.js') =]]
```

Then, paste the highlighted part of the code into the `webpack.config.js` file:

``` js hl_lines="49-51"
``` js hl_lines="49"
[[= include_file('code_samples/forms/custom_form_attribute/webpack.config.js') =]]
```

Expand All @@ -85,7 +85,7 @@ yarn encore dev

## Implement Field

Now you have to implement the Field, and make sure the value from the RichText attribute is passed on to the field form.
Now you have to implement the Field, and make sure the value from the Rich Text attribute is passed on to the field form.

Create a `src/FormBuilder/Form/Type/CheckboxWithRichtextDescriptionType.php` file.

Expand Down Expand Up @@ -118,4 +118,16 @@ In the main menu, click **Content** -> **Forms** -> **Create content**, and sele

You should be able to see the new section in the list of available fields:

![New form](new_form.png)
![New form field](checkbox_with_richtext_description-item.png)

When editing settings, the "Description" attribute has the Rich Text input.

![Field settings](checkbox_with_richtext_description-edit.png)

When you enter the "Description" attribute, the Rich Text toolbar appears.

![Rich Text toolbar](checkbox_with_richtext_description-focus.png)

The preview displays the formatted text along with the checkbox and its label.

![Field preview](checkbox_with_richtext_description-preview.png)
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed docs/content_management/img/new_form.png
Binary file not shown.