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.

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

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.

<%
{
x = thisapp.getImage(id); //page param with ID is "id"
%>
<panel>
<pr height='fill' width='fill'>
<pc width='100%' bgColor='#FFFFFF' padding='20px' hAlign='center' vAlign='middle'>
<pr height='auto' width='auto'>
<pc>
<pr>
<pc>
<image color='#FFFFFF' bgColor='#0ABB51' width='1000px' height='1250px' imageType='weburl' value='<%=x%>' /> </pc>
</pr>
<pr>
<pc>
<text type='Text' value='120' size='8' color='#0ABB51' bold='true' marginTop='3px' textAlign='center'> </text>
</pc>
</pr>
<pr>
<pc>
<text type='Text' value='Open tickets today' size='3' color='#333333' marginTop='3px' textAlign='center'> </text>
</pc>
</pr>
</pc>
</pr>
</pc>
</pr>
</panel>
<%
}
%>

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!

Access your files securely from anywhere

Zoho Developer Community

New to Zoho LandingPage?

Access Zoho LandingPage

Zoho LandingPage Resources

New to Zoho Survey?

Access Zoho Survey

Latest Feature Updates

Explore our Pricing & Plans

Zoho Survey Resources

Android Mobile Surveys

Insurvey Blogs

Insight Blogs

Tips & Tricks

New to Zoho CRM Plus?

Deliver unforgettable customer experiences

ACCESS ZOHO CRM PLUS

New to Zoho CRM Plus?

Deliver unforgettable customer experiences

ACCESS ZOHO CRM PLUS

New to Zoho Marketing Plus?

Everything you need to run your marketing

ACCESS ZOHO MARKETING PLUS

New to Zoho Marketing Plus?

Everything you need to run your marketing

ACCESS ZOHO MARKETING PLUS

New to Bigin?

Signup Now

Access Bigin

Latest Feature Updates

Zoho Desk Resources

Desk Community Learning Series
Digest
Functions
Meetups
Kbase
Resources
Glossary
Desk Marketplace
MVP Corner
Word of the Day

Tout forum

France ZUGs

Zoho SalesIQ Resources

Sticky Posts
Introducing Creator Simplified: An exclusive learning series to enhance your app development skills
Hey Creators! Welcome to Zoho Creator's new learning series, Creator Simplified. In this series, we'll dive into real-world business use cases and explore how to translate your requirements into solutions in your Creator application. You can also expect
ANZ In-Person Zoho User Group Meetups: Focusing on Zoho Creator & Zoho Flow (September 2024)
Hello, Zoho Community! Calling all Zoho users in Australia! We're thrilled to announce the next series of Zoho User Group (ZUG) Meetups, continuing the success of our previous sessions. These meetups are a great opportunity to learn, network, and engage
[SESSION ENDED] Ask the Experts #07| Live Q&A: Building workflows with Blueprint in Zoho Creator |
Hello, Post the release of Zoho Creator Blueprint last month, we're happy to tell you that we'll be launching a new 'Ask the Experts' session on 16th September (Thursday) this month focussing on creating blueprints in Zoho Creator. The session will be
Zoho Creator Community Webinars | October - November 2020 [Completed]
Hello everyone, I’m happy to announce that Zoho Creator is hosting a new Community Webinar Series starting this October. This series is a learning initiative aimed at our developer community, where every session will take spotlight use cases focused on
Community Learning Webinar - Zoho Creator Blueprint & other release updates | July 29, 2021
Dear developers, This June, the Creator team unveiled a slew of updates including UI enhancements to the Detail View of reports, an new capabilities in Data Import and Connections, and most important of all, the release of Blueprint in Creator. Customize