Skip to content

GitLab

Open
Created by Giannis Kopanas@John.kopanasMaintainer

RFC: Simple Form Builder

Having the knowledge of the previous version of form Builder, the need of a simpler version is imperative.As a starting point we need to focus on extensibility rather than features that will be time consuming to maintain. So to start with, our current goal is to create a component which creates a form with three basic elements, Label, Label + Text , Label + Radio Box. This implementation is only focused on the frontEnd this has nothing to do with the saving and retrieving the form from the Database. The main parts of a Form that we should consider first are :

  1. "UI Library" which represent the actual Elements of The Form The actual elements that will be shown in the form. We should have a tank of Elements to use for the Form Builder. For now we will have only 3 kinds of UI Elements Label, Label with TextField, Label with RadioBox. A good option for that purpose could be the pubsweet-ui Package.

  2. Library that will be used for the form Builder ( Formik , redux-form etc. ) This is not important for now i just wanted to have the whole idea of the basic Steps we need to build a Form.

  3. Settings of each UI Element. (we definitely not care, which those settings should be for now) An ui Element may has many properties in order to fulfill the requirements of a form. An example could be Validation / Placeholder / Visibility etc. For now the only think that we need is to have a way to have independent and different settings per UI Elements. An example in our Case is : For the Label UI Element we need some settings in order to be shown correctly to the end user and that setting as a start is an Editor (text area) where the administrator could save the actual Value of the Label to be shown. Even those settings at that point are Hard-coded.

  4. Layout The actual Component that will host the UI Elements. Mechanism based on "Strategy pattern" that will load different Component Views. At the current Point will be only a default Layout or a custom layout that the developer will create. Everything will be hard-coded it but the mechanism should exist to serve the extensibility requirement

  5. Minimal configuration from developer's perspective to show the Form. Just a starting point for a developer to show the Form in the Page Something like : new SimpleForm({ layout: 'myForm' }) if no layout is specified a default predefined layout should be shown.

The idea is to create Each of those Parts and be based on patterns having in mind the extensibility.

Edited by Giannis Kopanas