@agung_dhewe/webapps 1.1.2 → 1.2.4

package/src/generator/templates/moduleDetilEdit.html.ejs

@@ -1,3 +1,8 @@
+<div id="<%= modulePart %>-head">
+	<div id="<%= modulePart %>-head-title" class="section-detil-title"></div>
+	<div id="<%= modulePart %>-head-descr" class="section-detil-descr"></div>
+</div>
+
 <form id="<%= modulePart %>-frm" class="module-form" locked="true" autoid="<%= autoid %>" primarykey="<%= primaryKeyElementId %>"><% fields.forEach(field => { %>
 
 	<!-- <%= field.component %>: <%= field.fieldname %>-->	
@@ -9,8 +14,14 @@
 		>
 	</div>
 <% }) %>	
+
+
+	<div id="<%= modulePart %>-footer"></div>
+
 </form>
 
+
+
 <div class="panel-recordbar" data-view="nodetil">
 	<div><a id="<%= moduleSection %>-btn_recordstatus" href="javascript:void(0)" tabindex="-1">Record Status</a></div>
 	<div><a id="<%= moduleSection %>-btn_logs" href="javascript:void(0)" tabindex="-1">Logs</a></div>

package/src/generator/templates/moduleDetilEdit.mjs.ejs

@@ -1,13 +1,15 @@
 import Context from './<%= moduleName %>-context.mjs'
-import * as Extender from './<%= moduleName %>-ext.mjs'
-import * as pageHelper from '/public/libs/webmodule/pagehelper.mjs'
+import * as Ext from './<%= moduleName %>-ext.mjs'
+import * as pageHelper from '/public/lib/webmodule/pagehelper.mjs'
+
+const Extender = Ext.<%=extenderDetil%> ?? Ext
 
 
-const CurrentState = {}
 const Crsl =  Context.Crsl
 const CurrentSectionId = Context.Sections.<%= modulePart %>
 const CurrentSection = Crsl.Items[CurrentSectionId]
 const Source = Context.Source
+const CurrentState = {}
 
 const TitleWhenNew = 'New <%= title  %>'
 const TitleWhenView = 'View <%= title  %>'
@@ -30,10 +32,11 @@ const btn_logs = document.getElementById('<%= moduleSection %>-btn_logs')
 
 const frm = new $fgta5.Form('<%= modulePart %>-frm');<% fields.forEach(field => { %>
 const <%= field.inputname %> = frm.Inputs['<%= field.elementId %>']<% }) %>	
-const obj_createby = document.getElementById('fRecord-section-createby')
-const obj_createdate = document.getElementById('fRecord-section-createdate')
-const obj_modifyby = document.getElementById('fRecord-section-modifyby')
-const obj_modifydate = document.getElementById('fRecord-section-modifydate')
+const rec_createby = document.getElementById('fRecord-section-createby')
+const rec_createdate = document.getElementById('fRecord-section-createdate')
+const rec_modifyby = document.getElementById('fRecord-section-modifyby')
+const rec_modifydate = document.getElementById('fRecord-section-modifydate')
+const rec_id = document.getElementById('fRecord-section-id')
 
 export const Section = CurrentSection
 
