forms_library

A new Flutter package, send a valid json and receive a rendered form.

Getting Started

This project is a starting point for a Flutter application. The library was created to render and handle custom forms through a particular json

Library Install

Add the last version of the library to your pubspect.yaml file

dependencies: ... forms_library: ^1..

Library Structure

For the correct functioning of the library it is necessary to send it at least a valid json wich contain the fields in the following format:

[
  {
    "id": "", //field id unique
    "idProducto": "", 
    "orden": "0",
    "tipo": "5", //field type
    "editable": "1", //1 to allow users to edit field or 0 to not allow edits
    "validacion": ^[\\s\\S]+$",//regex expr to validate received data
    "valorDefecto": "",
    "visible": "1", 
    "dependeDe": "",
    "claveDependencia": "",
    "etiqueta": "", //name displayed on the field
    "campoProtocolo": "4",
    "etiquetaProtocolo": "",
    "pantallaAyuda": "",
    "descripcion": "",
    "tamMax": "", //max lenght
    "postTransaccion": "0"
  },
  {
    "id": "",
    "idProducto": "",
    "orden": "1",
    "tipo": "8",
    "editable": "1",
    "validacion": "^[\\s\\S]+$", 
    "valorDefecto": "",
    "visible": "1",
    "dependeDe": "",
    "claveDependencia": "",
    "etiqueta": "Nombre",
    "campoProtocolo": "3",
    "etiquetaProtocolo": "nombre",
    "pantallaAyuda": "",
    "descripcion": "",
    "tamMax": "",
    "postTransaccion": "0"
  }
  ......
]

Type of fields allowed

Depends on the 'type' value sent on the json, it will render a different field.

Type 1 - Select

Allow user to select given different options

```{
    "id":"",
    "idProducto":"",
    "orden":"6",
    "tipo":"1",
    "editable":"1",
    "validacion":"^[\\s\\S]+$",
    "valorDefecto":"",
    "visible":"1",
    "dependeDe":"",
    "claveDependencia":"",
    "etiqueta":"Tipo documento",
    "campoProtocolo":"3",
    "etiquetaProtocolo":"id_tipoDocumento",
    "pantallaAyuda":"",
    "descripcion":"",
    "tamMax":"",
    "postTransaccion":"0"
    }
```

To send the options array you have to send the dependencies json, the id should be the same of this product id

```
{"id":"","data":[{"1":"DNI/NIF"},{"2":"NIE"},{"4":"Pasaporte"}]}
```

Type 2 - Input Numbers / Type 8 - Input Text

Different types of inputs, for numbers or any text / characters

```
    {
    "id":"",
    "idProducto":"",
    "orden":"9",
    "tipo":"2",
    "editable":"1",
    "validacion":"^\\d{5}$",
    "valorDefecto":"",
    "visible":"1",
    "dependeDe":"",
    "claveDependencia":"",
    "etiqueta":"Código postal",
    "campoProtocolo":"3",
    "etiquetaProtocolo":"cp",
    "pantallaAyuda":"",
    "descripcion":"",
    "tamMax":"5",
    "postTransaccion":"0"
    }

```

Type 3 - Checkbox / Type 7 - Checkbox with url

```
    {
    "id":"",
    "idProducto":"",
    "orden":"30",
    "tipo":"7",
    "editable":"1",
    "validacion":"^1$",
    "valorDefecto":"http://.....",
    "visible":"1",
    "dependeDe":"",
    "claveDependencia":"",
    "etiqueta":"Acepta Condiciones",
    "campoProtocolo":"3",
    "etiquetaProtocolo":"aceptaCondiciones",
    "pantallaAyuda":"11",
    "descripcion":"",
    "tamMax":"1",
    "postTransaccion":"0"
    }
```

Type 4 - Date

Allow to set dates - format (dd-mm-yyyy)

```
    {
    "id":"",
    "idProducto":"",
    "orden":"11",
    "tipo":"4",
    "editable":"1",
    "validacion":"^\\d{2}\\-\\d{2}\\-\\d{4}$",
    "valorDefecto":"",
    "visible":"1",
    "dependeDe":"",
    "claveDependencia":"",
    "etiqueta":"Fecha nacimiento (dd-mm-aaaa)",
    "campoProtocolo":"3",
    "etiquetaProtocolo":"fechaNacimiento",
    "pantallaAyuda":"",
    "descripcion":"",
    "tamMax":"10",
    "postTransaccion":"0"
    }
```

Type 5 - Separator

Just one larger size tag to separate groups of fields

```
    {
    "id":"",
    "idProducto":"",
    "orden":"13",
    "tipo":"5",
    "editable":"1",
    "validacion":"",
    "valorDefecto":"",
    "visible":"1",
    "dependeDe":"",
    "claveDependencia":"",
    "etiqueta":"Datos de la tarjeta SIM",
    "campoProtocolo":"4",
    "etiquetaProtocolo":"",
    "pantallaAyuda":"",
    "descripcion":"",
    "tamMax":"",
    "postTransaccion":"0"
    }
```

