Developing Dynamic Web Forms with Empress Framework

Introduction

Web Forms are a powerful feature in the Empress framework that allows developers to add dynamic forms to their web applications. From Empress Version 7.1+, Web Forms have been enhanced with additional utilities such as tables and paging. In this guide, we will delve into the technical depth of this feature, guiding you on how to integrate and utilize it effectively in your software development and customization endeavors.

Web Form

Introduction to Web Forms

Web Forms in Empress are not only powerful, but they are also scriptable. This means you can customize each form to meet your unique application requirements.

Standard Web Forms

When you create a web form and check the “Is Standard” checkbox, Empress will automatically generate a new folder in the module of the Web Form. This folder will contain a .py and .js file that can be customized to adjust the look and functionality of the web form.

# Example of a .py file
def get_context(context):
    context.no_cache = 1
    context.show_sidebar = True

Web Form Settings

Web Forms offer a range of settings that allow you to control user interactions:

  • Allow Edit: This setting allows each user to have one instance of the web form that they can edit.
  • Allow Multiple: This setting allows users to view and edit multiple instances of the web form.
  • Show as Grid: If “Allow Multiple” is set, this setting will display the web form values in a table view.
  • Allow Incomplete Forms: For very long forms, you can allow users to save their progress without triggering validation for mandatory fields.

API and Client Scripting

Empress provides a comprehensive API and supports client scripting, enabling you to extend the functionality of your web forms:

Event Handler

You can write an event handler to perform actions when a field is changed:

frappe.web_form.on([fieldname], [handler]);

Get Value

You can retrieve the value of a particular field:

value = frappe.web_form.get_value([fieldname]);

Set Value

You can set the value of a particular field:

frappe.web_form.set_value([fieldname], [value]);

Validate

frappe.web_form.validate is called before the web_form is saved. You can add custom validation by overriding the validate method. To prevent the user from saving, return false.

frappe.web_form.validate = () => {
    // return false if not valid
}

Set Field Property

You can set a property of a field as follows:

frappe.web_form.set_df_property([fieldname], [property], [value]);

Trigger script when form is loaded

You can run a script to customize the form after it is loaded:

frappe.web_form.after_load = () {
    // init script here
}

Conclusion

Web Forms are a powerful feature in Empress that provide developers with a flexible and robust tool for creating dynamic and interactive forms in their web applications. With the ability to customize forms, validate user input, and script interactions on the client side, developers can leverage this feature to create engaging and user-centered applications.