(Use case) Load content dynamically into area

Requirements

• Automation Studio 4.4
• mappView 5.4

Description

This -->sample<-- shows how to dynamically load a content into the main area with three buttons on the left side.

The main work is done by the event binding code in "InfoSample.eventbinding". On a page change the web server remembers the selected toggle button on the left side but not the content that was loaded in the main area. It will always load the default content which is typically the first content page. This can cause misalignment of the buttons on the left and the content in the main area. To fix this issue the first button is always selected when the page is loaded and all buttons are deselected.

Implementation

• Add a new page and define the layout
• Create multiple buttons to switch between the contents
• Add multiple content files and assign the default content in the layout file
• Create the event binding to switch between the contents

Event binding file

<?xml version="1.0" encoding="utf-8"?>
<EventBindingSet id="InfoSample_eventbinding" xmlns="http://www.br-automation.com/iat2014/eventbinding/v2" xmlns:types="http://www.br-automation.com/iat2015/widgetTypes/v2" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
  <Bindings>

    <!-- Make sure first button is selected when page is loaded />-->
    <EventBinding>
      <Source xsi:type="clientSystem.Event" event="ContentLoaded" />
	<EventHandler condition="contentId=&quot;contentInfoSample&quot;" >
        <Sequence>
          <Step order="0">
            <Action>
              <Target xsi:type="widgets.brease.ToggleButton.Action" contentRefId="contentInfoSample" widgetRefId="ToggleButton1">
                <Method xsi:type="widgets.brease.ToggleButton.Action.SetValue" value="1" />
              </Target>
            </Action>
          </Step>
          <Step order="1">
            <Action>
              <Target xsi:type="widgets.brease.ToggleButton.Action" contentRefId="contentInfoSample" widgetRefId="ToggleButton2">
                <Method xsi:type="widgets.brease.ToggleButton.Action.SetValue" value="0" />
              </Target>
            </Action>
          </Step>
          <Step order="2">
            <Action>
              <Target xsi:type="widgets.brease.ToggleButton.Action" contentRefId="contentInfoSample" widgetRefId="ToggleButton3">
                <Method xsi:type="widgets.brease.ToggleButton.Action.SetValue" value="0" />
              </Target>
            </Action>
          </Step>
        </Sequence>
      </EventHandler>
    </EventBinding>

    <!-- Load content depending on button 1-3 />-->
    <EventBinding id="contentInfoSample.ToggleButton1.Click">
      <Source contentRefId="contentInfoSample" widgetRefId="ToggleButton1" xsi:type="widgets.brease.ToggleButton.Event" event="Click" />
      <EventHandler>
        <Action>
          <Target xsi:type="clientSystem.Action">
            <Method xsi:type="clientSystem.Action.LoadContentInArea" contentId="contentSample1" areaId="AreaContent" pageId="pageSample"/>
          </Target>
        </Action>
      </EventHandler>
    </EventBinding>
    <EventBinding id="contentInfoSample.ToggleButton2.Click">
      <Source contentRefId="contentInfoSample" widgetRefId="ToggleButton2" xsi:type="widgets.brease.ToggleButton.Event" event="Click" />
      <EventHandler>
        <Action>
          <Target xsi:type="clientSystem.Action">
            <Method xsi:type="clientSystem.Action.LoadContentInArea" contentId="contentSample2" areaId="AreaContent" pageId="pageSample"/>
          </Target>
        </Action>
      </EventHandler>
    </EventBinding>
    <EventBinding id="contentInfoSample.ToggleButton3.Click">
      <Source contentRefId="contentInfoSample" widgetRefId="ToggleButton3" xsi:type="widgets.brease.ToggleButton.Event" event="Click" />
      <EventHandler>
        <Action>
          <Target xsi:type="clientSystem.Action">
            <Method xsi:type="clientSystem.Action.LoadContentInArea" contentId="contentSample3" areaId="AreaContent" pageId="pageSample"/>
          </Target>
        </Action>
      </EventHandler>
    </EventBinding>

  </Bindings>
</EventBindingSet>