🎨 How to Insert Uniface Objects into Server Page Layouts in Uniface 10.4

This blog post was created with the help of an AI assistant 🤖. The goal is to explain Uniface 10.4 documentation in simple, easy-to-understand language.

📝 What is This About?

When you build web applications in Uniface 10.4, you need to connect your data structure to the visual layout that users see in their browser. This process is called binding. In simple terms: you take the fields and entities you defined in your component structure and insert them into your HTML layout so they can display data.

Think of it like connecting wires between your database and your web page. Without this connection, your layout is just empty boxes with no data flowing through them.

⚙️ Before You Start

Before you can insert objects into the layout, you must define your component structure first. This includes:

• Creating entities (like tables in a database)
• Defining fields (like columns in those tables)
• Setting up the relationships between entities

Without this structure in place, there's nothing to insert into your layout.

🚀 Step-by-Step Guide

Step 1: Open the Design Layout

In the Component Editor, click the Design Layout button. This opens the layout editor where you can work with HTML and design how your page looks.

Step 2: Select Objects from the Structure

Go to the Structure tab in the Component Editor. Here you can see all your entities and fields. Select the objects you want to add to your layout. You can select:

• Single fields
• Multiple fields at once
• Entire entities with all their fields
• Nested entities (entities inside other entities)

Step 3: Choose a Copy Option

Right-click on your selection and choose one of three copy options. Each option formats your objects differently:

🔹 Option 1: As Horizontal Table

This option creates a table layout with labels in the first row and data fields in the second row. Perfect for displaying multiple fields side-by-side.

Example Output:

<table>
  <tr>
    <th>Customer Name</th>
    <th>Order Date</th>
    <th>Total Amount</th>
  </tr>
  <tr>
    <td id="ufld:CUSTOMER_NAME.ORDERS"></td>
    <td id="ufld:ORDER_DATE.ORDERS"></td>
    <td id="ufld:TOTAL_AMOUNT.ORDERS"></td>
  </tr>
</table>

When to use it: When you want to display data in a structured table format, like a list of orders or a form with multiple fields aligned neatly.

🔹 Option 2: As Unformatted HTML

This option wraps each object in simple <div> tags. It gives you maximum flexibility to style and arrange elements with CSS later.

Example Output:

<div id="ufld:CUSTOMER_NAME.ORDERS"></div>
<div id="ufld:ORDER_DATE.ORDERS"></div>
<div id="ufld:TOTAL_AMOUNT.ORDERS"></div>

When to use it: When you want full control over the layout and plan to use custom CSS or JavaScript to style your page.

🔹 Option 3: As Binding Information

This option gives you only the binding information—just the ID or name attribute and value. No HTML structure is created for you.

Example Output:

id="ufld:CUSTOMER_NAME.ORDERS"
id="ufld:ORDER_DATE.ORDERS"
id="ufld:TOTAL_AMOUNT.ORDERS"

When to use it: When you already have your HTML structure built and just need to add the binding attributes to existing elements.

Step 4: Paste into Your Layout

After copying, paste the generated code into your layout editor at the position where you want the fields to appear. The XHTML code is automatically generated and ready to use.

🔄 Dynamic vs Static Server Pages

The generated code differs depending on your component type:

• Dynamic Server Pages (DSP): Generate standards-compliant XHTML that works with modern HTML5
• Static Server Pages (USP): Generate Uniface-specific XHTML elements

Dynamic Server Pages are more flexible and support partial page updates, while Static Server Pages regenerate the entire page on each request.

⚠️ Important Warning: No Auto-Sync!

Here's something critical to remember: Uniface does not automatically synchronize your component structure and server page layout.

This means if you:

• Change a field name in the component structure
• Delete a field
• Modify widget properties
• Add new fields

You must manually update the layout code to reflect these changes. The layout won't automatically update itself. This is a common source of errors, so always double-check after making structural changes.

💡 Practical Tips

Tip 1: Always define your complete component structure before creating the layout. Changing the structure later requires manual layout updates.

Tip 2: Use meaningful field names in your component structure. They become part of the HTML ID attributes and make debugging easier.

Tip 3: For nested entities, the "As Horizontal Table" option creates tables within tables. This can get complex quickly, so consider using "As Unformatted HTML" for better control.

Tip 4: Keep a backup of your layout before making major structural changes. If synchronization issues occur, you can compare versions.

🎯 Real-World Example

Imagine you're building an order management system. You have an ORDERS entity with fields like ORDER_ID, CUSTOMER_NAME, ORDER_DATE, and TOTAL_AMOUNT. Here's how you would use this feature:

1. Define the ORDERS entity with all fields in the Component Editor
2. Click "Design Layout" to open the layout editor
3. Select all fields from the ORDERS entity in the Structure tab
4. Right-click and choose "As Horizontal Table"
5. Paste the generated table into your layout
6. Add CSS styling to make it look professional
7. Test the page to ensure data flows correctly

The result: A clean table that displays all order information, properly bound to your database fields.

🎓 Summary

Inserting Uniface objects into server page layouts is straightforward once you understand the three copy options and remember that synchronization is manual. Choose the right copy option based on your needs: tables for structured data, unformatted HTML for flexibility, or binding information when you already have HTML structure.

The most important thing to remember: always update your layout manually when you change the component structure. This simple habit will save you hours of debugging time.

Happy coding! 💻✨