Frappe Client ScriptJavascript

How to Concatenate Fields to Set a Title in a Frappe DocType

Merge Strings

Learn to write a Frappe Client Script to automatically merge multiple DocType fields into a single title field using the before_save event and frm.set_value API.

In Frappe and ERPNext, it's common to require a document's title or primary identifier to be a combination of other fields. This enhances readability and makes records easier to find in list views. For instance, an 'ODR Rake' document might be best identified by a combination of its CNSr and 'From' location fields.

This guide provides a client script that automates this process. It triggers just before the document is saved, concatenates the values from specified fields, and sets the result to a target field like 'title' or 'address_title'. The script also includes essential validation to handle cases where one of the source fields might be empty, preventing errors and ensuring clean data.

javascript
Learn more about Client Scripts in Frappe
1// Client Script to concatenate two fields into a title field before saving
2// Applied to a DocType, e.g., 'ODR Rake'
3

4frappe.ui.form.on("ODR Rake", {
5    before_save: function(frm) {
6        // Get values from the source fields
7        const str1 = frm.doc.cnsr;       // e.g., "Consignor Name"
8        const separator = " - ";
9        const str2 = frm.doc.from;       // e.g., "Origin Location"
10

11        // Check if the first field has a value
12        if (!str1) {
13            return; // Exit if the primary field is empty
14        }
15

16        // If the second field is empty or undefined, just use the first field's value
17        if (!str2) {
18            frm.set_value("title", str1);
19        } else {
20            // If both fields have values, concatenate them
21            const combined_title = str1.concat(separator, str2);
22            frm.set_value("title", combined_title);
23        }
24    }
25});

Understanding This Code

What It Does

Dynamically concatenates string values from multiple fields in a Frappe DocType and sets the combined string to a target field before the document is saved.

When To Use

Use in the 'before_save' Client Script trigger to ensure the title is set or updated just before data is committed to the database. This is perfect for auto-generating naming series or descriptive titles.

Prerequisites

  • •A Frappe DocType with at least two source fields and one target field.
  • •Basic understanding of JavaScript and the Frappe Framework UI.

Key Concepts

Important ideas to understand in this code

frappe.ui.form.on

The core Frappe API for attaching event handlers to DocType forms. It allows you to trigger custom JavaScript code on events like 'onload', 'refresh', 'validate', and 'before_save'.

Learn more

frm Object

The form controller instance passed to event handlers. It's the gateway to interacting with the form, providing access to document data (frm.doc), metadata (frm.meta), and methods like frm.set_value() and frm.refresh_field().

Learn more

before_save Event

A client-side trigger that fires just before the 'save' action is sent to the server. It is the ideal event for performing final data manipulations, calculations, or validations on the client side.

Learn more

String.prototype.concat()

A standard JavaScript method used to join two or more strings. It returns a new string containing the combined text of the strings provided as arguments.

Learn more

Step-by-Step Tutorial

Follow along to understand how this code works

1

Identify Your DocType and Fields

First, open your Frappe desk and navigate to the DocType you want to modify. Identify the 'Fieldname' of the source fields you want to combine and the target field where the result will be stored. For this example, we use 'cnsr' and 'from' as source fields and 'title' as the target in the 'ODR Rake' DocType.

text
// In 'ODR Rake' DocType:
// Source Field 1: cnsr (Data)
// Source Field 2: from (Data)
// Target Field: title (Data)
Next Step
2

Create a New Client Script

From the 'Awesome Bar', search for 'Client Script' and open the list. Click on 'Add Client Script' to create a new script record.

Next Step
3

Attach Script to the DocType

In the new Client Script form, select your DocType (e.g., 'ODR Rake') from the 'Select DocType' dropdown. This links the script to the form events of that DocType.

text
// In the Client Script form:
// Select DocType: ODR Rake
Next Step
4

Write the Concatenation Logic

Paste the provided JavaScript code into the 'Script' text area. This code hooks into the 'before_save' event. It reads the values from 'cnsr' and 'from', checks if they exist, and then combines them.

javascript
frappe.ui.form.on("ODR Rake", {
    before_save: function(frm) {
        const str1 = frm.doc.cnsr;
        const separator = " - ";
        const str2 = frm.doc.from;

        if (!str2) {
            frm.set_value("title", str1);
        } else {
            const combined_title = str1.concat(separator, str2);
            frm.set_value("title", combined_title);
        }
    }
});
Next Step
5

Save and Test the Script

Ensure the 'Enabled' checkbox is checked, then save the Client Script. Now, go to your DocType (e.g., create a new 'ODR Rake' document), fill in the source fields, and click 'Save'. The title field should automatically populate with the concatenated string.

Common Issues & Solutions

Troubleshoot problems you might encounter