Rendering a Cancel Button on the Prompt Page (Example)

This topic shows an example with actual code snippets of how a Cancel button gets rendered on the Prompt Page. It assumes you are familiar with the Block Infrastructure and have read the previous discussion on the Prompts Architecture.

The Cancel button is rendered by a TextButton view block, and is contained inside the PromptEditor view block. The TextButton block is a generic view block that renders a clickable button. The behavior of the clickable button depends on the properties that are assigned to the block.

The code for TextButton.xml (available in the WEB-INF\xml\blocks folder of the MicroStrategy Web installation) with its generic properties is shown below.

Copy

<!DOCTYPE block SYSTEM "../dtds/blockLibrary.dtd">
<!--
TextButton is a view whose GUI is a clickable button with an optional text caption. -->
 <block name="TextButton" inherits="BaseView">
  <definition>
    <!-- The text to display on the TextButton's GUI. -->
    <property name="caption" type="String" />
    <!-- Optional tooltip text. -->
    <property name="tooltip" type="String" />
    <!-- Javascript handler for responding to user clicks. -->
    <property name="onclick" type="String" />
    <!-- Optional reference to UIComponent which this TextButton may act upon when clicked. -->
    <property name="targetPath" type="String" />
  </definition>
  <assignments>
    <property name="layoutClass">mstr.layouts.TextButton</property>
    <property name="cssClass">TextButton</property>
    <property name="onclick"><![CDATA[return mstr.$obj(this.id).fireCommands()]]></property>
  </assignments>
 </block>

In case of rendering a Cancel button, the TextButton block has properties that specifically define it to be a Cancel button, such as the caption and commands associated with the action of the button. The Cancel button is defined in the PromptEditor block as a property called “cancelButton” of type Block as shown in the code snippet for PromptEditor.xml (available in the WEB-INF\xml\blocks folder of the MicroStrategy Web installation) below. This “cancelButton” property is then assigned a composite value pointing to the TextButton view block. Additional properties such as the caption, commands, and modelPath for the TextButton are also assigned.

Copy

<!DOCTYPE block SYSTEM "../dtds/blockLibrary.dtd">
<!-- PromptEditor is an Editor for displaying the questions of a prompted Report or Document. -->
 <block name="PromptEditor" inherits="Editor">
   <definition>
   ...
   <!-- Button for cancelling request for prompted Report or Document. -->
   <property name="cancelButton" type="Block" />
   ...
   <definition />
   <assignments>
     <property name="layoutClass">mstr.layouts.PromptEditor</property>
     ...
     <property name="cancelButton">
       <block name="TextButton">
         <property name="caption">{desc:mstrWeb.221|Cancel}</property>
         <property name="cmds">CancelPrompt||parent/model</property>
         <property name="modelPath">parent/model</property>
       </block>
     </property>
     ...
   <assignments />
   ...

The above code snippet from PromptEditor.xml causes a default TextButton block to be added to the block tree in memory. The modelPath property assigned for the TextButton points to the model that the parent view block (PromptEditor) is pointing to, which in this case is the ReportInstanceModel model block.

Additional properties are set in the server-side layout definition file, PromptsContainerLayout_widget.xml (available in the WEB-INF\xml\layouts\widgets folder of the MicroStrategy Web installation), as shown below. The visibility property is set by using the Boolean value that is returned by a transform method.

Copy

<mstrlayout:bSetProperty path="cancelButton/visible" method="canCancelPrompt"/>

The PromptEditor view block uses the client-side layout definition file,PromptEditor.xml (available in the WEB-INF\xml\layoutsCS\mstr\layouts folder of the MicroStrategy Web installation), as specified in the layoutClass property. The client-side layout definition file, PromptEditor.xml uses the wRender element to display the Cancel button. The code for PromptEditor.xml is shown below.

Copy

<td class="{@cssPrefix}{@cssClass}CellNavToolbar" colspan="2">
   ...
   ...
   <mstrlayout:wRender name="cancelButton">
   </mstrlayout:wRender>
</td>

The TextButton view block uses the client-side layout definition file,TextButton.xml (available in the WEB-INF\xml\layoutsCS\mstr\layouts folder of the MicroStrategy Web installation), as specified in the layoutClass property to render the HTML for the Cancel button. The code for TextButton.xml is shown below. When JavaScript renders the view of the Cancel button, it renders the HTML in the client-side layout definition file with the specific properties that have been set for the TextButton view block.

Copy

<mstrlayout:layout xmlns:mstrlayout="http://microstrategy.com/web/2008/CSLAYOUT"
    on_set_enabled="rootTag.disabled = !view.props['enabled']; rootTag.style.cursor=(rootTag.disabled) ? 'default' : 'pointer'; "
    on_set_visible="mstr.behaviors.Generic.set_css_display(rootTag, 'inline', 'none', view.props['visible'])">
  <input style="{@cssText}"
         title="{@tooltip}"
         class="{@cssPrefix}{@cssClass}"
         id="{@id}"
         value="{@caption}"
         type="button"
         onclick="{@onclick}">
  </input>
</mstrlayout:layout>