Configure Actions to Associate to a Panel's Image | Zoho Creator Help

Associate action to panel's image

You can define an action that takes place when an image in a panel is clicked. You can link various actions to a click of an image including redirecting users to an external URL, opening a Zoho Creator component like a form, report, or a page. You can also specify a custom function to be triggered on click of the image.

To configure the action to be associated with a panel's image

  1. Click to select a panel that holds the image you want to configure an action for.
  2. Click the  Configure  option in the toolbar in the header area of the page builder. A configuration sheet slides in.
  3. Click to select the image inside the panel.
  4. From the configuration options on the right, select  Action .

  5. Choose from the options:
    • None : Use this option to remove any action associated previously.
    • Open URL : Opens a given URL in a specified target window.
      • To configure Open URL action:
        • Select  Open URL .
        • Enter a  Url  you want to open in the space provided below.
        • Select a target window from the  Open In  dropdown. 
    • Open form : Opens a specified form. You can select a form from any application in your account.
      • To configure Open form action:
        • Select  Open form .
        • Select Form  to associate to the button.

          Note:  The  Form  dropdown lists all the forms in the application you are currently working on. To select a form from another application, click the  Change App  option give in Blue, on the footer of the  Form  dropdown. Select another application and click  Done  to view all the forms in it. 

        • Enter a  Query Parameter

          Adding a query parameter to an Open Form action, loads the associated form with pre-filled values, for the fields specified in the parameter string.
          Parameter formats:

          1. Field link name=${page parameter name}
          2. Field name=value

          Example:

          You can pass multiple parameters separating each using the  ‘&’  symbol.

        • Select a target window from the  Open In  dropdown. 
    • Open report : Opens a specified report. You can select a report from any application in your account.
      • To configure Open report action:
        • Select  Open report .
        • Select Report  to associate to the button.

          Note:  The  Report  dropdown lists all the reports in the application you are currently working on. To select a report from another application, click the  Change App  option give in Blue, on the footer of the  FORM  dropdown. Select another application and click  Done  to view all the reports in it. 

        • Enter a  Query Parameter

          Adding a query parameter to an Open Report action, loads the associated report based on the criteria specified in the parameter string.
          Parameter formats:

          1. Field link name=${page parameter name}
          2. Field name=value

          URL format for setting Report criteria with Operators other than "=" (Equal) is  FieldName1_op  &  FieldName2_op  

          Refer this  table  for the list of Constants for Operators.

          Example:

          You can pass multiple parameters separating each using the  ‘&’  symbol.

        • Select a target window from the  Open In  dropdown. 
      • Open page : Opens a specified page. You can select a page from any application in your account.
        • To configure Open page action:
          • Select  Open page .
          • Select Page  to associate to the button.

            Note:  The  Page  dropdown lists all the pages in the application you are currently working on. To select a page from another application, click the  Change App  option give in Blue, on the footer of the  Page  dropdown. Select another application and click  Done  to view all the pages in it. 

          • Enter a  Query Parameter

            Adding a query parameter to an Open Page action, provide values for parameters(associated page parameter) in the page to be opened.

            Parameter formats:
            1. Field link name=${page parameter name}
            2. Field name=value

            You can pass multiple parameters separating each using the  ‘&’  symbol.

          • Select a target window from the  Open In  dropdown. 
      • Execute function : Invokes a custom function, specified in any application of your Zoho Creator account.
        • To configure Execute function action:
          • Select  Execute function .
          • Select a custom function  to associate to the button.

            Note:  The  Function  dropdown lists all the custom functions in the application you are currently working on. To select a function from another application, click the  Change App  option give in Blue, on the footer of the  Page  dropdown. Select another application and click  Done  to view all the functions in it. 

          • Select a  Parameter

            You can choose an argument of the selected function, to pass it as a page parameter.

          • Select when to execute the function workflow:  At Once  or  After Confirmation .
            • If you choose  At Once , go to the next step.
            • If you choose  After Confirmation , you must specify the confirmation message and button text for the confirm execution and cancel execution buttons.  Learn more
          • Specify a  Success message  to be displayed, on successful execution of the associated function.
        • You can make the changes and close the panel configuration sheet. The changes will be auto-saved.

