Configure parameters for page elements

Configure page parameters for page elements

Page parameters can be configured to pass values to pages and display them inside page elements such as panels, charts, gauges, forms, reports and so on. 

Pass parameter value to the display of panel and button elements

Using ZML attribute

You can pass parameters to your page using ZML attributes. These attributes specify the parameter name and their values. The display aspect of text and button in a panel can be configured to display the required data using parameters. The below table shows the ZML attributes for panel and button elements and their usage.

ElementZML attributeZML script
Panel text/labelvalue
<panel>
  <pr height='fill' width='fill'>
    <pc width='100%' bgColor='#FFFFFF' hAlign='center' vAlign='middle'>
      <pr height='auto' width='auto'>
        <pc>
          <text type='Text' value='${param1}' size='20px'  bold='true' uppercase='true'> </text>
        </pc>
      </pr>
    </pc>
  </pr>
</panel>
Button text/labeltext
<panel>
  <pr height='fill' width='fill'>
    <pc width='100%' bgColor='#ffffff' vAlign='middle'>
      <pr height='auto' width='auto'>
        <pc vAlign='middle'>
          <button text='${param2}'' size='15px' color='#ffffff' bgColor='#0072f4' type='rounded' marginLeft='0px' marginRight='0px' marginBottom='0px' marginTop='0px' cornerRadius='60px' />
        </pc>
      </pr>
    </pc>
  </pr>
</panel>

Using parameter property

Imagine you've created an application called Order Management. In this application, you have designed a parameterized page titled Track your Order that displays the order details in a HTML snippet upon entering the tracking ID (record ID) in the respective field (inside a stateless form). Upon form submission, this ID is set as the parameter value in the page URL and also in the panel that displays the text "Details of Order No: ${parameter_name}.

  • To create the parameterized page, refer here.
  • To create the stateless form, refer here.
  • To embed the HTML snippet, refer here.

To design the panel that displays the parameter value,

  1. Drag and drop a panel onto the page. The Page properties pane will slide in.
  2. In the Display tab, select the Display data as Text and enter the value as below.

  3. The changes will be saved automatically. Close the pane at the top-right corner.

Now, you access the Track Your Order page in live mode and enter your tracking ID. Click Track to display the order details. The panel will display the entered tracking ID number and the order details are displayed based on the tracking_id parameter.

Pass parameter value to panel images

You can pass parameters to your page using ZML attributes. These attributes specify the parameter name and their values. The images displayed in a panel can be configured to display the required data using parameters. The below table shows the ZML attributes for panel images and their usage.

For the panel image element, the value attribute can have page parametes only if the type attribute has the value weburl
ElementZML  attributeZML script
Panel ImageWeb Url 
<panel>
  <pr height='fill' width='fill'>
    <pc width='100%' bgColor='#ffffff' padding='20px' vAlign='middle'>
      <pr height='auto' width='auto'>
        <pc vAlign='middle'>  
<image color='#FFFFFF' bgColor='#2D2D2D' width='80px' height='80px' type='weburl' value='https://abc.com/public/uploads/large/${param1}.png' cornerRadius='0px' action='OpenPage' target='new-window' componentLinkName='ParamPage' />
        </pc>
      </pr>
    </pc>
  </pr>
</panel>
 
<panel>
  <pr height='fill' width='fill'>
    <pc width='100%' bgColor='#ffffff' padding='20px' vAlign='middle'>
      <pr height='auto' width='auto'>
        <pc vAlign='middle'>  
<image color='#FFFFFF' bgColor='#2D2D2D' width='80px' height='80px' type='weburl' value='${param1}' cornerRadius='0px' action='OpenPage'
 target='new-window' componentLinkName='ParamPage' />  
        </pc>
      </pr>
    </pc>
  </pr>
</panel>

Panel action

You can pass parameters to your page using ZML attributes. These attributes specify the parameter name and their values. The action aspect of text, image and button in a panel can be configured to display the required data using parameters. The below table shows the ZML attributes for panel and button actions and their usage.

