This is an example for the frontend part of the Core-Forms repository. It contains a sample theme with minimal templates, Studio preview, required styles and Javascript files for the CoreMedia Frontend-Development Workspace.
The latest code in master is compatible with cmcc-11-2301.
Previous releases were tested with cmcc-10-1907, cmcc-10-2004, cmcc-10-2010 and cmcc-11-2207.
Please refer to the CoreMedia documentation on how to create, build and deploy themes.
You can add this repository as submodule to your frontend workspace:
git submodule add https://github.com/tallence/core-forms-frontend.git frontend/themes/core-forms-sample-themeThe sample theme has dependencies to the following CoreMedia frontend modules:
@coremedia/cm-cli@coremedia/theme-utils@coremedia/brick-page@coremedia/brick-preview
Use this sample theme as starting point, convert it to a brick or include it as it is into your existing theme via Theme inheritance.
The webpack build is adjusted to be able to work with VueJS.
When using pnpm start, the Vue DevTools can be used to debug the application.
The provided sample application has dependencies to the following projects:
- VueJS (Updated to 3.2.47, Options-API and Composition-API)
- Pinia (State Management for VueJS)
- axios (Library for ajax requests)
- vee-validate (for client side validation)
- Bootstrap 4 (SCSS) (used for base styling, only the scss part of bootstrap, no JS functionality)
- Vue Datepicker (optional DatePicker component, also see section Custom fields)
The core functionality is completely implemented as separate plugin.
This way you can easily add it into your existing VueJS application.
_THEME_ROOT_/src/vue/plugins/core-forms/
This plugin contains the main logic of the application:
loading data, rendering of the complete form, submitting the user input, client side validation, ...
Add the plugin to your application:
const app = createApp(YourVueApp)
app.use(CoreFormsPlugin, { applicationData, messages })This plugin provides a component which will render the complete form:
<core-forms @onFormSuccess="successCallback"
@onFormError="errorCallback" />It is not necessary to provide multi language translations to the app. Instead we are passing already translated texts directly to the app. The CoreFormsMessagePlugin is responsible for storing and providing all texts which are required by the app. All required texts are part of the generated markup or get loaded directly with the form definition itself.
Please refer to the sources (_THEME_ROOT_/src/vue/plugins/core-forms-messages/) or the complete examples for more details.
This plugin gets added automatically when using the Core Forms Plugin.
This plugin is responsible for the client side validation. It holds all the client side validation logic.
Please refer to the source for more information: _THEME_ROOT_/src/vue/plugins/core-forms-validation
This plugin gets added automatically when using the Core Forms Plugin.
If you just want to render the forms, then this is our recommended approach.
Please refer to the sources for more information: _THEME_ROOT_/src/vue/vue-example-app/index.js
The entry point is located in _THEME_ROOT_/src/js/index.js.
This script will search all DOM nodes where the forms app should be appended to.
The starter script in _THEME_ROOT_/src/js/core-forms-starter.js will then read all required attributes and then initializes the Vue app with the provided data.
The data and all translations can be provided via FTL templates, please check _THEME_ROOT_/src/templates/com.tallence.formeditor.contentbeans/FormEditor._renderForm.ftl for more details.
To start the VueApp you can use the following snippet:
import CoreFormsApplication from '_THEME_ROOT_/src/vue/vue-example-app'
new CoreFormsApplication('your-dom-selector', {
//data provided to the app
applicationData: {
//required url to load the form data, points to the config endpoint for the current form
formUrl: '...'
},
//optional translations
messages: {
'translationKey': 'translated and localized Value'
}
},
//optional event listener
(event) => {
console.log('received event', event)
})To add custom fields, you can modify the source of the main plugin directly, but the recommended way to add a custom fields is creating a separate Vue plugin.
An additional plugin for the CoreForms app requires the following steps:
- Register custom validation rules
- Register custom form field component
- Register your custom plugin
As an example we included the DatePicker field as additional plugin:
_THEME_ROOT_\src\vue\extensions\date-picker-plugin.
The sample theme is based on Bootstrap 4.
The app utilizes the grid system and the recommended markup for the form validation of Bootstrap.
Refer to the releases section of this repo.
- Server side rendering
Integrating the CoreForms Frontend into an existing theme as CoreMedia Brick:
server side rendering of the form, client side validation of the user input
That's it. Have fun ;)
If you have any problems, questions, ideas, critics - please contact us or create an issue. Thanks!