> For the complete documentation index, see [llms.txt](https://docs.wem.io/platform/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.wem.io/platform/tutorials/building-widgets/basics/7-view-state.md).

# 7. View State

{% hint style="info" %}
A CSP-compliant version is available for download on the [Examples](/platform/tutorials/building-widgets/examples.md) page.
{% endhint %}

To maintain the state of the scroll position of an HTML element, the zoom position of a chart, or any state that is specific to the view when the widget needs to be redrawn, we can use the view state. This state is accessible when the widget is rendered on a template but is destroyed when the widget is no longer rendered. We will discuss this in more detail in later chapters. For now, let's extend our previous "Message" widget to include the ability to collapse and expand.

#### Extending the Message Widget

1. Copy and paste the following script:

```
<?
	register event @ToggleCollapseState
	@Collapsed := @Collapsed ? false
?>
<div class="message <?attr @Style ?> <?attr if @Collapsed then "collapsed" else "expanded" ?>" onclick="<?attr @ToggleCollapseState ?>">
	<span class="box ellipses">
		<span class="glyphicon glyphicon-comment"></span> 
		...
	</span>
	<span class="box text">
		<span class="glyphicon glyphicon-heart-empty"></span>
		<?= @Text ?>
	</span>
</div>
```

Notice that we are registering an event again using `register event @ToggleCollapseState`. We will create an event later that will change the view state. In the second line, you will notice the `@Collapsed` variable. This is a view state variable (also called a view state field). We assign the `@Collapsed` variable to its original value, but when it is `unknownboolean`, we assign it the value `false`. This ensures that the toggle behavior functions correctly. More on that in the event we will create shortly.

#### Creating the View State Field

To create the view state field:

1. Click the "View state" tab.
2. Click on "New field" in the toolbar.
3. Name it "Collapsed."
4. Select "Boolean" as the type.

#### Creating the Toggle Event

Now let's create the event:

1. Create the "ToggleCollapseState" event.
2. Copy and paste the following event code:

```
@Collapsed := not @Collapsed
```

Notice that if we did not assign `@Collapsed` to `false` when it was `unknownboolean`, this event would not work, because assigning a variable with `not unknownboolean` still results in `unknownboolean`.

#### Updating the Less Style

The Less style of the widget has also been updated. Replace the existing style with the following:

```less
.message {
	display: flex;

	> .box {
		border: 1px solid transparent;
		border-radius: 4px;
		cursor: pointer;
	}
	
	&.danger > .box {
		background: lighten(@brand-danger, 25%);
		border-color: lighten(@brand-danger, 10%);
		color: darken(@brand-danger, 23%);
	}

	&.info > .box {
		background: lighten(@brand-info, 25%);
		border-color: lighten(@brand-info, 10%);
		color: darken(@brand-info, 23%);
	}

	&.success > .box {
		background: lighten(@brand-success, 25%);
		border-color: lighten(@brand-success, 10%);
		color: darken(@brand-success, 23%);
	}

	&.collapsed > .box {
		padding: 5px;

		&.text {
			display: none;
		}
	}

	&.expanded > .box {
		padding: 15px;

		&.ellipses {
			display: none;
		}
	}
}
```

Now, preview the widget, and you will see that it is clickable and toggles between an expanded and a collapsed state. Notice that if you refresh the page, the view state still exists. Maintaining the view state is essential for creating a good user experience (UX).

These are just the basics of view state. For instance, you can also manage view state via JavaScript using the WEM `Runtime.viewState`, or the native `localStorage`, and `sessionStorage` APIs, which we will explore in more detail in later chapters.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.wem.io/platform/tutorials/building-widgets/basics/7-view-state.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.