Custom HTML Attributes - I built a lightweight Java framework for Japan's "SI" projects (third attempt in 10 years) #006

Introduction

This time, I'll cover "Custom HTML Attributes" in SIcore.

The framework's custom data-* attributes enable concise implementation of common patterns.

Basic HTML ⇔ JSON Mechanism

In SIcore, the name attribute (or data-name attribute) of HTML elements serves as the key for exchanging data with the server in JSON format.

Basic Flow

【Browser → Server】
Execute PageUtil.getValues()
    ↓
Retrieve values from HTML elements with name attributes to generate request JSON
    ↓
Send request JSON to server

【Server → Browser】
Receive response JSON from server
    ↓
Execute PageUtil.setValues(res)
    ↓
Set response JSON values to HTML elements with name/data-name attributes

During this process, custom HTML attributes (like data-check-off-value and data-value-format-type) automatically perform value conversion and formatting.

What This Article Covers

• Three main custom HTML attributes
  • data-name attribute (display-only elements)
  • data-check-off-value attribute (checkbox OFF values)
  • data-value-format-type attribute (automatic formatting)
• Benefits of each

data-name Attribute: Display-Only Elements

Purpose

Used when you want to display values in elements other than form input elements (<input>, <select>, etc.).

Implementation Example

<!-- Input element (name attribute) -->
<input type="text" name="user_id">

<!-- Display-only element (data-name attribute) -->
<span data-name="user_nm"></span>
<td data-name="list.pet_nm"></td>

JavaScript Behavior

// On get: retrieve only name attributes (data-name not retrieved)
const req = PageUtil.getValues();

// On set: set values to both name and data-name
PageUtil.setValues(res);

Benefits

• Values can be set in non-input elements like <span> and <td>
• Can use the same naming convention as name attributes
• Clearly separates display-only fields from input fields

data-check-off-value Attribute: Checkbox OFF Values

Purpose

Defines the value to include in the request when a checkbox is OFF.

Implementation Example

<!-- When checked: "1", when unchecked: "0" -->
<input type="checkbox" name="is_dog" value="1" data-check-off-value="0">

<!-- When checked: "true", when unchecked: "false" -->
<input type="checkbox" name="is_cat" value="true" data-check-off-value="false">

Request JSON

// When checked
// { "is_dog": "1", "is_cat": "true" }

// When unchecked (OFF value is automatically included)
// { "is_dog": "0", "is_cat": "false" }

Benefits

• Normal <form> elements don't send values when unchecked, but this attribute includes the value
• Explicitly define the OFF value for checkboxes
• No need for server-side processing to supplement OFF values

Note

Do not use for non-mandatory database search conditions (since the common specification is to exclude conditions when there's no value).

data-value-format-type Attribute: Automatic Formatting

Purpose

Automatically formats values for display and automatically unformats (returns to original format) when sending requests.

Setting Values

Implementation Example

<!-- Number (comma-separated) -->
<input type="text" name="income_am" data-value-format-type="num">

<!-- Date (YYYY/MM/DD format) -->
<input type="text" name="birth_dt" data-value-format-type="ymd">

<!-- Time (HH:MI:SS format) -->
<input type="text" name="start_tm" data-value-format-type="hms">

JavaScript Behavior

// Display response in browser: automatic formatting
PageUtil.setValues({
  income_am: "1200000",  // → Display: "1,200,000"
  birth_dt:  "19870321", // → Display: "1987/03/21"
  start_tm:  "093000"    // → Display: "09:30:00"
});

// Generate request from browser input: automatic unformatting
const req = PageUtil.getValues();
// {
//   income_am: "1200000",  // Commas removed
//   birth_dt:  "19870321", // Slashes removed
//   start_tm:  "093000"    // Colons removed
// }

Java-Side Processing

// No unformatting needed on Java side (already unformatted values arrive)
BigDecimal income = io.getBigDecimal("income_am");      // 1200000
LocalDate birthDate = io.getDateNullable("birth_dt");   // 1987-03-21

// Can be registered directly to DB
SqlUtil.insert(getDbConn(), "t_user", io);

Benefits

• Automatic conversion between display format and database storage values
• No need to write formatting logic in Java or JavaScript
• Separates appearance from data
• Server API can return database format values directly without conversion to display format

Other Custom Attributes

The following attributes are also defined for internal framework use:

These are mainly used automatically within the framework, so you don't need to be aware of them in normal implementation.

Conclusion

SIcore's custom HTML attributes enable concise implementation of common patterns.

In particular, the data-value-format-type attribute improves development efficiency by eliminating the need to write formatting logic in both Java and JavaScript.

Next time, I plan to introduce Map-type design.

Related Articles

Check out the other articles in this series!

• 001 Why I Built a Framework for SI Projects
• 002 Direct URL-to-Class Mapping
• 003 JSON-Only Communication
• 004 Mockup = Implementation
• 005 Dynamic List Rendering
• 006 Custom HTML Attributes (this article)
• 007 Map-Based Design

SIcore Framework Links

All implementation code and documentation are available here:

• GitHub: https://github.com/sugaiketadao/sicore
• How to verify sample screens (VS Code): https://github.com/sugaiketadao/sicore#%EF%B8%8F-how-to-verify-sample-screens---vs-code
• Getting started with AI development: https://github.com/sugaiketadao/sicore#-getting-started-with-ai-development

Thank you for reading!
❤ Reactions are appreciated!