4D Blog

Home Product Evolution of Form Objects

Evolution of Form Objects

April 28, 2023

Product

To allow you to make the most beautiful interfaces, we continue to improve the form objects. Since 4D v19 R6, you can define a rounded border for static text and input text form objects.

With 4D v20, new possibilities are available.

  • For buttons, radio buttons, and checkboxes, we have added new settings for the text and the icon.
  • For radio buttons and checkboxes, the number of states for the icon has been improved to allow a better rendering for the end user.

HDI Example

Text and icon position

Text alignment

The “Text alignment” property is now applicable for buttons, radio buttons, and checkboxes. You can define the text alignment with the property list, CSS, and OBJECT SET HORIZONTAL ALIGNMENT command.

Property list:

CSS example:

.align {
    textAlign : right;
}

Code example:

To the OBJECT SET HORIZONTAL ALIGNMENT command, you can pass one of the three constants: Align left, Align right, and Align center.

OBJECT SET HORIZONTAL ALIGNMENT (*; "button"; Align center)

Image hugs title

The new “Image hugs title” property is added for buttons, radio buttons, and checkboxes.

When the value of this property is false, the image is positioned according to the “Title/ImagePosition” property at the edge of the button. When this property is true, the image is positioned directly adjacent to the title based on the “Title/ImagePosition” property.

This property can be set with the property list, CSS, and OBJECT SET FORMAT command. 

Property list:

blank

 CSS example:

.hug {
    imageHugsTitle : false;
}

Code example:

To format buttons, with the OBJECT SET FORMAT command, pass a string respecting the following syntax: “title; picture; background; titlePos; titleVisible; iconVisible; style; horMargin; vertMargin; iconOffset; popupMenu; hyperlink; numStates; imageHugsTitle“. If you don’t want to modify a value, you don’t need to pass the value.

To change only the imageHugsTitle property:

OBJECT SET FORMAT (*; "button"; ";;;;;;;;;;;;;0")

Result

Here are different examples of what we can achieve:

blank

Number of icon states

For radio buttons and checkboxes, before 4D v20, you can define a four-state icon for True, False, Rollover, and Disable states. 

For a better end-user experience, in some cases, you need the rollover or disable state to consider the true or false state. So now, you can use an icon with 2 states up to 6 states.

  •  
  • True,
  • False,
  • True Rollover,
  • False Rollover,
  • True Disable,
  • False Disable.

 

Feel free to download the HDI to see the different states by clicking, hovering…

blank

Next…

Check out this feature with the HDI and the documentation for more details! And as always, looking forward to reading your feedback.

Discuss

Tags Form editor, Form object, UI, User Experience, v20

Latest related posts

  • May 20, 2025

    Automatic Refresh of OEM Build Licenses

  • May 16, 2025

    New class to handle incoming TCP connections

  • April 29, 2025

    Discover your AI-powered writing assistant in 4D Write Pro

Vanessa Talbot
Vanessa Talbot
• Product Owner •Vanessa Talbot joined 4D Program team in June, 2014. As a Product Owner, she is in charge of writing the user stories then translating it to functional specifications. Her role is also to make sure that the feature implementation delivered is meeting the customer need.Since her arrival, she has worked to define key features in 4D. She has worked on most of preemptive multi-threading new features and also on a very complex subject: the new architecture for engined application. Vanessa has a degree from Telecom Saint-Etienne. She began her career at the Criminal Research Institute as a developer for the audiovisual department. She has also worked in media and medical fields as expert in technical support, production as well as documenting new features.
  • Deutsch
  • Français
  • English
  • Português
  • Čeština
  • Español
  • Italiano
  • 日本語

Categories

Browse categories

  • 4D View Pro
  • 4D Write Pro
  • 4D for Mobile
  • Email
  • Development Mode
  • 4D Language
  • ORDA
  • User Interface / GUI
  • Qodly Studio
  • Server
  • Maintenance
  • Deployment
  • 4D Tutorials
  • Generic
  • 4D Summit sessions and other online videos

Tags

4D-Analyzer 4D for Android 4D for iOS 4D NetKit 4D Qodly Pro 4D View Pro 4D Write Pro 20 R8 20 R9 Administration Authentication Build application CI/CD Class Client/Server Code editor Collections Compatibility settings Formula Listbox Logs Mail Microsoft 365 Network Objects ORDA PDF Pictures Preemptive Programming Qodly Studio REST Scalability Security Session Source control Speed Spreadsheet Tutorial UI User Experience v20 vscode Web Word processor

Tags

4D-Analyzer 4D for Android 4D for iOS 4D NetKit 4D Qodly Pro 4D View Pro 4D Write Pro 20 R8 20 R9 Administration Authentication Build application CI/CD Class Client/Server Code editor Collections Compatibility settings Formula Listbox Logs Mail Microsoft 365 Network Objects ORDA PDF Pictures Preemptive Programming Qodly Studio REST Scalability Security Session Source control Speed Spreadsheet Tutorial UI User Experience v20 vscode Web Word processor
Subscribe to 4D Newsletter

© 2025 4D SAS - All rights reserved
Terms & Conditions | Legal Notices | Data Policy | Cookie Policy | Contact us | Write for us


Subscribe to 4D Newsletter

* Your privacy is very important to us. Please click here to view our Policy

Contact us

Got a question, suggestion or just want to get in touch with the 4D bloggers? Drop us a line!

* Your privacy is very important to us. Please click here to view our Policy