Having Images as choices for a question
Requirement
A form containing questions must have multiple choices in image format as answers for each question.
Use Case
A brain-teaser application is built that has a Questions form, which lists all kinds of questions. A question has multiple options to choose from. For some questions the answers need to be chosen among images, so the options need to be images.
Steps to follow
Form | Form Link Name | Field Type | Field Name | Field Link Name |
Images | Images | Image | Image | Image |
Question | Question | Add Notes | Notes | plain |
Radio | What will replace the Question Mark? | What_will_replace_the_Question_Mark |
We shall now add the options and the question as images to the Images form. The question will be an Image field and the answer will be to choose from a set of Image choices. Insert those records to the form.
2. Next, let's learn how to get the uploaded images' URL to insert them to our form. We shall create a function to get the image's URL and devise a way to reconstruct them. Create a function named, getAllImages to get the image URLs.
Note: The files that you upload will be scanned for any virus. You will have to upload a different file if the uploaded file contains a virus.
3. Add the below code in the Deluge Editor:
- void getAllImages()
- {
- for each image in Images[ID != null]
- {
- info image.Image;
- <Insert Snippet 1 >
- < Insert Snippet 2 >
- }
- }
The Info Statement (Line no 5) prints the image URL as below:
<img src = " https://creatorexport.zoho.com/sharedBy/appLinkName/viewLinkName/fieldName/image/ 1625047562073_Question.png" lowqual = " https://creatorexport.zoho.com/sharedBy/appLinkName/viewLinkName/fieldName/image/1625047562073_710" medqual = " https://creatorexport.zoho.com/sharedBy/appLinkName/viewLinkName/fieldName/image/1625047562073_710" downqual =
" https://creatorexport.zoho.com/sharedBy/appLinkName/viewLinkName/fieldName/image/1625047562073_Question.png" border = "0"></img>
The bold part of the text is the name of the uploaded file stored. We need to split that from the Image field value. Other methods are explained in the Points To Note .
Snippet 1:
Let's get the suffix of the /image/ until the first double quote (") (escaped with \ ), as shown underlined above:
- //Get the uploaded image's file name
- fileName = image.Image.getSuffix("/image/").getPrefix("\"");
- info fileName;
This info statement will print the name of the uploaded image file name as 1625047562073_Question.png
Snippet 2:
Next, let's construct the image URL:
- //Construct the image URL
- img = " https://creatorexport.zoho.com/file/" + zoho.appuri + "All_Images/" + image.ID + "/Image/image-download?filepath=/" + fileName;
- info img;
The above snippet will result in: " https://creatorexport.zoho.com/file" + /scopeName/appLinkName/ + reportLinkName + image.ID + "/Image/image-download?filepath=/" + fileName ;Parameter | Value | Description |
/scopeName/appLinkName/ | zoho.appuri | This system variable gives the scope name and the application's link name as required in the URL |
reportLinkName | All_Images/ | The report link name of the Images form |
image.ID | <19 digit record ID> | Record link ID of the needed image |
fileName | 1625047562073_Question.png | Name of the image uploaded as stored |
4. In the Questions form, click the Notes field, then click the Edit HTML icon.
5. Insert the below code to display the question image:
- <div>
- <div>
- <img src = " <Paste the question URL from the function> ">
- <br>
- </div>
- <div>
- <br>
- </div>
- <style>
- //Make the question name look a bit bigger.
- .zc-What_will_replace_the_Question_Mark-group .form-label span { font-size: 1.5rem }
- </style>
- </div>
- <div>
- <br>
- </div>
6. To show the options on the load of the Question form, let us create a workflow to execute during the load of the form.
7. Click Add New Action and add the below code in the Deluge Editor . These are the image URLs that were constructed in Step 4 .
- for each image in Images[ID != <QuestionID>]
- {
- fileName = image.Image.getSuffix("downqual = \"").getSuffix("image/").getPrefix("\"");
- img = "<img src=\" https://creatorexport.zoho.com/file/" + zoho.appuri + "All_Images/" + image.ID + "/Image/image-download?filepath=/" + fileName + "\"/>";
- input.What_will_replace_the_Question_Mark:ui.add(img);
- }
This will load the options as images for the What will replace the Question Mark? field.
See how it works
Points To Note
- In Step 4, we have found the name of the file using the index of /image/. We can also use downqual and lowqual, as shown below, to find the file name:
- //Using lowqual
- image.Image.getPrefix("lowqual = \"").getSuffix("image/").getprefix("\"");
- //Using downqual
- image.Image.getSuffix("downqual = \"").getSuffix("image/").getPrefix("\"");
Related Links
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 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 Workerly Home
- Forums
- Connect With Us:
- Zoho Recruit Home
- Forums
- Connect With Us:
Centralize Knowledge. Transform Learning.
All-in-one knowledge management and training platform for your employees and customers.
New to Zoho Writer?
Create. Review. Publish.
New to Zoho CRM Plus?
Deliver unforgettable customer experiences
New to Zoho CRM Plus?
Deliver unforgettable customer experiences
New to Zoho Marketing Plus?
Everything you need to run your marketing
New to Zoho Marketing Plus?
Everything you need to run your marketing
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.
New to Zoho Survey?
Zoho Sheet Resources
Zoho Forms Resources
New to Zoho Sign?
Zoho Sign Resources
Sign, Paperless!
New to Zoho TeamInbox?
Zoho TeamInbox Resources
New to Zoho ZeptoMail?
Design. Discuss. Deliver.
New to Zoho Workerly?
New to Zoho Recruit?
New to Zoho CRM?
New to Zoho Projects?
New to Zoho Sprints?
New to Zoho Assist?
New to Bigin?
Related Articles
Creating a questionnaire with matrix choices
Requirement Create a matrix-type (horizontal layout of choices) questionnaire to get feedback. Use Case A flight booking application is used by multiple users. The users use it to book flights, after which a feedback form is sent to them to request ...Creating and managing buttons
What does this page cover Learn to insert button elements in Creator pages to configure CTA actions like in-application navigation, opening URLs, and performing automated tasks. Availability Buttons can be created in all plans of Creator. Only the ...Understanding buttons
In a nutshell Buttons are interactive CTA elements that trigger custom on-click actions like opening URLs, submitting forms, running workflows, or navigating pages. You can enable automation through functions, enhance user experience, and streamline ...Understand Radio Field
The Radio field enables your users to select a value from a predefined set of choices that are displayed as radio buttons. Note: Radio fields do not support search or auto-completion. They are best suited for presenting a small set of mutually ...How to display images dynamically on a subform row based on the lookup field selection
The images stored in a form can be retrieved and displayed dynamically within subforms. When users select a record from a lookup field in a subform row, relevant images associated with that record can appear in a designated rich text field within the ...
New to Zoho LandingPage?
Zoho LandingPage Resources