Masking process in Vdesigner 2.0

Tanuj_Tayal · April 3, 2025, 6:46am

How can I mask an entered SSN number?
I am entering an SSN in the input field, for example, 000-00-0000. However, on the next page, I need to display it in a masked format as XXX-XX-0000. How can I achieve this functionality?

Ritik_Dixit · April 3, 2025, 6:49am

Hii @Tanuj_Tayal Welcome to the vahana community
This JavaScript function masks a given Social Security Number (SSN) by replacing the first five digits with "XXX-XX-" while keeping the last four digits unchanged.

function maskInput(input) {
let formattedInput;

if (input.includes('-')) {
    let parts = input.split('-');

    // Validate format (should have 3 parts: XXX-XX-XXXX)
    if (parts.length !== 3 || parts[0].length !== 3 || parts[1].length !== 2 || parts[2].length !== 4) {
        return "Invalid input format";
    }
    formattedInput = input; // Already formatted
} 
// If input is a continuous 9-digit number, format it properly
else if (input.length === 9) {
    formattedInput = `${input.substring(0, 3)}-${input.substring(3, 5)}-${input.substring(5)}`;
} 
// If input doesn't match any expected format, return an error
else {
    return "Invalid input format";
}

// Mask the first two segments
let maskedOutput = "XXX-XX-" + formattedInput.substring(7); // Keep last 4 digits unchanged

return maskedOutput;

}

Explanation of the code :

Check if the input contains dashes (-)
If yes, it splits the input into parts.
It verifies if the input follows the expected SSN format (XXX-XX-XXXX).
If the format is valid, it stores the input as formattedInput.
If input is a 9-digit number without dashes
It automatically formats it into XXX-XX-XXXX format.
Example: "123456789" → "123-45-6789"
If input is neither in the expected format nor a 9-digit number
It returns "Invalid input format".
Apply masking
The first five characters are replaced with "XXX-XX-".
The last four digits remain unchanged.
Example: "123-45-6789" → "XXX-XX-6789"

Vinay_Pratap_Singh · April 3, 2025, 10:02am

Hi Tanuj,

There is another built-in way to apply masking on text fields within the platform. You can configure this directly through the property panel by setting specific properties. This eliminates the need for custom implementations.

To enable masking, follow these steps:

Navigate to InputField → Property Panel → Security → Data Masking
Choose an appropriate masking option based on your requirement

Let me know if you need further clarification!