mse-form-template

mse-form-template merupakan component yang digunakan untuk menampilkan (...)

History versi

Features

• field input address
• field input modal
• field input number
• field input radio
• field input select
• field input text
• field input text area
• field non input

Tech

Untuk menggunakan mse-table-api kamu membutuhkan:

• AngularJS - HTML enhanced for web apps!
• node.js - evented I/O for the backend
• jQuery -

And of course Dillinger itself is open source with a public repository on GitHub.

Installation

Dillinger requires Node.js v10+ to run.

Install the dependencies and devDependencies and start the server.

cd project
npm i library-form-template

Development

• update html kamu punya dengan :

<div class="row">
    <div class="col-xl-11">
        <mse-form-template [formTemplate]="formTemplate" [id]="id"></mse-form-template>
    </div>
</div>

• Typescript

import { FormTemplate } from 'library-form-template/lib/form/model/input-model';

export class SampleClass implements OnInit {

  formTemplate : FormTemplate =
  {
    title : "Kategori Usaha",
    backUrl : "data",
    getOneUrl : GET,
    postDataUrl : POST,
    putDataUrl : UPDATE,
    inputList :
    [
      {
        jsonName : "settingtype",
        required : true,
        label : "Tipe",
        type : "select",
        option :
        [
          {key : "Retail", value : "Retail"},
          {key : "Hotel", value : "Hotel"},
          {key : "Restoran", value : "Restoran"},
          {key : "Airlines", value : "Airlines"},
          {key : "Lainnya", value : "Lainnya"},
        ]
      },
      {
        jsonName : "name",
        required : true,
        label : "Kategori Usaha",
        type : "text",
        maxlength : 25,
      },
    ]
  };

Note: parameter inputList dapat berubah-ubah tergantung dengan jenis kebutuhan.

• Input Parameter dan definisi:

  formTemplate : FormTemplate =
  {
    title : String,
    backUrl : String,
    getOneUrl : String,
    postDataUrl : String,
    putDataUrl : String,
    inputList : 
    [
      {
        jsonName : String, (digunakan untuk)
        required : boolean, (untuk menentukan apakah field wajib diisi atau tidak)
        label : String, (digunakan label nama dari field)
        type : String, (type parameter yang digunakan)
      },
    ]
  };
 

type parameter

| Syntax | Description | | ----------- | ----------- | | text | Menampilkan field dalam bentuk text | | text-area | Menampilakan field dalam bentuk text yang bisa menampung lebih dari 1 baris text | | address | Menampilkan menu alamat | | number | Menampilkan field untuk menginput angka | | radio | Menampilkan pilihan dalam bentuk radio button | | modal | Menampilkan menu dalam bentuk table | | select | Menampilkan field untuk memilih inputan dalam bentuk dropdown | | non-input | untuk menampilkan field yang tidak bisa di edit |

Contoh type parameter

 formTemplate : FormTemplate =
  {
    title : "Jenis Usaha (MCC)",
    backUrl : "data-master/jenis-usaha",
    getOneUrl : GET,
    postDataUrl : POST,
    putDataUrl : UPDATE,
    inputList : 
    [
        {
            jsonName : "name",
            required : true,
            label : "Brand",
            type : "text",
            maxlength : 25,
        }
    ]
  }

formTemplate : FormTemplate =
    {
        title : "Jenis Usaha (MCC)",
        backUrl : "data-master/jenis-usaha",
        getOneUrl : GET,
        postDataUrl : POST,
        putDataUrl : UPDATE,
        inputList : 
        [
            {
                jsonName : "description",
                label : "Deskripsi",
                type : "text-area",
                maxlength : 100,
                textAreaConfiguration :
                {
                    cols : 50,
                    rows : 2
                }
            }
        ]
    }

formTemplate : FormTemplate =
    {
        title : "Jenis Usaha (MCC)",
        backUrl : "data-master/jenis-usaha",
        getOneUrl : GET,
        postDataUrl : POST,
        putDataUrl : UPDATE,
        inputList : 
        [
            {
                jsonName : new JsonTemplate().address,
                label : "Kelurahan",
                type : "address",
            },
        ]
    }

formTemplate : FormTemplate =
    {
        title : "Jenis Usaha (MCC)",
        backUrl : "data-master/jenis-usaha",
        getOneUrl : GET,
        postDataUrl : POST,
        putDataUrl : UPDATE,
        inputList : 
        [
            {
                jsonName : "description", **(digunakan untuk )**
                label : "Deskripsi", 
                type : "text-area",
                maxlength : 100, **(Batas karakter yang dapat di tampung oleh filed)**
                textAreaConfiguration :
                {
                    cols : 50,
                    rows : 2
                }
            }
        ]
    }

formTemplate : FormTemplate =
    {
        title : "Jenis Usaha (MCC)",
        backUrl : "data-master/jenis-usaha",
        getOneUrl : GET,
        postDataUrl : POST,
        putDataUrl : UPDATE,
        inputList : 
        [
            {
                jsonName : "isfdm",
                required : true,
                value : "true",
                label : "Tampilkan di FDM",
                type : "radio",
                option : 
                        [
                            {
                                key : "Ya",
                                value : 'true'
                            },
                            {
                                key : "Tidak",
                                value : 'false'
                            }
                        ]
            },
        ]
    }

formTemplate : FormTemplate =
    {
        title : "Jenis Usaha (MCC)",
        backUrl : "data-master/jenis-usaha",
        getOneUrl : GET,
        postDataUrl : POST,
        putDataUrl : UPDATE,
        inputList : 
        [
            {
                jsonName : ["group_id", "group_name"],
                required : true,
                label : "Group",
                type : "modal",
                modalConfiguration :{
                                        valuesKey : {"group_id" : "id", "group_name" : "name"}, **(//sesuai {[jsonBrand] : json group})**
                                        displayKey : "group_name", //sesuai jsonBrand
                                        apiUrl : GET_LIST_GROUP,
                                        paginationInit : 
                                                        {
                                                            page : 1,
                                                            size : 10,
                                                            query : '',
                                                            orderby : 'modifieddate desc'
                                                        },
                                        tableData : [{
                                            headerName : "Group",
                                            jsonName   : "name", //sesuai json group
                                            search : {
                                                inputType :  "text",
                                                inputQuery : "full_like",
                                            }
                                        }]
                                    }
            },
        ]
    }

formTemplate : FormTemplate =
    {
        title : "Jenis Usaha (MCC)",
        backUrl : "data-master/jenis-usaha",
        getOneUrl : GET,
        postDataUrl : POST,
        putDataUrl : UPDATE,
        inputList : 
        [
            {
                jsonName : ["scoringdetail_id", "scoringdetail_name"],
                required : true,
                label : "Kategori Skor",
                benchmark : 'scoringdetail_id',
                type : "select",
                option :  [],
                selectApiConfiguration : 
                                        {
                                            apiUrl : GET_LIST_APPROVAL_SCORING,
                                            valuesKey : {"scoringdetail_id" : "id", "scoringdetail_name" : "name"},
                                            displayKey : "scoringdetail_name"
                                        }
            },
        ]
    }

formTemplate : FormTemplate =
    {
        title : "Jenis Usaha (MCC)",
        backUrl : "data-master/jenis-usaha",
        getOneUrl : GET,
        postDataUrl : POST,
        putDataUrl : UPDATE,
        inputList : 
        [
            {
                jsonName : "code",
                label : "Kode",
                type : "non-input",
            },
        ]
    }