Part 3 – Design the parent form for individual expenses (Gravity Forms)

Create a form such as a ‘Bank import parent form’ with the following suggested fields

• Submitee’s name – Single Line Text field- – to track the person’s name since the creating user will be an automation account that submits the form on behalf of the user using REST API.
• Submitee’s first name – Single Line Text field – a hidden field that will be used in email conversations as part fo the workflow later.
• User ID – a User field (Gravity Flow required) – to track the ID of the user (all users must have a WordPress account).
• Nested form (Gravity Nested Forms add-on required) – add the child form we created earlier with the fields that you wish to display.
• Total – A number field – tick ‘Enable Calculation’ and use a merge tag to calculate individual expenses’ charge amount – for example: {AMEX Expense Reimbursement Sub-form:3:sum=5} –> Child form name:Child form ID:sum=field ID to sum up. See Gravity Nested Form’s Calculations help.
• Direct Manager’s first name – Single Line Text – a hidden field that will be used when emailing management to approve the submission as part fo the workflow.
• Direct Manager ID – User field (Gravity Flow required) – a hidden field that will be used to assign a workflow to the user ID in WordPress.

Add a custom JavaScript

Prevent users from deleting an imported expense. For this, you will need a custom Javascript code and a free Custom JavaScript add-on from GravityWiz. Once installed, go to the form’s Settings page and enter the following code:

gform.addFilter('gpnf_should_delete', function(shouldDelete, items, $trigger, gpnf) {
	if ( ! $trigger.is('.gpnf-row-actions .delete-button') ) {
		return shouldDelete;
	}

	if ( ! $trigger.data( 'isConfirming' ) ) {
		$trigger
			.data( 'isConfirming', false )
			.text( 'Imported expenses cannot be deleted!' );
			
	

		setTimeout( function() {
			$trigger
				.data( 'isConfirming', false )
				.text( gpnf.modalArgs.labels.delete );
		}, 3000 );

		return false;
	}

	return shouldDelete;
});

Hide the ‘Add new entry’ button on the form

Since we will be importing data from a daily feed from a bank, we do not want employees to be messing with it and adding additional expenses that have not been processed by the bank yet.

• To do this, install a form of a Code Snippets free plugin in WordPress
• Create a new snippet with the following code (change form ID to the correct ID of your form) and then activate the plugin.

//Source: https://gravitywiz.com/documentation/gpnf_template_args/   (see add_button)
//Source 2: https://gist.github.com/spivurno/a835d8990d307e1f03dd

// _47 = form ID. If removed, this script will apply also to all other nested forms!
add_filter( 'gpnf_template_args_47', function ( $args, $field ) {
	// Hide the add button for AMEX expenses
	$args['add_button'] = '';	
	
	// Hide the 'Delete entry' button on the parent form. 
        // Note that this is a nested array (array in array). 
        // Hiding the button does not truly hide it and does not hide it from the nested form.
	//$args['labels']['delete_entry']= '';
		
	// Test to remove sticky footer
        // See https://gravitywiz.com/documentation/gpnf_init_script_args/#unstick-the-modal-footer
	//$args['modalStickyFooter'] = false;

    return $args;
}, 10, 2 );

Verify that the Add button is no longer there:

Go back to course overview: Concur Alternative: Import Employees’ Credit Card Expenses to WordPress via an automated bank feed – Gravity Form/Flow & Make.com (Integromat)