How vuejs "form view" works which is used in frappe hr pwa app

Frappe HR
1 
<template>
	<ion-page>
		<ion-content :fullscreen="true">
			<FormView
				v-if="formFields.data"
				doctype="Leave Application"
				v-model="leaveApplication"
				:isSubmittable="true"
				:fields="formFields.data"
				:id="props.id"
				:showAttachmentView="true"
				@validateForm="validateForm"
			/>
		</ion-content>
	</ion-page>
</template>

can someone tell me how this form view works, i want to use this for a custom doctype and want to display only some fields

2

The FormView component in the Frappe HR PWA simplifies form handling and integrates with Frappe’s backend, enabling data entry, validation, and submission for specific DocTypes.

FormView uses props to pass essential data and binds form data to a variable. fields defines the form fields structure, :id prop identifies a specific record.

The fields in FormView are controlled by the :fields prop. By setting this to a customized list of fields, you can display only the relevant fields you need for your custom DocType.

Events like @validateForm allow form validation.

:showAttachmentView="true" prop enables file attachment functionality

#RespectQuestion #EncourageNewUser

1 Like