DEV Community

Peter + AI
Peter + AI

Posted on

🎯 Setting Widget Properties at Runtime in Uniface 10.4

πŸ“ This blog post was created with the help of an AI assistant to explain Uniface concepts in simple terms.

What Are Widget Properties? πŸ€”

Widget properties control how your application looks and behaves. Think of them as the settings that define colors, sizes, positions, and other visual aspects of your user interface. In Uniface 10.4, you can change these properties while your application is running, which means you can create dynamic and responsive interfaces! ✨

Two Ways to Set Properties Dynamically πŸ› οΈ

Uniface gives you two main approaches to change widget properties at runtime:

1. Using ProcScript πŸ’»

ProcScript is Uniface's programming language. It provides special functions that let you get and set properties of widgets and windows. You can even create your own custom properties for specific purposes!

Important note: These functions only return properties that were explicitly set. If you're using default values, the functions will return an empty string. This is something to remember when debugging! πŸ›

2. Using JavaScript (for Dynamic Server Pages) 🌐

When building web applications with Dynamic Server Pages (DSP), using JavaScript is often the better choice. Why? Because many changes are just cosmetic and don't require going back to the server. This reduces network traffic and makes your application faster and more responsive! ⚑

ProcScript Functions for Widget Properties πŸ“š

Here's a quick overview of the main ProcScript functions you'll use:

For Application Shells:

  • $applproperties - Controls background color and background image of the application shell

For Forms:

  • $windowproperties - Gets or sets window properties of a component instance (only works with Form components)

For Entities:

  • $entityproperties - Controls properties of all occurrences in an entity
  • $CurEntProperties - Adjusts properties of a specific inner entity occurrence

For Occurrences:

  • $occproperties - Gets or sets properties of an occurrence
  • curoccvideo - Changes video properties for fields of the current occurrence

For Fields:

  • $properties - Sets initial or default widget properties
  • $fieldproperties - Sets widget properties for a specific field instance
  • $paintedfieldproperties - Adjusts current position and size for a specific field widget
  • $labelproperties - Gets or sets the text of an associated label

Example: Highlighting the Current Row 🎨

Let's say you want to highlight the current record in a form by changing its background color to yellow:

; ProcScript example
$curoccvideo("backcolor") = "yellow"
Enter fullscreen mode Exit fullscreen mode

This simple line makes the current occurrence stand out with a yellow background! 🟑

Example: Changing Entity Colors 🌈

Want to make all occurrences of a CUSTOMER entity blue? Here's how:

; ProcScript example
$EntityProperties("CUSTOMER") = "backcolor=dodgerblue"
Enter fullscreen mode Exit fullscreen mode

Now all customer records will have a nice blue background! πŸ”΅

JavaScript API for Dynamic Server Pages πŸš€

For Dynamic Server Pages, Uniface provides a powerful JavaScript API with these functions:

  • getProperty() - Returns the value of a specific widget property
  • setProperty() - Sets a single widget property to a new value
  • getProperties() - Returns all widget properties at once
  • setProperties() - Sets multiple widget properties in one call
  • clearProperty() - Restores the initial value of a specific property
  • clearProperties() - Restores all initial widget properties

Example: Enabling a Submit Button 🎯

Imagine you have a form where users need to check a terms and conditions checkbox before submitting. You can use JavaScript to enable the submit button only after they check it:

// JavaScript example in a webtrigger
operation checkTerms
    javascript
        var checkbox = getEntity("TERMS").getField("ACCEPTED");
        var submitButton = getEntity("ACTIONS").getField("SUBMIT");

        if (checkbox.getValue() == "T") {
            submitButton.setProperty("html:disabled", "");
        }
endjava
end
Enter fullscreen mode Exit fullscreen mode

This makes your form interactive without reloading the page! βœ…

Important Things to Remember πŸ’‘

  • Override order: Properties set in script always override properties set in the IDE or initialization files
  • Return values: ProcScript functions only return explicitly set properties, not default values
  • Web optimization: For DSPs, prefer JavaScript over ProcScript for visual changes to reduce server round-trips
  • Error handling: Functions return empty strings when errors occur, so always validate your entity and field names

When Should You Use Runtime Properties? 🀷

Runtime property setting is perfect for:

  • Highlighting important data or current selections
  • Changing colors based on data conditions (red for overdue, green for completed)
  • Enabling or disabling fields based on user actions
  • Adjusting layouts dynamically for different screen sizes
  • Creating responsive and interactive web applications

Conclusion 🎬

Setting widget properties at runtime in Uniface 10.4 gives you powerful tools to create dynamic, responsive, and user-friendly applications. Whether you use ProcScript for desktop applications or JavaScript for web applications, these functions let you control every aspect of your interface while your application is running. Start experimenting with these functions today and see how they can improve your user experience! 🌟

Happy coding! πŸ’»βœ¨

Top comments (0)