Tip 19: How to display images in Pages using ZML snippets

Tip 19: How to display images in Pages using ZML snippets



Hi folks,

We're back with another tip on how to use Zoho Markup Language (ZML) to create interactive pages in Zoho Creator. You can use ZML snippets to add various kinds of components to your pages and structure them in meaningful ways. That's not all, though—using ZML you can ensure your application is automatically compatible with all kinds of devices without any inconsistencies.

We often get questions from users about how to invoke Deluge scripts within ZML code. Here's a simple use case for adding images to your pages:

Step 1

First, we need to create a function that will help us retrieve the image stored in our application. All we need to do is fetch the RECORD ID of the record that contains the image, generate a download URL of the image, and use it in the ZML snippet.


  1. string getImage(int id)
  2. {
  3. fet = images[ID == id];
  4. var = fet.Image.getSuffix("downqual = \"").getSuffix("image/").getPrefix("\"");
  5. img = "https://creatorexport.zoho.com/file/<app_owner>/<app_name>/<report_linkname>/" + fet.ID +       "/<image_field_linkname>/image-download?filepath=/" + var;
  6. return img;
  7. }




Step 2

Next, you can go to the Page Builder, drag and drop the ZML panel, and invoke the above function (getImage) where you'll pass the ID to the function to retrieve the URL of the image.


  1. <%
  2. {
  3. x = thisapp.getImage(id); //page param with ID is "id"
  4. %>
  5. <panel>
  6. <pr height='fill' width='fill'>
  7. <pc width='100%' bgColor='#FFFFFF' padding='20px' hAlign='center' vAlign='middle'>
  8. <pr height='auto' width='auto'>
  9. <pc>
  10. <pr>
  11. <pc>
  12. <image color='#FFFFFF' bgColor='#0ABB51' width='1000px' height='1250px' imageType='weburl' value='<%=x%>' /> </pc>
  13. </pr>
  14. <pr>
  15. <pc>
  16. <text type='Text' value='120' size='8' color='#0ABB51' bold='true' marginTop='3px' textAlign='center'> </text>
  17. </pc>
  18. </pr>
  19. <pr>
  20. <pc>
  21. <text type='Text' value='Open tickets today' size='3' color='#333333' marginTop='3px' textAlign='center'> </text>
  22. </pc>
  23. </pr>
  24. </pc>
  25. </pr>
  26. </pc>
  27. </pr>
  28. </panel>
  29. <% 
  30. }
  31. %>



If you'd like to learn more about ZML, check our ZML guide that covers all the basics for you.

We hope this post was useful! If you have any questions, feel free to ask in the comments below, and we'll be happy to address them soon!

See you all next time, with even more interesting Creator tips!



      Zoho Campaigns Resources


        • Desk Community Learning Series


        • Digest


        • Functions


        • Meetups


        • Kbase


        • Resources


        • Glossary


        • Desk Marketplace


        • MVP Corner


        • Word of the Day


        • Ask the Experts


          Zoho CRM Plus Resources

            Zoho Books Resources


              Zoho Subscriptions Resources

                Zoho Projects Resources


                  Zoho Sprints Resources


                    Zoho Orchestly Resources


                      Zoho Creator Resources


                        Zoho WorkDrive Resources



                          Zoho CRM Resources

                          • CRM Community Learning Series

                            CRM Community Learning Series


                          • Tips

                            Tips

                          • Functions

                            Functions

                          • Meetups

                            Meetups

                          • Kbase

                            Kbase

                          • Resources

                            Resources

                          • Digest

                            Digest

                          • CRM Marketplace

                            CRM Marketplace

                          • MVP Corner

                            MVP Corner




                            Zoho Writer Writer

                            Get Started. Write Away!

                            Writer is a powerful online word processor, designed for collaborative work.

                              Zoho CRM コンテンツ






                                ご検討中の方