Type 6 - Product Amounts

Select a numerical amount to charge the card balance. It has a numeric type input, and some predefined figures in a horizontal list

```
    {
    "id":"",
    "idProducto":"1",
    "orden":"2",
    "tipo":"6",
    "editable":"1",
    "validacion":"",
    "valorDefecto":"0-300(1)|5,10,15,20,25,30,50", //first value -> range / second -> default amounts
    "visible":"1",
    "dependeDe":"",
    "claveDependencia":"",
    "etiqueta":"Importe",
    "campoProtocolo":"2",
    "etiquetaProtocolo":"",
    "pantallaAyuda":"",
    "descripcion":"",
    "tamMax":"",
    "postTransaccion":"0"
    }
```

Type 16 - Select Plus

Select an image between some figures in a horizontal list. Each item have an image url and a text below

```
   {
    "id":"137101",
    "idProducto":"1371",
    "orden":"1",
    "tipo":"16",
    "editable":"1",
    "validacion":"^[\\s\\S]+$",
    "valorDefecto":"106",
    "visible":"1",
    "dependeDe":"",
    "claveDependencia":"",
    "etiqueta":"Tarifa",
    "campoProtocolo":"3",
    "etiquetaProtocolo":"tarifa",
    "pantallaAyuda":"6",
    "descripcion":"",
    "tamMax":"",
    "postTransaccion":"0"
    }
```

Type 17 - Redirection

Allows you to directly open an external app, if it is installed, otherwise it will open in the store"

```
   {
    "id":"",
    "idProducto":"",
    "orden":"1",
    "tipo":"17",
    "editable":"0",
    "validacion":"",
    "valorDefecto":{
    "comando":"app",
    "parametros":{
        "android":"com.app.name.prod",
        "ios":"com.app.name.prod",
        "CadenaApertura":""
    }
    },
    "visible":"1",
    "dependeDe":"",
    "claveDependencia":"",
    "etiqueta":"Amazon",
    "campoProtocolo":"4",
    "etiquetaProtocolo":"",
    "pantallaAyuda":"",
    "descripcion":"permite abrir directamente una app externa, si está instalada, en caso contrario abrirá en la store",
    "tamMax":"",
    "postTransaccion":"0"
    }
    
```

Load Form

Import the library and use FormModule sending the json data to render the form.

You have to use FormModule with these parameters:

  • Fields Json (wich would be the file that contains all the fields)
  • Dependencies Json: Initial dependencies (fields values wich need to be consulted within an external api call)
  • Data callback: to get the form data after being validated
  • Dependencies Callback: to get new field values after check dependencies, and send them again to the library
```
    import 'package:forms_library/form_library/di/app_module.dart';
    ....

    //receive data in json
     FormModule.getForm(
    listJsonString,
    initialDependenciesString,
    (data) {
      // return the form fields data when they have already been validated
      print("DATA FORM: ${data}");
      
    },
    (List<dynamic> params,
        DependencyCheckedCallback onDependencyResult) async {
            final t = await ....
            //return field values after check dependencies
      
      onDependencyResult(t);
    },
  );
```

External Packages

The library depends on the following dependencies

For help getting started with Flutter development, view the online documentation, which offers tutorials, samples, guidance on mobile development, and a full API reference.

Libraries

form_library/core/error/failure
form_library/core/service/dependency_service
form_library/core/util/debounce
form_library/core/util/widket_key_data
form_library/entity/dependency_entity
form_library/entity/field_default_value_entity
form_library/entity/field_entity
form_library/entity/field_type
form_library/entity/form_entity
form_library/entry/app_module
form_library/my_json_form_library
form_library/presentation/bloc/fields_bloc
form_library/presentation/controller/parse_json_form
form_library/presentation/my_json_form_main
form_library/presentation/views/combination/combination
form_library/presentation/views/pages/field_page
form_library/presentation/views/widgets/common/custom_info_bar
form_library/presentation/views/widgets/common/platform_alert_dialog
form_library/presentation/views/widgets/field_Event_info
form_library/presentation/views/widgets/field_event_info
form_library/presentation/views/widgets/field_item
form_library/presentation/views/widgets/fields/alpha_input_widget
form_library/presentation/views/widgets/fields/amount_widget
form_library/presentation/views/widgets/fields/checkbox_widget
form_library/presentation/views/widgets/fields/date_widget
form_library/presentation/views/widgets/fields/input_widget
form_library/presentation/views/widgets/fields/label_inputs_widget
form_library/presentation/views/widgets/fields/multi_input_widget
form_library/presentation/views/widgets/fields/qr_code_widget
form_library/presentation/views/widgets/fields/redirect_widget
form_library/presentation/views/widgets/fields/secure_input_widget
form_library/presentation/views/widgets/fields/select_plus_widget
form_library/presentation/views/widgets/fields/select_widget
form_library/presentation/views/widgets/multi_field_info
form_library/presentation/views/widgets/single_field_info
forms_library