Tag | ManageEngine AppCreator Help

<button>

The <button> tag defines a button.

Parent tag : <pc>

Child tag : --

Attributes

text The text attribute defines a label for the button.

Possible Values

A string

Example

Syntax	<button text='Know More'/>
Output

Note:

text attribute is optional.
text acts as a source attribute. i.e: Attributes including size, bold, italic, fontFamily and color are styling attributes for the button's label and applicable only when text is specified.

size The size attribute defines a font size for the button's label.

Possible Values

A number from 1-9.

Example

Syntax	<button text='Know More' size='5'/>
Output

Note:

size attribute is optional. Applicable only when a value is specified.

bold The bold attribute adds a bold font style to the button's label.

Possible Values

true
false

Default Value

false

Example

Syntax	<button text='Know More' bold='true'/>
Output

Note:

bold attribute is optional. Applicable only when a value is specified.

italic The italic attribute italicizes the font of the button's label.

Possible Values

true
false

Default Value

false

Example

Syntax	<button text='Know More' italic='true'/>
Output

Note:

italic attribute is optional. Applicable only when a value is specified.

fontFamily The fontFamily attribute specifies a font style for the button's label.

Possible Values

Arial
Georgia
Lato
Roboto
Roboto slab

Example

Syntax	<button text='Know More' fontFamily='Georgia'/>
Output

Note:

fontFamily attribute is optional. Applicable only when a value is specified.
If no fontFamily is specified for a value, the text acquires the fontFamily of the application theme. Each application theme uses a different fontFamily.

color The color attribute specifies a font color for the button's label.

Possible Values

A hexadecimal color value. Refer this page for hexadecimal color codes.

Example

Syntax	<button text='Know More' color='#000000'/>
Output

Note:

color attribute is optional. Applicable only when a value is specified.

bgColor The bgColor attribute specifies a background color for the button.

Possible Values

A hexadecimal color value. Refer this page for hexadecimal color codes.

Example

Syntax	<button text='Know More' bgColor='#047B33'/>
Output

Note:

bgColor attribute is optional. Applicable only when a value is specified.

btnType The btnType attribute defines a shape for the button.

Possible Values

flat
rounded

Default Value

flat

Example

Syntax	<button text='Know More' btnType='rounded'/>
Output

Note:

btnType attribute is optional.

cornerRadius The cornerRadius attribute defines a radius for the button's corners.

Possible Values

A numeric value in pixels

Example

Syntax	<button text='Know More' cornerRadius='10px'/>
Output

Note:

cornerRadius attribute is optional.

margin The margin attribute generates a specified amount of space between all foure sides of the button element and it's parent container.

Possible Values

A numeric value in pixels

Example

Syntax	<button text='Know More' margin='50px'/>
Output

Note:

margin attribute is optional

marginTop The marginTop attribute generates a specified amount of space between the top side of the button and it's parent container.

Possible Values

A numeric value in pixels

Example

Syntax	<button text='Know More' marginTop='50px'/>
Output

Note:

marginTop attribute is optional

marginRight The marginRight attribute generates a specified amount of space between the right side of the button and it's parent container.

Possible Values

A numeric value in pixels

Example

Syntax	<button text='Know More' marginRight='400px'/>
Output

Note:

marginRight attribute is optional

marginBottom The marginBottom attribute generates a specified amount of space between the bottom side of the button and it's parent container.

Possible Values

A numeric value in pixels

Example

Syntax	<button text='Know More' marginBottom='50px'/>
Output

Note:

marginBottom attribute is optional

marginLeft The marginLeft attribute generates a specified amount of space between the left side of the button and it's parent container.

Possible Values

A numeric value in pixels

Example

Syntax	<button text='Know More' marginLeft='400px'/>
Output

Note:

marginLeft attribute is optional

action The action attribute specifies the action to be triggered on click of the button.

Possible Values

Link
Form
Report
Page
Function

Example

action	Syntax
Link	<button text='button label' action='Link' url='A URL to be opened '/>*
Form	<button text='button label' action='Form' componentLinkName='linkname of the ManageEngine AppCreator form to be opened' appLinkName='linkname of the ManageEngine AppCreator application to which the form belongs' />*
Report	<button text='button label' action='Report' componentLinkName='linkname of the ManageEngine AppCreator report to be opened' appLinkName='linkname of the ManageEngine AppCreator application to which the report belongs' />*
Page	<button text='button label' action='Page' componentLinkName='linkname of the ManageEngine AppCreator page to be opened' appLinkName='linkname of the ManageEngine AppCreator application to which the page belongs' />*
Function	<button text='button label' action='Function' functionName='Name of the custom function to be triggered' />*

* Learn in detail about each of the action types in the following sections.

Note:

action attribute is optional.
The action attribute acts as a source attribute. i.e: One or more of the following attributes viz: url, componentLinkName, appLinkName, functionName, parameters, successMsg, target, popupWidth and popupHeight will be applicable only when an action is specified.

