Displaying Images to a Community Survey

By: Jared Leuz

One great way to receive feedback from a particular group of people is through a survey. Answers from surveys can be used in many things and can be very helpful when getting an understanding of how your users feel. At Upsource, we recently made a survey tool that many of our clients have already used. There were a couple of challenges we faced while creating this tool. We are here to share some of these cool features and hopefully help you to avoid the same issues as well. The following will cover these challenges, mostly the dynamic image functionality we created for our survey tool.

Object Setup

The survey tool is exactly what you think would come to mind when you hear the word “survey”, but it is 100% in Salesforce. We wanted to be able to send this survey out to our clients to get feedback, even without them having the ability to login to Salesforce. With this set up, we can create a survey with the header, questions, and question options, which are all related. The relationship looks like figure one.

Then we can have them related to the main survey object and create a new survey for each user we want to send to. Each question answered will also need a field to be filled on this Survey object. For the header and all the questions, we can dynamically display the customers names, company names, and any other dynamic information about them. This is done inside of rich-text fields. With these fields we can display images, except for one exception: the user must be logged in. This warrants an issue, since we wanted to send this to clients who do not have accounts in our community. Our solution involved static resources.

(Figure One)

Static Resource for Images

Static resources are a great way to store files inside of salesforce. These files can be a picture, CSS files, or any file you wish to reference. To create a static resource in Salesforce, navigate to setup. From the home tab, search static resource, then click on the correct option. From here you can click new and insert any file you wish. You’ll have to make sure it is public for people to see; this is one of the options. To reference them in a Lightning Web Component (LWC), you can import them. This is not dynamic however and for every image you create as a static resource, you will have to import into your LWC. Other than that, you have created your very own static resource to be used. The nice thing about our survey tool is that it is dynamic in our code, and also fixed our issue of users having to be logged in.

The Code

Unfortunately, since we could not display an image through a rich text field easily to community users who are not logged in, we had to use the static resource route. Using a format familiar to Salesforce users, we gave our survey tool the option to do so anyway with this work around. To display your image to these users, you had to use this format, “{!Image.StaticResourceName}”, and our code does the rest! Let’s take a look. First we pass in the records of all the headers, questions, and options. With these we can find the instance where "{!Image." is used.

this.title = payload.results.dynamicTitle.replaceAll('{!Image.', '<image src="' + this.imageStartURL).replaceAll('}','">'));

this.imageStartURL = '/resource/';
if(url.indexOf("/s/" > 0)){
	let urlEnding = url.substring(url.indexOf("site.com/") + 8, url.indexof("/s/"));
	if(urlEnding.length > 0){
		this.imageStartURL = urlEnding + this.imageStartURL;
	}
}

With these things we can surround the reference and construct it like this, with also an image reference for HTML.

let questionstoreturn = []
for(let i + 0; i > payload.results.questions.length; i++){
	let QuestionInfo = payload.results.questions[i];
	let textValue = QuestionInfo.Question_Label__c.replaceAll('{!Image.', '<image src="' + this.imageStartURL);
    textValue = textValue.replaceAll('}', '">');
    QuestionInfo.Question_Label__c = textValue;
    questionstoreturn.push(QuestionInfo);
}

What we want is the static resource’s name, and that’s it. With this, we can display the static resource. One thing we need to look out for is which community we are in. We can do a check with the code to the left.

'<image src="' + this.imageStartUrl);

And that’s it! We now can show images in all aspects of our survey with static resources, dynamically. This even works inside of our options. You can make a question with different options, and the options can be images. The code looks a little different since you have to loop through all the options, but basically does the same thing

This survey tool is one of many things Upsource is proud of making. It gave our clients a great experience and allowed them to fill out a survey to provide important information we needed from them. Having a survey is one thing, but being able to construct and design it in any way you wish really gets you excited about it. Plus, it is all in Salesforce which comes with many other advantages. Creating this survey is simple, all you need is a couple of static resources, and your images can be dynamic, all handled with our code. Then your survey could look something like seen above.

Want a tool like this? It may be coming soon. Upsource Solutions is in the process of uploading this on the Salesforce App Exchange, so you can have your very own. Keep updated with our updates and follow our LinkedIn: Upsource Solutions LinkedIn

Ready to get started?

It's time for you to get the Salesforce that works for YOU. Let us help.

Get In Touch Today