Understanding the toolbar in Geocortex Web [Geocortex Tech Tip]

Showing an image in a form after a file picker [Geocortex Tech Tip]

Ryan Cooney
Ryan Cooney
Product Owner
November 14, 2019

Showing an image in a form after a file picker [Geocortex Tech Tip]

Showing an image in a form after a file picker (base64)

Enhancing the user experience was one of the fundamental goals when creating Geocortex Workflow technology, and we wanted to spend some time today to show you how you can enrich that experience using images, specifically within the file picker form element.

In this Geocortex Tech Tip, we’ll show you how to create a simple workflow that displays bas64 encoded images to your users have within a form.

Watch on YouTube.

Video Transcript

“Hi, thanks for joining me. My name is Ryan. Today I’d like to show you how you can create a great user experience when a user selects an image using the file picker form element in Geocortex Workflow. Let’s have a look!

Let’s start with a display form activity and inside that display form, we’re going to put the two components we need – first there’s going to be a file picker that the user will use to select the file they are after, and then we’re going to need an image control that’s going to receive that file afterwards.

A couple of things we’re going to want to do is we are going to make this image element non-visible because when we first load there is no image selected, so we don’t want to be showing this yet. We will make it hidden and also, it’s a good idea to put a width on this because we don’t know what size is going to be uploaded in. We don’t want it to fill the whole screen or anything. We’ll give it a width that’s going to fit, in my case that is within the left panel region.

Next thing we’re going to do is tell the file picker to only allow one file. I’ve got one file picker and one image control to accept the content of that. So, it makes sense to restrict this to just one file.

Now the next step was going to do is actually take the file content that selected in the file picker and apply it to this image element, and the way that were going to do that is through the change event of the file picker. So, this event fires every time the user selects the file or clears their selection.

In this workflow here, is where we are going to be able to take the content of that file and give it to the image control. We’re going to do that by taking advantage of something called a data URL. What a data URL is, it’s kind of like a normal URL to a resource or HTTP except it’s specifying that we have the data in line. There’s a certain syntax here, where we have declaring its data, declare the mime type, the content type and then we’re actually going to pass it in the actual raw bite data, and we’re going to do in a way that’s base64 encoded. Here’s an example of what base64 encoded data URL is for an image. So, data followed by the content type, followed by base64 decorator and then followed by the actual base64 encoded content. That’s what we’re going to take advantage of.

What we can do is take advantage of some activities like, “Get Base64 String From File”. That’s going to be useful for us. Before we do that, we should put in an “If” condition, because this file picker might have no file selected, because the user could have cleared it. We just need to account for that. We’re just going to make sure that the file picker has a value. As long as the file picker value is not “undefined,” then we can go this way and go and get the content.

And here when we’re going to get the content, we’re going to drill right into the file picker’s value, which in this case, has a collection of files and since we know it’s got a value and we know that the maximum number of files was one, we can just go and get file zero from that list. We know that’s going to be a safe thing to do.

So, that’s going to produce a result string that will have our have content. Now, we can supply that content to our image form item. There’s an activity called “Set Form Element Property”, and basically we want to set the value property of the image element.

Here I’m going to select the image element and it set its value property, and the value property that I’m going to set it to (this is kind of interesting part) is to be a data URL and I kind of need to construct this out of the various elements that make up a data URL. It starts with data, then it’s going to be followed by the content type of that file.

If you remember, we can drill into a list of files, get file zero. This actually has a type of property that is going to be an image / jpg – whatever that file type was. Then we’re going to declare that it is base64 encoded content, followed by a comma, and finally followed by the base64 encoding content that we get from our getbase64 activity. That’s going to construct the right data URI for us.

The image control is now ready to go except it is still hidden. If we do a, “Show Form Element”. The element we want to show is the image control, that’s going to make it work.

Now, we should also fill out the other side of this. If there are zero files, we could do the exact same thing here. I’m going to copy that set form element property, but rather than setting it equal to this, I’m just going to set it equal to “undefined”. We’re going to clear out the URL and instead of showing the form element, I’m going to hide the form element. Let’s try it out!

I’ve got my sandbox application before I run this, I add my file picker, select an image and there it shows up! You can see if we were to inspect this, it’s actually a data URI that is being used right there. If we’ve done everything correctly, we should be able to clear that, and it removes that.

That’s how you can do it. You can have a user select a file with a file picker and through the change event of that file picker, we can update an image control and use a base64 encoded data URI to get image content right back into that and make it a really rich user experience here.

Thanks for watching!”

Not a Geocortex user and want to build custom widgets (without coding) to streamline complex business processes? Click the button below to learn more about using images with Geocortex Workflow technology, or to schedule a personal demonstration.

Discover Geocortex Workflow


Categories:
Archive
Open: 2019
2019
December 5, 2019

Four key benefits to adopting a mobile GIS solution

November 29, 2019

Using Geocortex Mobile to collect survey data [Geocortex Tech Tip]

November 27, 2019

Dive into Geocortex Analytics [Webinar]

November 22, 2019

How to input parameters on prints [Geocortex Tech Tip]

November 15, 2019

How to include feature attachments in reports [Geocortex Tech Tip]