ElementZML attributeZML script
Open Form, Report, and PageQuery parameters 
<panel>
 <pr height='fill' width='fill'>
  <pc width='100%' bgColor='#FFFFFF' vAlign='middle'
action='OpenPage' parameters='${param1}'
  target='new-window' componentLinkName='ParamPage'>
<text type='Text' value='New employees this month' size='15px' color='#333333'/>
      </pc>
    </pr>
  </panel>
For Open Url  Url 
<panel>
    <pr>
            <pc>
              <text type='Text' value='New employees this month' size='15px' color='#333333' action='OpenURL' url='https://abc.com/technical-resources/articles/java/${pgprm}' target='new-window'> </text>
            </pc>
          </pr>
</panel>
Open Form, Report, Page, Url in popupwidth (popupWidth), height (popupHeight)
<panel>
  <pc width='50%' bgColor='transparent' vAlign='middle'>
     <pr height='auto' width='auto'>
         <pc vAlign='middle'>
  <button text='${param}' size='15px' color='#ffffff'        bgColor='#0072f4' type='flat' marginLeft='0px' marginRight='0px' marginBottom='0px' marginTop='0px' action='OpenForm' parameters='a=9' target='popup' popupWidth='${param}' popupHeight='${param}' componentLinkName='Orders_Form' />
           </pc>
       </pr>
    </pc>
</panel>

Pass parameter value to chart elements as a filter

Using ZML attribute

You can pass parameters to your page using ZML attributes. These attributes specify the parameter name and their values. The labels for x and y axes in your chart can be configured to display their respective titles using parameters. The below table shows the ZML attributes for chart element and their usage.

ElementZML attributeZML script
Chart Element 
X-axis Label (xtitle)
Y- axis label (ytitle)
<chart type='Column'
xtitle='${param1}' ytitle='${param2}'
DelugeCriteria='((Dropdown == &quot;Choice 1&quot;))'
bgColor='rgb(255, 255, 255)' theme='#0BD6B1' legendPos='center.top'
appLinkName='orders_sapp' formLinkName='Orders_Form' xfield='Dropdown' yfields='sum:Number' />

Using parameter property

Imagine you've created an application called Order Management. In this application, you have designed a page titled Dashboard and added a pie-chart that is configured to display the status of orders, along with the count of total orders on a particular day. Now, while setting the filter for Selected records, you can specify the parameter name in the place of value. Here, the parameter name is order_date

When you access the live page and specify the required order date (as per the date format in your app) in the page URL in the format ?parameter_name=value, the pie chart will display the status of all orders on that date.

Pass parameter value to gauge elements as a filter

Using ZML attributes

You can pass parameters to your page using ZML attributes. These attributes specify the parameter name and their values. You can configure the maximum and target values for your gauge using parameters. The below table shows the ZML attributes for gauge element and their usage.

Element ZML attributesZML script
Gauge Element
 
Maximum value (value attribute inside maximumval tag)
<gauge bgColor='#ffffff' color='#000000'
criteria='(((Dropdown == &quot;Choice 1&quot;)))' displayType='actual' size='20px'
filledColor='#FF7B19' nonFilledColor='#F5F5F5' needleColor='#000000' targetColor='#D8D8D8' value='orders_app.OrdersForm.ID.count'>
<maximumvalue size="15px" fontFamily="default"value="${param2}" />
</gauge>
Target (value attribute inside target tag)
<gauge bgColor='#ffffff' color='#000000'
criteria='(((Dropdown == &quot;Choice 1&quot;)))' displayType='actual' size='20px'
filledColor='#FF7B19' nonFilledColor='#F5F5F5' needleColor='#000000' targetColor='#D8D8D8' value='orders_app.OrdersForm.ID.count'>
<target size="15px" color="#7F7F7F" fontFamily="default" value="${param1}" />
</gauge>

Using parameter property

Imagine you've created an application called Order Management. In this application, you have designed a page titled Dashboard and embedded a gauge that is configured to display the sum of total amount of all orders on a particular day. Now, while setting the filter for Selected records, you can specify the parameter name in the place of value. Here, the parameter name is sales_date