url The url attribute specifies the resource location to be opened on click of the button.

Possible Values

A url pointing to another website
A url pointing to a component within your ManageEngine AppCreator Account

Example

<button action='Link' url='https://www.zoho.com/creator/'>

Note:

url attribute is optional.
It is applicable only when <action='Link'>

componentLinkName The componentLinkName attribute specifies the link name of the ManageEngine AppCreator component to be opened on click of the button.

Possible Values

Linkname of the ManageEngine AppCreator Application component to be opened.

Example

action	Syntax
Form	<button action='Form' componentLinkName='User_Details'/>
Report	<button action='Report' componentLinkName='User_Details_Report'/
Page	<button action='Page' componentLinkName='User_Dashboard'/>

Note:

componentLinkName attribute is optional.
It is applicable only when <action='Form'/'Report'/'Page'>

appLinkName The appLinkName attribute specifies the name of the ManageEngine AppCreator application to which the associated component belongs.

Possible Values

Linkname of the ManageEngine AppCreator Application to be opened.

Example

action	Syntax
Form	<button action='Form' componentLinkName='User_Details' appLinkName='Resource_management'/>
Report	<button action='Report' componentLinkName='User_Details_Report' appLinkName='Resource_management'/>
Page	<button action='Page' componentLinkName='User_Dashboard' appLinkName='Resource_management'/>

Note:

appLinkName attribute is optional. You do not need to specify appLinkName if the component you are associating to the action, belongs to the same application you are currently in.
It is applicable only when <action='Form'/'Report'/'Page'/'Function'>

functionName The functionName attribute specifies the name of the custom function to be triggered on click of the button.

Possible Values

A custom function defined in any of your ManageEngine AppCreator Applications. To get the list of custom functions in your application: Go to Settings -> Extensions -> Custom Functions

Example

<button action='Function' functionName='send_email'/>

Note:

The functionName can belong to a default namespace or a custom namespace.
If the function belongs to a custom namespace : <functionName='namespace_name.function_name'>
functionName attribute is optional.
It is applicable only when <action='Function'> and a function name must be specified.

parameters The parameters attribute specifies parameter to be associated to an action.

Possible Values

When <action='Form' / 'Report' / 'Page'>, parameters refers to the query string that will be appended to the corresponding component's permalink.
When <action='Function'>, parameters refers to an argument of the selected custom function.

Example

action	Syntax
Form	<button text='button label' action='Form' componentLinkName='User_Details' appLinkName='Resource_management' parameters='App_name=${name}'/> OR <button text='button label' action='Form' componentLinkName='User_Details' appLinkName='Resource_management' parameters='App_name=Zoho Creator'/>
Report	<button text='button label' action='Report' componentLinkName='User_Details' appLinkName='Resource_management' parameters='App_name=${name}' /> or <button text='button label' action='Form' componentLinkName='User_Details' appLinkName='Resource_management' parameters='User_Name='Rob'/>
Page	<button text='button label' action='Page' componentLinkName='linkname of the ManageEngine AppCreator page to be opened' appLinkName='linkname of the ManageEngine AppCreator application to which the page belongs' parameters='App_name=${name}' />*

action

Syntax

Form

Report

Page

<button text='button label' action='Page' componentLinkName='linkname of the ManageEngine AppCreator page to be opened' appLinkName='linkname of the ManageEngine AppCreator application to which the page belongs' parameters='App_name=${name}' />*

Note:

parameter attribute is optional.
It is applicable only when <action='Form'/'Report'/'Page'/'Function'>
parameters can either be a static value like: Name='Rob' or a page parameter.
Page parameter must be specified as : App_name=${name}, where name is the page parameter.

successMsg The successMsg attribute specifies the message to be displayed on successful execution of the associated function.

Possible Values

A string

Example

<button action='Function' functionName='send_email' successMsg='Sent Successfully!'/>

Note:

successMsg attribute is optional.
It is applicable only when <action='Function'>

executeWorkflow The executeWorkflow attribute allows you to specify that an action be executed after confirmation of the same. The confirmationMsg attribute specifies the message to be displayed before execution to confirm the action request.

Possible Values

A string

Example

<button action='Function' functionName='send_email' executeWorkflow='afterConfirmation' confirmationMsg='Are you sure you want to execute the action?!' confirmButtonText='Yes' cancelButtonText='No/>

Note:

confirmationMsg attribute is optional.
It is applicable only when <action='Function'>

target The target attribute specifies the location where the linked action will open on click of the button.

Possible Values

new-window
same-window
popup

Default Value

new-window

Note:

It is applicable only when <action='Link'/'Form'/'Report'/'Page'>

popupWidth The popupWidth attribute specifies a width for the pop-up window where the link will be opened.

Possible Values

A numeric value in percentage or pixels

popupHeight The popupHeight attribute specifies a height for the pop-up window where the link will be opened.

Possible Values

A numeric value in percentage or pixels

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

Write to us: appcreator-support@manageengine.com