November 14, 2019

Understanding application management in the Designer [Geocortex Tech Tip]

November 14, 2019

How to reference symbology from web maps [Geocortex Tech Tip]

November 14, 2019

How Geocortex Mobile can integrate with other apps [Geocortex Tech Tip]

November 14, 2019

Implementing Arcade Expressions in Geocortex Essentials [Geocortex Tech Tip]

November 14, 2019

Customer Spotlight: Geocortex Mobile

November 14, 2019

How to Format Your Reports [Geocortex Tech Tip]

November 14, 2019

Showing an image in a form after a file picker [Geocortex Tech Tip]

November 14, 2019

Richard Wiegmann Joins VertiGIS as President and CEO

September 27, 2019

Understanding the toolbar in Geocortex Web [Geocortex Tech Tip]

September 20, 2019

Refining Results in Geocortex Web [Geocortex Tech Tip]

September 19, 2019

Charting data using Geocortex Reporting: Honing your charting skills

September 13, 2019

Utilizing the flexibility of layout in Geocortex Web [Geocortex Tech Tip]

September 6, 2019

Creating Geocortex Web applications that move seamlessly between 2D and 3D [Geocortex Tech Tip]

August 28, 2019

Geocortex adds support for Arcade scripting and ArcGIS Online smart mapping

August 23, 2019

How to create sections and groups for your reports [Geocortex Tech Tip]

August 16, 2019

Displaying SQL Server Data in Geocortex Workflow [Geocortex Tech Tip]

August 14, 2019

Customer Spotlight: Geocortex Essentials

August 8, 2019

City of Austin: Spreading floodplain awareness with Geocortex

August 1, 2019

Geocortex Essentials 4.12: Improved integration with ArcGIS® Online

July 25, 2019

Introduction to Geocortex Printing: Learn to build stunning print templates

July 17, 2019

Updates to the Geocortex Product Life Cycle

July 8, 2019

Extending Web AppBuilder for ArcGIS® with Geocortex Essentials [Webinar]

July 4, 2019

City of Bellingham: Using Geocortex to take the stress out of water shut-off

June 27, 2019

Geocortex at the 2019 Esri User Conference

June 14, 2019

Customer Spotlight: Geocortex Workflow

May 17, 2019

Important Notice - Outage Issues & New Support Cases

May 17, 2019

How to build a summary report with aggregations of feature data [Geocortex Tech Tip]

May 16, 2019

Technology Q&A: Geocortex Mobile

May 10, 2019

How to create print templates for Web AppBuilder for ArcGIS®[Geocortex Tech Tip]

May 8, 2019

Dive into Geocortex Printing [Webinar]

May 3, 2019

Using Geocortex Workflow and Geocortex Reporting to produce a multi-layer report [Geocortex Tech Tip]

May 1, 2019

Market-Leading GIS Software and Services Companies Join to Form VertiGIS

May 1, 2019

Introducing VertiGIS

April 18, 2019

Integrating Workflows into Geocortex Mobile [Geocortex Tech Tip]

April 17, 2019

Customer Spotlight: Geocortex Reporting

April 12, 2019

Using Geocortex Go to preview app configurations [Geocortex Tech Tip]

April 10, 2019

How to Address Complex Form Navigation Using Geocortex Workflow

April 5, 2019

Building native, offline IOS, Android and Windows apps with Geocortex Mobile Viewer [Geocortex Tech Tip]

April 3, 2019

Streamlining mobile operations with Geocortex Mobile Viewer [Webinar]

March 29, 2019

A better way to run geoprocessing tasks in Web AppBuilder for ArcGIS [Geocortex Tech Tip]

March 28, 2019

Extend the reach and capabilities of your applications with integrations [eBook]

March 22, 2019

Displaying data from SQL Database when you select features [Geocortex Tech Tip]

March 20, 2019

How Geocortex users are enriching the communities they serve

March 15, 2019

How to Configure a Geocortex Essentials layer report with Geocortex Reporting 5 [Geocortex Tech Tip]

March 14, 2019

Region of Waterloo: How GIS & Geocortex technology helped meet local Source Protection Plan requirements

March 6, 2019

Integrating Business Intelligence and Data Sources with Geocortex Essentials [Webinar]

March 1, 2019

How to quickly add attachments to new features when editing [Geocortex Tech Tip]

February 22, 2019

Generating a report with sub reports from external data sources [Geocortex Tech Tip]

February 20, 2019

Geocortex Essentials 4.11: Saving Time & Increasing Efficiency

February 15, 2019

Accessing Samples and Building your First Workflow [Geocortex Tech Tip]

February 12, 2019

Open Beta of Geocortex Printing 5 Has Begun

February 8, 2019

Different Ways of Creating Selections of Features in Geocortex Viewer for HTML 5 [Geocortex Tech Tip]

February 6, 2019

4 Best Practices to Follow When Using Geocortex Workflow 5

February 1, 2019

Creating a Report that Displays a Screenshot of the Map [Geocortex Tech Tip]

January 28, 2019

Diving Into Geocortex Reporting 5 [Geocortex Tech Tip]

January 24, 2019

