0.0.13 • Published 2 years ago
library-form-template-dummy v0.0.13
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:
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-templateDevelopment
- 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",
},
]
}