@@ -63,35 +66,53 @@ export async function init(self, args) {
 	CurrentState.headerFormLocked = true 
 	CurrentState.editDisabled = false
 
+	CurrentState.Actions = {
+		newdata: btn_new,
+		edit: btn_edit,
+	}
+
+	CurrentState.getHeaderForm = () => {
+		const <%= moduleName %>HeaderEdit = self.Modules.<%= moduleName %>HeaderEdit
+		const frmHeader = <%= moduleName %>HeaderEdit.getHeaderForm()
+		return frmHeader
+	}
+
 
 	<% fieldHandles.forEach(field => { %>
 	// <%= field.component %>: <%= field.inputname %><% field.handles.forEach(hnd => { %>
 	<%= field.inputname %>.addEventListener('<%= hnd.eventname %>', <% if (hnd.eventname=='selecting') { %>async <% } %>(evt)=>{
 		const fn_<%= hnd.eventname %>_name = '<%= field.inputname %>_<%= hnd.eventname %>'
 		const fn_<%= hnd.eventname %> = Extender[fn_<%= hnd.eventname %>_name]
-		if (typeof fn_<%= field.inputname %>_<%= hnd.eventname %> === 'function') {
+		if (typeof fn_<%= hnd.eventname %> === 'function') {
 			// create function di Extender<% if (field.component=='Combobox' && hnd.eventname=='selecting') { %> (jika perlu)<% } %>:
-			// export async function <%= field.inputname %>_<%= hnd.eventname %>(self, <%= field.inputname %>, frm, evt)
-			fn_<%= field.inputname %>_<%= hnd.eventname %>(self, <%= field.inputname %>, frm, evt)
+			// export async function <%= field.inputname %>_<%= hnd.eventname %>(self, <%= field.inputname %>, frm, evt) {}
+			fn_<%= hnd.eventname %>(self, <%= field.inputname %>, frm, evt)
 		} else {<% if (field.component=='Combobox' && hnd.eventname=='selecting') { %>
 			// default selecting
 			const cbo = evt.detail.sender
 			const dialog = evt.detail.dialog
 			const searchtext = evt.detail.searchtext!=null ? evt.detail.searchtext : ''
-			const url = `${Context.appsUrls.<%= hnd.appId %>.url}/<%- hnd.path %>`
+			const url = <% if (hnd.appId=='/') { %>'<%- hnd.path %>'<% } else { %>`${Context.appsUrls.<%= hnd.appId %>.url}/<%- hnd.path %>`<% } %>
+			const sort = {}
 			const criteria = {
 				searchtext: searchtext,
 			}
 
+			evt.detail.url = url 
+			evt.detail.CurrentState = CurrentState
+			
+			// buat function di extender:
+			// export function <%= field.inputname %>_<%= hnd.eventname %>_criteria(self, <%= field.inputname %>, frm, criteria, sort, evt) {}
 			const fn_<%= hnd.eventname %>_criteria_name = '<%= field.inputname %>_<%= hnd.eventname %>_criteria'
-			const fn_<%= field.inputname %>_<%= hnd.eventname %>_criteria = Extender[fn_<%= hnd.eventname %>_criteria_name]
+			const fn_<%= hnd.eventname %>_criteria = Extender[fn_<%= hnd.eventname %>_criteria_name]
 			if (typeof fn_<%= hnd.eventname %>_criteria === 'function') {
-				fn_<%= field.inputname %>_<%= hnd.eventname %>_criteria(self, <%= field.inputname %>, criteria)
+				fn_<%= hnd.eventname %>_criteria(self, <%= field.inputname %>, frm, criteria, sort, evt)
 			}
 
 			cbo.wait()
 			try {
-				const result = await Module.apiCall(url, {
+				const result = await Module.apiCall(evt.detail.url, {
+					sort,
 					criteria,
 					offset: evt.detail.offset,
 					limit: evt.detail.limit,
@@ -129,9 +150,11 @@ export async function openSelectedData(self, params) {
 		<% if (detilHasUpload) { %>
 		dataOpened(self, data)<% } %>
 
+		const suspended = self.Modules.<%= headerModulePartEdit %>.getCurrentState().Actions.edit.isSuspended()
+
+		CurrentState.editDisabled = suspended
 		CurrentState.currentOpenedId = id
 		
-		
 		// jika posisi header dalam keadaan unlock (bisa edit, perlu cek kondisi data, untuk menentukan bisa diedit atau tidak)
 		if (!CurrentState.headerFormLocked) {
 			const fn_iseditdisabled_name = '<%= modulePart %>_isEditDisabled'
@@ -145,15 +168,22 @@ export async function openSelectedData(self, params) {
 		// disable primary key
 		setPrimaryKeyState(self, {disabled:true})
 
+		// isi form dengan data
 		frm.setData(data)
-		frm.acceptChanges()
-		frm.lock()
-
+	
+		// jika ada kebutuhan untuk oleh lagi form dan data, bisa lakukan di extender
+		// export function <%= modulePart %>_formOpened(self, frm, CurrentState) {}
 		const fn_formopened_name = '<%= modulePart %>_formOpened'
 		const fn_formopened = Extender[fn_formopened_name]
 		if (typeof fn_formopened === 'function') {
 			fn_formopened(self, frm, CurrentState)
 		}
+
+
+		// finally, accept changes dan lock form
+		frm.acceptChanges()
+		frm.lock()
+
 	} catch (err) {
 		CurrentState.currentOpenedId = null
 		throw err
@@ -163,6 +193,10 @@ export async function openSelectedData(self, params) {
 	}
 }
 
+export function getCurrentState(self) {
+	return CurrentState
+}
+
 export function getForm(self) {
 	return frm
 }
@@ -175,12 +209,28 @@ export function headerLocked(self) {
 	CurrentState.headerFormLocked = true
 	CurrentState.editDisabled = true
 	btn_new.disabled = true
+
+	// Extender untuk event Locked
+	// export function <%= modulePart %>_formLocked(self, frm, CurrentState) {}
+	const fn_name = '<%= modulePart %>_formLocked'
+	const fn = Extender[fn_name]
+	if (typeof fn === 'function') {
+		fn(self, frm, CurrentState)
+	}	
 }
 
 export function headerUnlocked(self) {
 	CurrentState.headerFormLocked = false
 	CurrentState.editDisabled = false
 	btn_new.disabled = false
+
+	// Extender untuk event Unlocked
+	// export function <%= modulePart %>_formUnlocked(self, frm, CurrentState) {}
+	const fn_name = '<%= modulePart %>_formUnlocked'
+	const fn = Extender[fn_name]
+	if (typeof fn === 'function') {
+		fn(self, frm, CurrentState)
+	}	
 }
 
 export function disableNextButton(self, disabled=true) {
@@ -316,6 +366,7 @@ async function  frm_locked(self, evt) {
 
 
 	// Extender untuk event locked
+	// export function <%= modulePart %>_formLocked(self, frm, CurrentState) {}
 	const fn_name = '<%= modulePart %>_formLocked'
 	const fn = Extender[fn_name]
 	if (typeof fn === 'function') {
@@ -352,6 +403,7 @@ async function  frm_unlocked(self, evt) {
 	btn_next.disabled = true
 
 	// Extender untuk event Unlocked
+	// export function <%= modulePart %>_formUnlocked(self, frm) {}
 	const fn_name = '<%= modulePart %>_formUnlocked'
 	const fn = Extender[fn_name]
 	if (typeof fn === 'function') {
@@ -458,19 +510,20 @@ async function btn_new_click(self, evt) {
 		const <%= headerPrimaryKey %> = header_pk.value
 
 		// inisiasi data baru
-		let datainit = {
+		const datainit = {
 			<%= headerPrimaryKey %>,<% defaultInits.forEach(setdefault => { %>
-			<%- setdefault %>,
-		<% }) %>}
+			<%- setdefault %>,<% }) %>
+		}
 
 
 		// jika perlu modifikasi data initial,
 		// atau dialog untuk opsi data baru, 
 		// dapat dibuat di Extender.newData
+		// export async function <%= modulePart %>_newData(self, datainit, frm, CurrentState) {}
 		const fn_newdata_name = '<%= modulePart %>_newData'
 		const fn_newdata = Extender[fn_newdata_name]
 		if (typeof fn_newdata === 'function') {
-			await fn_newdata(self, datainit, frm)
+			await fn_newdata(self, datainit, frm, CurrentState)
 		}
 
 		// buat data baru
@@ -497,6 +550,7 @@ async function btn_save_click(self, evt) {
 	console.log('btn_save_click')
 
 	// Extender Autofill
+	// export async function <%= modulePart %>_autofill(self, frm) {}
 	const fn_autofill_name = '<%= modulePart %>_autofill'
 	const fn_autofill = Extender[fn_autofill_name]
 	if (typeof fn_autofill === 'function') {
@@ -547,12 +601,19 @@ async function btn_save_click(self, evt) {
 
 
 	// Extender Saving
+	// export async function <%= modulePart %>_dataSaving(self, dataToSave, frm, args) {}
+	const args = { cancelSave: false }
 	const fn_datasaving_name = '<%= modulePart %>_dataSaving'
 	const fn_datasaving = Extender[fn_datasaving_name]
 	if (typeof fn_datasaving === 'function') {
-		await fn_datasaving(self, dataToSave, frm)
+		await fn_datasaving(self, dataToSave, frm, args)
 	}
 
+	// batalkan save, jika ada request cancel
+	if (args.cancelSave) {
+		console.log('save is canceled')
+		return
+	}
 
 
 	let mask = $fgta5.Modal.createMask()
@@ -596,7 +657,8 @@ async function btn_save_click(self, evt) {
 		const fn_datasaved_name = '<%= modulePart %>_dataSaved'
 		const fn_datasaved = Extender[fn_datasaved_name]
 		if (typeof fn_datasaved === 'function') {
-			await fn_datasaved(self, data, frm)
+			// export async function <%= modulePart %>_dataSaved(self, data, frm) {}
+			await fn_datasaved(self, result, frm)
 		}
 
 
@@ -650,11 +712,38 @@ async function btn_del_click(self, evt) {
 	console.log('delete data')
 	let mask = $fgta5.Modal.createMask()
 	try {
+
+		// Extender Deleting
+		// export async function <%= modulePart %>_dataDeleting(self, id, args) {}
+		const args = { cancelDelete: false }
+		const fn_datadeleting_name = '<%= modulePart %>_dataDeleting'
+		const fn_datadeleting = Extender[fn_datadeleting_name]
+		if (typeof fn_datadeleting === 'function') {
+			await fn_datadeleting(self, idValue, args)
+		}
+
+		// batalkan save, jika ada request cancel
+		if (args.cancelDelete) {
+			console.log('delete is canceled')
+			return
+		}
+
 		const result = await deleteData(self, idValue)
 		
+		
+
+		// Extender Delete
+		// export async function <%= modulePart %>_dataDeleted(self, data) {}
+		const fn_datadeleted_name = '<%= modulePart %>_dataDeleted'
+		const fn_datadeleted = Extender[fn_datadeleted_name]
+		if (typeof fn_datadeleted === 'function') {
+			await fn_datadeleted(self, result)
+		}
+
+
 		// hapus current row yang dipilih di list
 		self.Modules.<%= moduleSection %>List.removeCurrentRow(self)
-		
+
 		// kembali ke list
 		self.Modules.<%= moduleSection %>List.Section.show()
 
@@ -716,6 +805,12 @@ async function btn_recordstatus_click(self, evt) {
 		sectionReturn: CurrentSection
 	}
 	
+	if (frm.isNew()) {
+		console.warn('tidak bisa buka rescord status jika data baru')	
+		$fgta5.MessageBox.warning('Record Status bisa dibuka setelah data disimpan')
+		return;
+	}
+
 	pageHelper.openSection(self, 'fRecord-section', params, async ()=>{
 
 		let mask = $fgta5.Modal.createMask()
@@ -725,15 +820,17 @@ async function btn_recordstatus_click(self, evt) {
 			const id = pk.value
 			const data = await openData(self, id)
 
-			obj_createby.innerHTML = data._createby
-			obj_createdate.innerHTML = data._createdate
-			obj_modifyby.innerHTML = data._modifyby
-			obj_modifydate.innerHTML = data._modifydate
+			rec_id.innerHTML = id
+			rec_createby.innerHTML = data._createby
+			rec_createdate.innerHTML = data._createdate
+			rec_modifyby.innerHTML = data._modifyby
+			rec_modifydate.innerHTML = data._modifydate
 
 
 			// jika mau menambah beberapa informasi mengenai record,
 			// misalnya commit by, postby, dll
 			// melalui extender <%= modulePart %>_addRecordInfo
+			// export async function <%= modulePart %>_addRecordInfo(self,  data) {}
 			const fn_addrecordinfo_name = '<%= modulePart %>_addRecordInfo'
 			const fn_addrecordinfo = Extender[fn_addrecordinfo_name]
 			if (typeof fn_addrecordinfo === 'function') {
@@ -757,6 +854,12 @@ async function btn_logs_click(self, evt) {
 		sectionReturn: CurrentSection
 	}
 
+	if (frm.isNew()) {
+		console.warn('tidak bisa buka logs jika data baru')	
+		$fgta5.MessageBox.warning('Logs bisa dibuka setelah data disimpan')
+		return;
+	}
+
 	pageHelper.openSection(self, 'fLogs-section', params, async ()=>{
 		// get log data
 		const pk = frm.getPrimaryInput()
@@ -766,7 +869,9 @@ async function btn_logs_click(self, evt) {
 		let mask = $fgta5.Modal.createMask()
 		try {
 
-			const url = `${Context.appsUrls.core.url}/logs/list`
+
+			const logApp = Context.appsUrls.core ?? Context.appsUrls[Context.appName]
+			const url = `${logApp.url}/logs/list`
 			const criteria = {
 				module: Context.moduleName,
 				table: '<%= tablename %>',

package/src/generator/templates/moduleDetilList.html.ejs

@@ -1,5 +1,6 @@
 <div id="<%= modulePart %>-head">
-
+	<div id="<%= modulePart %>-head-title" class="section-detil-title"></div>
+	<div id="<%= modulePart %>-head-descr" class="section-detil-descr"></div>
 </div>
 
 

package/src/generator/templates/moduleDetilList.mjs.ejs

@@ -1,5 +1,7 @@
 import Context from './<%= moduleName %>-context.mjs'
-import * as Extender from './<%= moduleName %>-ext.mjs'
+import * as Ext from './<%= moduleName %>-ext.mjs'
+
+const Extender = Ext.<%=extenderDetil%> ?? Ext
 
 const Crsl =  Context.Crsl
 const CurrentSectionId = Context.Sections.<%= modulePart %>
@@ -31,7 +33,8 @@ export async function init(self, args) {
 
 	// tambahkan event lain di extender: rowrender, rowremoving
 	// dapatkan parameternya di evt.detail
-	const fn_addTableEvents_name = '<%= sectionName %>List_addTableEvents'
+	// export function <%= modulePart %>_addTableEvents(self, tbl) {}
+	const fn_addTableEvents_name = '<%= modulePart %>_addTableEvents'
 	const fn_addTableEvents = Extender[fn_addTableEvents_name]
 	if (typeof fn_addTableEvents === 'function') {
 		fn_addTableEvents(self, tbl)
@@ -47,6 +50,7 @@ export async function init(self, args) {
 	btn_delrow.addEventListener('click', (evt)=>{ btn_delrow_click(self, evt) })
 	
 	// Extend list detil
+	// export function <%= modulePart %>_init(self) {}
 	const fn_name = '<%= modulePart %>_init'
 	const fn_<%= modulePart %>_init = Extender[fn_name]
 	if (typeof fn_<%= modulePart %>_init === 'function') {
@@ -56,6 +60,22 @@ export async function init(self, args) {
 	CurrentState.headerFormLocked = true 
 }
 
+function setDefaultHeadTitle(self, headerForm) {
+	const data = headerForm.getData()
+
+	<% if (bindHeadTitle!='') { %>const detilTitleElements = document.getElementsByClassName('section-detil-title')
+	for (let el of detilTitleElements) {
+		el.innerHTML = data.<%= bindHeadTitle %>
+	}
+	
+	<% } %><% if (bindHeadDescr!='') { %>const detilDescrElements = document.getElementsByClassName('section-detil-descr')
+	for (let el of detilDescrElements) {
+		el.innerHTML = data.<%= bindHeadDescr %>
+	}<% } %>
+
+}
+
+
 export async function openList(self, params) {
 	const moduleHeaderEdit = params.moduleHeaderEdit
 	
@@ -63,10 +83,13 @@ export async function openList(self, params) {
 	const pk = headerForm.getPrimaryInput()
 	const id = pk.value 
 
+	// set title halaman ini sesuai data di header
+	setDefaultHeadTitle(self, headerForm)
 
 	// apabila mau menambahkan informasi saat detil list dibuka,
 	// misalnya menambahkan informasi beberapa data dari formHeader
 	// bisa di set pada Extender.<%= modulePart %>_openList :  bisa menggunakan template untuk di embed ke header pada detil list
+	// export function <%= modulePart %>_openList(self, headerForm) {}
 	const fn_name = '<%= modulePart %>_openList'
 	const fn_<%= modulePart %>_openList = Extender[fn_name]
 	if (typeof fn_<%= modulePart %>_openList === 'function') {
@@ -81,16 +104,31 @@ export async function openList(self, params) {
 	tbl.clear()
 	tbl_loadData(self, {criteria, sort})
 
-
-	if (CurrentState.headerFormLocked) {
- 		btn_addrow.setAttribute('disabled', '')
+	const <%= moduleEdit %> = self.Modules.<%= moduleEdit %>
+	const btn_addrow = <%= moduleEdit %>.getCurrentState().Actions.newdata
+	<% if (!allowRowAdd) { %>
+	const btn_edit = <%= moduleEdit %>.getCurrentState().Actions.edit
+	btn_addrow.suspend() <% } %><% if (!allowRowRemove) { %>
+	btn_delrow.suspend() <% } %><% if (!allowRowEdit) { %>
+	btn_edit.suspend()
+	<% } %>
+
+
+	// walaupun CurrentState.headerFormLocked, tapi kalau header edit tidak di suspend tetap bisa add/remove row di detil
+	const suspended = self.Modules.<%= headerModulePartEdit %>.getCurrentState().Actions.edit.isSuspended()
+	if (suspended) {
+ 		btn_addrow.disabled = true
 		btn_delrow.disabled = true
 	} else {
-		btn_addrow.removeAttribute('disabled')
+		btn_addrow.disabled = false
 		btn_delrow.disabled = false
 	}
 }
 
+export function getCurrentState(self) {
+	return CurrentState
+}
+
 export function getGrid(self) {
 	return tbl
 }
@@ -170,19 +208,26 @@ export function keyboardAction(self, actionName) {
 		tbl.nextRecord()
 	} else if (actionName=='enter') {
 		const <%= moduleEdit %> = self.Modules.<%= moduleEdit %>
-		<%= moduleEdit %>.Section.show({}, (evt)=>{
-			openRow(self, tbl.CurrentRow)
-		})
+		if (tbl.CurrentRow!=null) {
+			<%= moduleEdit %>.Section.show({}, (evt)=>{
+				openRow(self, tbl.CurrentRow)
+			})
+		}
 	}
 }
 
 
 function setCurrentRow(self, tr) {
 	CurrentState.SelectedRow = tr
+	tbl.CurrentRow = tr
 }
 
 
 async function openRow(self, tr) {
+	if (tr==null) {
+		return
+	}
+
 	const keyvalue = tr.getAttribute('keyvalue')
 	const key = tr.getAttribute('key')
 
@@ -209,13 +254,22 @@ async function openRow(self, tr) {
 
 async function listRows(self, criteria, offset, limit, sort) {
 	const url = `/${Context.moduleName}/<%= sectionName %>-list`
+	const evt = { url, limit }
+
+	// export async function <%= modulePart %>_dataLoad(self, criteria, sort, evt) {}
+	const fn_dataLoad_name = '<%= modulePart %>_dataLoad'
+	const fn_dataLoad = Extender[fn_dataLoad_name]
+	if (typeof fn_dataLoad === 'function') {
+		await fn_dataLoad(self, criteria, sort, evt)
+	}
+
 	try {
 		const columns = []
-		const result = await Module.apiCall(url, {  
+		const result = await Module.apiCall(evt.url, {  
 			columns,
 			criteria,
 			offset,
-			limit,
+			limit: evt.limit,
 			sort
 		}) 
 		return result 
@@ -231,6 +285,14 @@ async function deleteRows(self, data) {
 		
 		const result = await Module.apiCall(url, { data }) 
 		if (result.deleted) {
+
+			// export async function <%= modulePart %>_rowsDeleted(self, data) {}
+			const fn_name = '<%= modulePart %>_rowsDeleted'
+			const fn = Extender[fn_name]
+			if (typeof fn === 'function') {
+				await fn(self, result)
+			}
+
 			return true
 		} else {
 			throw new Error(result.message)
@@ -277,8 +339,21 @@ async function tbl_loadData(self, params={}) {
 		if (offset===0) {
 			tbl.clear()
 		}
+
+
+		tbl.setCriteria(criteria)
 		tbl.addRows(result.data)
 		tbl.setNext(result.nextoffset, result.limit)
+
+
+		// export async function <%= modulePart %>_tableDataLoaded(self, tbl, result) {}
+		const fn_name = '<%= modulePart %>_tableDataLoaded'
+		const fn = Extender[fn_name]
+		if (typeof fn === 'function') {
+			await fn(self, tbl, result)
+		}
+
+
 	} catch (err) {
 		console.error(err)
 		$fgta5.MessageBox.error(err.message)

package/src/generator/templates/moduleHeaderEdit.html.ejs

@@ -12,12 +12,15 @@
 </form>
 
 
+<div id="<%= modulePart %>-footer">
+</div>
+
 <div id="panel-detil-selector" class="panel-detil <% if (detilCount==0) { %>hidden<% } %>">
 	<div panel-title>
 		Information Detil
 	</div>
 	<div panel-content><% sectionDetils.forEach(detil => { %>
-		<div class="panel-detil-row">
+		<div class="panel-detil-row" id="<%= modulePart %>-info-<%= detil.entityName %>-row">
 			<div data-label><a href="javascript:void(0)" data-target-section="<%= detil.listModulePart %>" data-current-section="<%= modulePart %>"><%= detil.title %></a></div>
 			<div data-info>&nbsp</div>
 		</div><% }) %>
@@ -28,6 +31,10 @@
 	</div>
 </div>
  
+<div id="<%= modulePart %>-panelaction" class="panel-action<% if (actionList.length==0) { %> hidden<% } %>"><% if (actionList.length>0) { %><% actionList.forEach(action => { %>
+	<button id="<%= action.elementId %>"><%= action.title %></button><% }) %>
+<% } %></div>
+
 
 <div class="panel-recordbar" <% if (detilCount==0) { %>data-view="nodetil"<% } %>>
 	<div><a id="<%= moduleSection %>-btn_recordstatus" href="javascript:void(0)" tabindex="-1">Record Status</a></div>