Confirmation for function execution in panel images

Before executing actions such as deleting certain records, a confirmation for proceeding with it helps ensure you don't delete important records by accident. Sometimes, inexperienced users may never even realize that a record was deleted or that more than one record was accidentally deleted. In such instances, it is always safe to confirm the action request before execution. 
Here are some of the scenarios where actions can have confirmation before they're executed:

  • Deleting
  • Approving or Rejecting
  • Changing Status
  • Send emails
Note : In pages, this confirmation for actions is available only for executing a function.

Configure confirmation for function execution

  1. Edit your application
  2. Open your  page builder  and select the panel that contains the  image  you want to configure an action for.
  3. Click the  Configure  option in the toolbar in the header area of the page builder. A  configuration  pane will slide in.
  4. On the left side of the  configuration  pane, a preview of the panel will appear. 
  5. Click to select the  image  inside the panel.
  6. Click the  Action  tab and choose  Execute function  from the  Action Type  dropdown on the right.
  7. Select a  custom function  and specify the argument value.
  8. Click  After confirmation  under the  Execute the workflow  section.
  9. Specify the following:
    • Confirmation message : The message that will be displayed in the confirmation popup informing users of the action that will take place when they confirm to execute it.
    • Confirmation execution button : The button text that will be displayed to confirm the function execution.
    • Cancel execution button : The button text that will be displayed to cancel the function execution.

      Note : The default values for the  Confirmation execution  button and  Cancel execution  button will be  Yes  and  No  respectively.
  10. The changes will be saved automatically. When you access your page in live mode, the confirmation popup will prompt users before the function is executed.

ZML script for confirmation of function execution

The below script shows how to configure the confirmation popup details such as confirmation message, confirmation execution button and cancel execution button for the execute function action in the panel's image element:

<panel>
 <pr height='auto' width='auto'> 
    <pc>
         <pr>
            <pc>
     <image action='ExecuteFunction'  executeWorkflow='afterConfirmation' confirmationMsg='Are you sure you want to cancel the order?' confirmButtonText='Cancel' cancelButtonText='Back' 
parameters='string' functionName='cancelOrder' color='#FFFFFF' bgColor='#0ABB51' width='52px' height='52px' type='icon' value='media-1-ticket-76' size='32px' cornerRadius='26px' iconType='solid' />
        </pc>
      </pr>
    </pc>
  </pr>
