4. OutputId()

This function has multiple use cases and is essential for ensuring that the widget functions correctly. We previously used this function to create a unique identifier value for the id HTML attribute. Another important role of this function is to generate identifiers for HTML input fields, enabling two-way binding with writable data field properties of the widget. In other words, it facilitates sending data back.

Let's create a very simple form item to see it in action:

• Create a new widget and name it "Simple Form Example."

• Create two new data model text properties called "FirstName" and "LastName."

• Make both properties writable and required.

• Use the script below:

<? 
	register input @FirstName 
	register input @LastName
?>
<label>
	First name:
	<input type="text" name="<?attr OutputId(@FirstName) ?>" value="<?attr @FirstName ?>">
</label>
<label>
	Last name:
	<input type="text" name="<?attr OutputId(@LastName) ?>" value="<?attr @LastName ?>">
</label>

For those familiar with sending form data over the internet, there is nothing new here. Just like in regular HTML forms, we use the <input> element to edit and submit the data. One interesting aspect is the use of OutputId(@PropertyName) in the name attribute. We cannot simply use name="PropertyName" here, as that would lead to name collisions if there are multiple instances of this widget on the same page. In other words, OutputId(@PropertyName) ensures that we get a unique name for this property specific to each widget instance.

Next, we will write a more exciting widget: a note widget that you can drag around the screen. This will explain many concepts, especially those related to creating WEM widgets.