When you access the live page and specify the required date (as per the date format in your app) in the page URL in the format ?parameter_name=value, the gauge will display the sum of all orders on that date.

Pass parameter value to snippets/embed

ElementZML attributeZML script
Embedsrc(url), height, width 
 <embed importedTemplate='false' url='https://<domain>/appbuilder/john/orderst/page/${param1}/edit'
width='${param2}' height='${param3}' hAlign='center' />

where,

domain will be DC specific—for example, you'll need to use appcreator.manageengine.com if your account is in ManageEngine's US data center, and appcreator.manageengine.eu if in the EU data center.

Pass parameter value to any field in a form

Using ZML attribute

You can pass parameters to your page using ZML attributes. These attributes specify the parameter name and their values. You can pass parameters to certain form specific features. The below table shows the ZML attributes for form element in page and their usage. 

Element ZML attributeZML script
FormSuccess message (zc_SuccMsg)
<form appLinkName='ordersapp' urlAppLinkName='ordersapp' heightType='auto' linkName='Orders_Form' searchString='Decimal=78678' zc_SuccMsg='${param1}' allowPublicAccess='fal />
Submit button text (zc_SubmitVal)
<form appLinkName='ordersapp' urlAppLinkName='ordersapp' heightType='auto' linkName='Orders_Form' searchString='Decimal=78678' zc_SubmitVal='${param3}' urlType='weburl' allowPublicAccess='fal />
Reset button text (zc_ResetVal)
<form appLinkName='ordersapp' urlAppLinkName='ordersapp' heightType='auto' linkName='Orders_Form' searchString='Decimal=78678' zc_SuccMsg='${param1}' zc_ResetVal='${param2}' zc_Header='false' zc_SubmitVal='${param3}' urlType='weburl' allowPublicAccess='fal />
Redirect to - Website Url (zc_NextUrl)
<form appLinkName='thisapp' urlAppLinkName='thisapp' heightType='auto' linkName='Form1' zc_SuccMsg='Done' zc_ResetVal='Reset' zc_Header='false' zc_SubmitVal='Submit' urlType='weburl' allowPublicAccess='false' zc_NextUrl='${pgprm}'/>

Using parameter property

Imagine you've created an application called Order Management. In this application, you have designed a Dashboard page, where you have embedded the Orders report. You have also created an Order Return form, where users enter their order details and their reason for returning/replacing purchased items. The Orders report has a button (action item) named Return/replace items.

Upon clicking this button, the Order Return form opens and the Order ID field and other order details are pre-filled based on the order_id parameter. The user can choose the request type, reason for return/exchange and submit the form.

Display search results based on parameter value 

Using ZML attribute

You can pass parameters to your page using ZML attributes. These attributes specify the parameter name and their values. You can configure the  search component to display the required search results using parameters. The below table shows the ZML attributes for search element and their usage.

ElementZML attributeZML script
SearchDefault value (defaultValue)
<search hAlign='center' bgtype='none' shape='flat' resultComponent='report'  linkName='OrderForm_Report' target='new-window' criteriaString='(((Dropdown == input.searchString)))' appLinkName='ordersapp' style='1' defaultValue='${param2}'>
</search>
Placeholder (placeholder)
<search hAlign='center' bgtype='none' shape='flat' resultComponent='report'  linkName='OrderForm_Report' target='new-window' criteriaString='(((Dropdown == input.searchString)))' appLinkName='ordersapp' style='1' placeholder='${param1}'
​</search>

Using parameter property

Imagine you've created an application called Employee Management. In this application, you have designed two pages:

  • The parameterized page titled Dashboard that has a search element which displays its search results in another page (target) based on the page parameter named department.

  • For the search component, you can select the parameter based on which you want to display the search results. Here, department is the page parameter.

  • The target page called Employee Profiles, in which the search results are shown in the form of a table (HTML snippet) that filters and displays employee details based on the chosen department.

 

Share this post : FacebookTwitter

Still can't find what you're looking for?

Write to us: appcreator-support@manageengine.com