Custom Submission Button by JS

Problem

If you customize a button to realize some of your business logic and also want the custom button to realize data submission to the database, how to realize the submission operation by the custom button in FineReport?

Solution

You can add a click event for the custom button and use the JS API method provided by FineReport to perform the submission operation by clicking the button. For details about the API description, see Exclusive API for Data Entry Preview.

Template Preparation

Open the template LineForm1.cpt in %FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc-EN\Form\LineForm.

Add a button widget in cell B1, set Button Type to Common, and set Button Name to Submit. The following figure shows the effect.

Click Event Setting

Select cell B1 where the Submit button is located, and add a Click event.

The JavaScript code is as follows:

_g().verifyAndWriteReport();
//Verify and submit data.

The code allows you to realize the same effect that is realized by clicking the submission button on the toolbar. If you need other submission effects, you can modify the API to the corresponding API.

Effect Display

Save the report and click Data Entry Preview. Modify a record of data and click the Submit button. After the Success prompt is displayed, you can preview the entered data in Database Query. The following figure shows the effect.

You can preview the template on mobile terminals. The following figure shows the effect.

For details, you can download the template Custom Submission Button by JS.cpt.