How Geocortex is Advancing Water Management Solutions

January 16, 2019

Creating Custom User Experiences with Geocortex Workflow 5 [Webinar]

January 11, 2019

Showing the search results using the item picker in Geocortex Workflow 5 [Geocortex Tech Tip]

January 9, 2019

City of Troy: Using GIS and asset management technologies to manage legislative requirements

January 4, 2019

Using scripting to put attachments in reports in Geocortex Reporting 5 [Geocortex Tech Tip]

Open: 2018
2018
December 21, 2018

Integrating Pictometry, Bing and other 3rd party maps within your Geocortex applications

December 19, 2018

Recapping the Texas Geocortex Regional User Group

December 14, 2018

How to use Geocortex Workflow 5 to populate the Attribute Table in Web AppBuilder for ArcGIS [Geocortex Tech Tip]

December 12, 2018

Finding yourself: Using geolocation in mobile and web applications [Webinar]

December 7, 2018

Enabling real-time user-to-user map collaboration within Geocortex Essentials

December 5, 2018

Reflecting on 2018

November 30, 2018

Creating mailing labels with reports with Geocortex Reporting 5 [Geocortex Tech Tip]

November 29, 2018

Alberta Energy Regulator: Supporting safe and responsible energy resource operations

November 26, 2018

Important update for ArcGIS and Transport Layer Security (TLS) Protocol Support!

November 23, 2018

Using fine-grained security to control access to layers, features, attributes and application functionality [Geocortex Tech Tip]

November 21, 2018

Enhancing Web AppBuilder for ArcGIS® with Geocortex Reporting [Webinar]

November 16, 2018

Using Geocortex Workflow 5 to automatically display a form for editing layer attributes [Geocortex Tech Tip]

November 15, 2018

Geocortex Achieves Esri’s “Release Ready Specialty” Designation

November 14, 2018

Celebrating GIS Day with York Regional Police: How GIS Data Has Mitigated Risk & Increased Efficiency in Crime Prevention

November 9, 2018

How to access a SQL database from a workflow using Geocortex Workflow 5 [Geocortex Tech Tip]

November 2, 2018

How to send an email from a workflow using Geocortex Workflow 5 [Geocortex Tech Tip]

October 26, 2018

How to add and configure charts inside reports with Geocortex Reporting 5 [Geocortex Tech Tip]

October 24, 2018

Geocortex Water Webinar Series

October 19, 2018

Integrating Geocortex Essentials with ArcGIS Online and ArcGIS Enterprise portal [Geocortex Tech Tip]

October 17, 2018

Cross-Platform Development with Xamarin [Webinar]

October 12, 2018

City of Fort Collins: Dynamic flood maps for public awareness, and flood insurance rate saving

October 2, 2018

Technology Q&A: Geocortex Workflow 5 “Behind the Firewall”

June 27, 2018

Geocortex Essentials 4.10 is here!

June 12, 2018

Geocortex and the GDPR

June 6, 2018

Geocortex at the 2018 Esri User Conference

May 15, 2018

Technology Q&A: The evolution of Geocortex and Web AppBuilder for ArcGIS

April 25, 2018

How to manage data collected from Geocortex Workflow 5 forms [Geocortex Tech Tip]

April 18, 2018

Delivering accessible mapping applications for everyone [Geocortex Tech Tip]

April 11, 2018

How to search for data in a non-spatial database [Geocortex Tech Tip]

April 5, 2018

Configuring Geocortex Analytics to monitor a new Portal for ArcGIS instance [Geocortex Tech Tip]

March 27, 2018

Getting started with forms in Geocortex Workflow 5 [Geocortex Tech Tip]

March 21, 2018

Using Geocortex Workflow with Web AppBuilder for ArcGIS [Geocortex Tech Tip]

March 15, 2018

Understanding tool usage in your GIS applications [Geocortex Tech Tip]

March 7, 2018

Running Geocortex Essentials workflows from an identify operation [Geocortex Tech Tip]

March 2, 2018

GIS Health Assessment: A new way to think about your system

February 28, 2018

Using the in-app help system in Geocortex Workflow 5 [Geocortex Tech Tip]

February 21, 2018

How to configure a personalized dashboard in Geocortex Analytics [Geocortex Tech Tip]

January 25, 2018

GIS is shifting to SaaS, and it’s a win for everyone


Categories

Popular Tags
Accessibility Active Operating Picture ArcGIS ArcGIS Online customer spotlight Customer Story Data Models Energy Esri Geocortex Geocortex 5-Series Geocortex Analytics Geocortex Essentials geocortex integrations geocortex mobile Geocortex Mobile Viewer geocortex printing Geocortex Printing 5 Geocortex Reporting Geocortex Reporting 5 geocortex tech tip Geocortex Tech Tips geocortex training Geocortex Viewer for HTML5 geocortex web Geocortex Web Viewer Geocortex Workflow Geocortex Workflow 5 GIS GIS Day GIS Health Integrations mobile gis Oil & Gas Pipelines Portal for ArcGIS SaaS Tech Tip Tech Tips Transportation vertigis Water Industry Web AppBuilder Web GIS Xamarin

Contributors