</panel>

    Access your files securely from anywhere

      Zoho CRM Training Programs

      Learn how to use the best tools for sales force automation and better customer engagement from Zoho's implementation specialists.

      Zoho CRM Training
        Redefine the way you work
        with Zoho Workplace

          Zoho DataPrep Personalized Demo

          If you'd like a personalized walk-through of our data preparation tool, please request a demo and we'll be happy to show you how to get the best out of Zoho DataPrep.

          Zoho CRM Training

            Create, share, and deliver

            beautiful slides from anywhere.

            Get Started Now


              Zoho Sign now offers specialized one-on-one training for both administrators and developers.

              BOOK A SESSION





                          Quick Links Workflow Automation Data Collection
                          Web Forms Enterprise Begin Data Collection
                          Interactive Forms Workplace Data Collection App
                          CRM Forms Customer Service Accessible Forms
                          Digital Forms Marketing Forms for Small Business
                          HTML Forms Education Forms for Enterprise
                          Contact Forms E-commerce Forms for any business
                          Lead Generation Forms Healthcare Forms for Startups
                          Wordpress Forms Customer onboarding Order Forms for Small Business
                          No Code Forms Construction RSVP tool for holidays
                          Free Forms Travel
                          Prefill Forms Non-Profit

                          Intake Forms Legal
                          Mobile App
                          Form Designer HR
                          Mobile Forms
                          Card Forms Food Offline Forms
                          Assign Forms Photography
                          Mobile Forms Features
                          Translate Forms Real Estate Kiosk in Mobile Forms
                          Electronic Forms

                          Notification Emails for Forms Alternatives Security & Compliance
                          Holiday Forms Google Forms alternative  GDPR
                          Form to PDF Jotform alternative HIPAA Forms
                          Email Forms
                          Encrypted Forms
                          Embeddable Forms
                          Secure Forms
                          Drag and Drop form builder
                          WCAG


                                            You are currently viewing the help pages of Qntrl’s earlier version. Click here to view our latest version—Qntrl 3.0's help articles.




                                                Manage your brands on social media

                                                  Zoho Desk Resources

                                                  • Desk Community Learning Series


                                                  • Digest


                                                  • Functions


                                                  • Meetups


                                                  • Kbase


                                                  • Resources


                                                  • Glossary


                                                  • Desk Marketplace


                                                  • MVP Corner


                                                  • Word of the Day


                                                    Zoho Marketing Automation

                                                      Zoho Sheet Resources

                                                       

                                                          Zoho Forms Resources


                                                            Secure your business
                                                            communication with Zoho Mail


                                                            Mail on the move with
                                                            Zoho Mail mobile application

                                                              Stay on top of your schedule
                                                              at all times


                                                              Carry your calendar with you
                                                              Anytime, anywhere




                                                                    Zoho Sign Resources

                                                                      Sign, Paperless!

                                                                      Sign and send business documents on the go!

                                                                      Get Started Now




                                                                              Zoho TeamInbox Resources



                                                                                      Zoho DataPrep Resources



                                                                                        Zoho DataPrep Demo

                                                                                        Get a personalized demo or POC

                                                                                        REGISTER NOW


                                                                                          Design. Discuss. Deliver.

                                                                                          Create visually engaging stories with Zoho Show.

                                                                                          Get Started Now









                                                                                                              • Related Articles

                                                                                                              • Associate action to a panel

                                                                                                                You can define an action that takes place when a panel is clicked. You can link various actions to a click of a panel including redirecting users to an external URL, opening a Zoho Creator component like: a form, report, or a page. You can also ...
                                                                                                              • Configure panel element's action

                                                                                                                You can associate an action to each dashboard element to add interactivity. The different types of actions that you can associate to an element include: Open url: Redirects to the specified url Open form: Opens the specified form Open report: Opens ...
                                                                                                              • Associate Execute Function action

                                                                                                                Execute function action invokes a custom function specified in any of your Zoho Creator applications. Configure actions to associate to a panel's image Configure action confirmation for function execution ZML implementation for action confirmation To ...
                                                                                                              • Image tag

                                                                                                                <image> The <image> tag defines an image. Parent tag : <pc> Child tag : -- Attributes 1. Type The type attribute specifies the type of image to be added. Possible Values icon computer weburl Default Values weburl 2. value The value attribute ...
                                                                                                              • Associate Open URL action

                                                                                                                Associating an Open URL action to text allows you to redirect users to the specified URL when they click on the text. To associate an Open URL action to the text in a panel: Double click the panel to associate an action to the text in it or single ...
                                                                                                                Wherever you are is as good as
                                                                                                                your workplace

                                                                                                                  Resources

                                                                                                                  Videos

                                                                                                                  Watch comprehensive videos on features and other important topics that will help you master Zoho CRM.



                                                                                                                  eBooks

                                                                                                                  Download free eBooks and access a range of topics to get deeper insight on successfully using Zoho CRM.



                                                                                                                  Webinars

                                                                                                                  Sign up for our webinars and learn the Zoho CRM basics, from customization to sales force automation and more.



                                                                                                                  CRM Tips

                                                                                                                  Make the most of Zoho CRM with these useful tips.



                                                                                                                    Zoho Show Resources