Build custom front-end on top of Snowflake database
Tags: tutorial, database, lowcode, frontend
Published: 2022-09-05 11:15:53

<h2><b>Create customised Snowflake dashboards with DronaHQ</b></h2>
<span style="font-weight: 400;">Create custom Snowflake dashboards with [DronaHQ](https://www.dronahq.com/) and visualize your business metrics and KPIs in real time. Import your data directly from Snowflake and create your own dashboards. </span>

<span style="font-weight: 400;">In this article, we will walk through the process of building a user interface for the snowflake dashboard on DronaHQ and</span><span style="font-weight: 400;"> integrating it with the employee database created in Snowflake to make an HR analytics dashboard.</span>


<h2><b>What’s Snowflake and Snowflake dashboard?</b></h2>
<span style="font-weight: 400;">Snowflake is a cloud computing-based data warehousing company based in Bozeman, Montana. The firm offers a cloud-based data storage and analytics service, generally termed "data warehouse-as-a-service". Snowflake enables you to build data-intensive applications without an operational burden. Snowflake dashboard </span><b>combines the use of metrics and key performance indicators to produce a visually appealing chart or design giving</b><span style="font-weight: 400;"> you and your team ready access to the information you need to continually improve business performance.</span>
<h2><b>Why build a dashboard for Snowflake?</b></h2>
<span style="font-weight: 400;">Snowflake is built specifically for the cloud, and it's designed to address many of the problems found in older hardware-based data warehouses, such as limited scalability, data transformation issues, and delays or failures due to high query volumes. </span>

<span style="font-weight: 400;">Here are five ways </span><b>snowflake visualization</b><span style="font-weight: 400;"> can benefit your business.</span>

<b>Performance and speed</b>

<span style="font-weight: 400;">The elastic nature of the cloud means if you want to load data faster or run a high volume of queries, you can scale up your virtual warehouse to take advantage of extra compute resources. Afterwards, you can scale down the virtual warehouse and pay for only the time you used.</span>

<b>Storage and support for structured and semistructured data</b>

<span style="font-weight: 400;">You can combine structured and less structured data for analysis and upload it to a cloud website without the need to modify or modify a non-static relationship schema first. Snowflake automatically prepares how data is stored and processed.</span>

<b>Concurrency and accessibility</b>

<span style="font-weight: 400;">Snowflake faces financial problems with its unique multicluster architecture: Queries from virtual warehouses never address queries from another, and each warehouse can go up or down as needed. Data analysts and data scientists can find what they need, if they need it, without having to wait for other loading and processing tasks to complete.</span>

<b>Seamless data sharing</b>

<span style="font-weight: 400;">The Snowflake architecture allows data sharing between Snowflake users. It also allows organizations to share data with any data buyer easily - whether a Snowflake customer or not - with student accounts that can be created directly on the user interface. This functionality allows the provider to create and manage a customer's Snowflake account.</span>

<b>Availability and security</b>

<span style="font-weight: 400;">Snowflake is still distributed across all available platforms in which it operates - AWS or Azure - and is designed to work continuously and tolerate partial and network failures with minimal impact on customers. SOC 2 Type II is certified, and additional security levels - such as HIPAA customer PHI data support, and encryption across all network communications - are available.</span>
<h2><b>Top Use Cases for Snowflake dashboard</b></h2>
<span style="font-weight: 400;">Popular Snowflake Use cases:</span>

<strong>1.</strong> <b>RETAIL TRANSACTION ANALYSIS</b>

In the retail environment, transactional data comes in large quantities. But quantity is not the only challenge for data analysis. Data must be kept fresh and up-to-date. Even with well-designed processes, your ETL and refresh can be time and resource constrained.
How snowflake can help address these problems:

<b>Abstraction</b><span style="font-weight: 400;">: Snowflake's processing abstraction with Warehouses allows computing power to scale to meet business needs without changing infrastructure.</span>

<b>Backups</b><span style="font-weight: 400;">: Snowflake Time Travel keeps 90-day backups that are saved periodically, so you can quickly roll back to an older version of your data file (or even "freeze" the table) if something goes wrong.</span>

<strong>2.</strong> <b>MAKING HEALTHCARE ANALYTICS</b>

<span style="font-weight: 400;">Trend research can help healthcare organizations improve patient outcomes by identifying conditions, behaviours, and environmental factors. To conduct this research, organizations need vast amounts of public health data.</span>

<span style="font-weight: 400;">Snowflake features that can help address these problems:</span>

<b>Datalake reads</b><span style="font-weight: 400;">: Snowflake can read from the Amazon S3 datalake. Organising disparate data will help organize information and allows to use of the External Tables feature to display data in a structured or semi-structured way.</span>

<b>Data Display</b><span style="font-weight: 400;">: Using the Variant Columns feature, Snowflake allows you to create semi-formatted tables and load all JSON and XML data into the database, object by object. This allows you to create views that are formatted and user-friendly.</span>

<strong>3.</strong> <b>FUELING MACHINE LEARNING</b>

<span style="font-weight: 400;">It would be great to have a crystal ball that could accurately predict changes in the stock market. While we all know that a crystal ball isn't realistic, you may be able to create a smart solution that will help reduce the risk of your choice and improve your chance of being right. To create this type of solution, you should plan to use historical inventory data and business data, reports and legislative data.</span>

<span style="font-weight: 400;">Snowflake offers several features that can help address this hypothetical applications needs:</span>

<b>Multi-cluster warehouse</b><span style="font-weight: 400;">: Allocating a large multi-cluster warehouse to your Snowflake team allows you to run multiple high-load queries simultaneously with fast responses.</span>

<b>Monetization</b><span style="font-weight: 400;">: The Snowflake Data Marketplace allows you to monetize the massive and valuable data set you have collected.</span>
<h2><b>How to use DronaHQ to build a Snowflake dashboard</b></h2>
<b>Step 1: Adding the Snowflake integration on DronaHQ</b>

<img class="alignnone wp-image-18508 size-full" src="https://www.dronahq.com/wp-content/uploads/2022/07/image13-1.png" alt="" width="1916" height="947" />

&nbsp;

<span style="font-weight: 400;">First, go to the panel menu on the left and click on </span><b>“Connectors”. </b><span style="font-weight: 400;">It will show various [connectors](https://www.dronahq.com/integrations/) of different tools. On the top right corner just on the left of the profile icon, click on  </span><b>“ + Connectors”.</b>

<img class="alignnone wp-image-18529 size-full" src="https://www.dronahq.com/wp-content/uploads/2022/07/image22-1.png" alt="" width="1920" height="936" />

<span style="font-weight: 400;">After clicking that button, we will see a list of databases and tools we can [integrate with dronaHQ](https://www.dronahq.com/integrations/). Click on </span><b>Snowflake</b><span style="font-weight: 400;">.</span>

<img class="alignnone wp-image-18514 size-full" src="https://www.dronahq.com/wp-content/uploads/2022/07/image6-3.png" alt="" width="1600" height="796" />

<span style="font-weight: 400;">After clicking on that button the required information such as the Name of your connector and details regarding the account of Snowflake needs to be filled in so that it can be integrated.</span>

<span style="font-weight: 400;">Here is how you can find the account name in Snowflake.</span>

<b>Steps for finding the account name</b><span style="font-weight: 400;">:</span>
<ol>
 	<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">Go to app.snowflake.com and log in using your credentials.</span></li>
 	<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">On the Omnibox of the browser (where the URL of the page is displayed), you will find a profile menu, click on that.<img class="alignnone wp-image-18518 size-full" src="https://www.dronahq.com/wp-content/uploads/2022/07/image10-2.png" alt="" width="1898" height="1003" /></span><img class="alignnone wp-image-18527 size-full" src="https://www.dronahq.com/wp-content/uploads/2022/07/image20-1.png" alt="" width="542" height="38" /></li>
 	<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">The URL is of the form app.snowflake.com/[REGION]/[LOCATOR]. And the account name is of the form [LOCATOR].[REGION]</span></li>
</ol>
<span style="font-weight: 400;">The rest of the details are pretty straightforward and can be found easily on Snowflake.</span>

<img class="alignnone wp-image-18510 size-full" src="https://www.dronahq.com/wp-content/uploads/2022/07/image2-4.png" alt="" width="1915" height="938" />

<span style="font-weight: 400;">After filling in all the details click on </span><b>“Test Connection”</b><span style="font-weight: 400;"> and wait for the ‘Connection is successful!’ message and then </span><b>“Save”</b><span style="font-weight: 400;"> the connector.</span>

<b>Step 2: Adding the dataset to Snowflake Database</b>
<ol>
 	<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">Go to the Snowflake app and from the left panel click on </span><b>“Data”.<img class="alignnone wp-image-18515 size-full" src="https://www.dronahq.com/wp-content/uploads/2022/07/image7-3.png" alt="" width="1898" height="906" /></b></li>
 	<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">Now click on </span><b>“+ Database”</b><span style="font-weight: 400;"> in the top right corner and create a new Database.</span></li>
 	<li><span style="font-weight: 400;">After creating the database click on it and make a schema using the button on the top right.<img class="alignnone wp-image-18531 size-full" src="https://www.dronahq.com/wp-content/uploads/2022/07/image24.png" alt="" width="1907" height="926" /></span></li>
 	<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">This will create a new table where you can add the data using worksheets.</span></li>
</ol>
<b>Step 3: Building the queries in the Snowflake connector</b>

<span style="font-weight: 400;">After connecting with the snowflake connector, add queries to it through the </span><b>“+ Add Query” </b><span style="font-weight: 400;">Button.</span>

<img class="alignnone wp-image-18512 size-full" src="https://www.dronahq.com/wp-content/uploads/2022/07/image4-3.png" alt="" width="1918" height="946" />

<span style="font-weight: 400;">You can add CRUD Queries like add employee, get employee, delete employee, update employee. Here’s an example for reading the data.</span>

<img class="alignnone wp-image-18519 size-full" src="https://www.dronahq.com/wp-content/uploads/2022/07/image11-1.png" alt="" width="1917" height="933" />

<span style="font-weight: 400;">After writing the query, click on </span><b>“Test Query”</b><span style="font-weight: 400;"> and if everything works fine then </span><b>“Save”.</b>

<b>Step 4: Building the UI for Snowflake Dashboard on DronaHQ</b>

<span style="font-weight: 400;">1. Create a new Blank App on DronaHQ.</span>

<img class="alignnone wp-image-18520 size-full" src="https://www.dronahq.com/wp-content/uploads/2022/07/image12-1.png" alt="" width="1920" height="945" />

<span style="font-weight: 400;">A screen like this will appear</span>

<img class="alignnone wp-image-18521 size-full" src="https://www.dronahq.com/wp-content/uploads/2022/07/image14.png" alt="" width="1920" height="949" />

<span style="font-weight: 400;">2. Let’s start building our UI, On the left panel, click on “Control”, and a list of various [controls](https://www.dronahq.com/controls/#:~:text=The%20Summary%20control%20is%20an,hidden%20property%20in%20Freeflow%20editor.) will appear</span>

<img class="aligncenter wp-image-18523" src="https://www.dronahq.com/wp-content/uploads/2022/07/image16-1-e1659089374210.png" alt="" width="424" height="696" />

<span style="font-weight: 400;">3. Drag and drop 2 dashboard, 1 table grid and 2 chart controls to our screen. After arranging the controls, Your app will look like this:</span>

<img class="alignnone wp-image-18530 size-full" src="https://www.dronahq.com/wp-content/uploads/2022/07/image23.png" alt="" width="1920" height="944" />

<span style="font-weight: 400;">These UI controls currently display default data. Up next we will bind them to our Snowflake Database.</span>

<span style="font-weight: 400;">4. Now we will add data to all the controls. </span>

<span style="font-weight: 400;">a. Let’s start with the </span><b>table grid control (</b><a href="https://community.dronahq.com/t/table-grid-control/190"><b>Guide for Table grid control</b></a><b>)</b><span style="font-weight: 400;"> first, click on the table grid control and then on the data icon on the right panel. After that click on the </span><b>“Connectors”</b><span style="font-weight: 400;"> button, then on </span><b>“Select Connector”</b><span style="font-weight: 400;"> because we need to fetch the data from Snowflake Database.</span>

<img class="alignnone wp-image-18528 size-full" src="https://www.dronahq.com/wp-content/uploads/2022/07/image21-1.png" alt="" width="1999" height="980" />

<span style="font-weight: 400;">A list of connectors will appear, from that select </span><b>the Snowflake connector. </b><span style="font-weight: 400;">Various queries will be displayed that we made at the time of integrating the snowflake connector.</span>

<img class="alignnone wp-image-18516 size-full" src="https://www.dronahq.com/wp-content/uploads/2022/07/image8-1.png" alt="" width="1919" height="945" />

<span style="font-weight: 400;">We will select the </span><b>GetAllEmployee</b><span style="font-weight: 400;"> Query to fetch all the data from the table and in the properties of control choose the columns from which you want to show(all columns will be selected by default). This will display the data in the table grid.</span>

<span style="font-weight: 400;">You can also use a similar control called Data Store control which allows you to fetch data from the database in one API call </span><b>(</b><a href="https://community.dronahq.com/t/data-store-control/183"><b>Guide for Data Store Control</b></a><b>)</b><span style="font-weight: 400;">.</span>

<span style="font-weight: 400;">b. Now let’s see for </span><b>chart controls (</b><a href="https://community.dronahq.com/t/charts-control/907"><b>Guide for Chart control</b></a><b>)</b>

<span style="font-weight: 400;">Go to the Data tab of the chart control and click on the connectors option. Then click on the </span><b>“select connector”</b><span style="font-weight: 400;"> button.</span>

<img class="alignnone wp-image-18513 size-full" src="https://www.dronahq.com/wp-content/uploads/2022/07/image5-3.png" alt="" width="1920" height="936" />

<span style="font-weight: 400;">A list of connectors will appear, click on your snowflake connector</span>

<img class="alignnone wp-image-18525 size-full" src="https://www.dronahq.com/wp-content/uploads/2022/07/image18-1.png" alt="" width="1916" height="951" />

<span style="font-weight: 400;">It will display a list of queries which are there in our connector</span>

<img class="alignnone wp-image-18516 size-full" src="https://www.dronahq.com/wp-content/uploads/2022/07/image8-1.png" alt="" width="1919" height="945" />

<span style="font-weight: 400;">We will select </span><b>GetAllEmployee</b><span style="font-weight: 400;"> Query to fetch all the data from the database. </span>

<span style="font-weight: 400;">After clicking on GetAllEmployee query it will show environments, click on continue without changing it. </span>

<span style="font-weight: 400;">After that, you will see the screen to select which columns to bind, select the columns which you want to use in your charts and click on Test &amp; finish.</span>

<img class="alignnone wp-image-18511 size-full" src="https://www.dronahq.com/wp-content/uploads/2022/07/image3-4.png" alt="" width="1915" height="897" />

<span style="font-weight: 400;">Then go to the properties tab of chart control and search for the data section.</span>

<img class="alignnone wp-image-18517 size-full" src="https://www.dronahq.com/wp-content/uploads/2022/07/image9-2.png" alt="" width="1920" height="943" />

<span style="font-weight: 400;">Select the chart type you want to show and the columns for which you want to display data and that's it!</span>

<span style="font-weight: 400;">c. Let’s look out for our last control which is</span><b> dashboard control. (</b><a href="https://community.dronahq.com/t/dashboard-control/679"><b>Guide for Dashboard control</b></a><b>)</b>

<span style="font-weight: 400;">Dashboard control has options to add the data to 5 components, i.e. title text, header, footer, progress and text.</span>

<img class="alignnone wp-image-18522 size-full" src="https://www.dronahq.com/wp-content/uploads/2022/07/image15-1.png" alt="" width="1920" height="944" />

<span style="font-weight: 400;">Add data to the component using a connector, the process is the same as that of the chart control. You can use a custom formula with a connector by first adding the data through the connector and then in the custom formula edit the formula as shown below.</span>

<img class="alignnone wp-image-18526 size-full" src="https://www.dronahq.com/wp-content/uploads/2022/07/image19-1.png" alt="" width="1905" height="904" />

<span style="font-weight: 400;">BINDAPI </span><b>(</b><a href="https://community.dronahq.com/t/bindapi-function/779"><b>What is BINDAPI</b></a><b>)</b><span style="font-weight: 400;"> is the formula which is inherited from the connector you just need to add some functions such as count, multiply etc to make it look good.</span>

<span style="font-weight: 400;">So our </span><b>final dashboard</b><span style="font-weight: 400;"> will look somewhat like this, although it totally depends on how you’re visualizing your data.</span>

<img class="alignnone wp-image-18509 size-full" src="https://www.dronahq.com/wp-content/uploads/2022/07/image1-4.png" alt="" width="1825" height="902" />

<span style="font-weight: 400;">Congratulate yourself! Finally making a snowflake dashboard.</span>
<h2><b>Key features of Snowflake dashboards that are built with DronaHQ</b><span style="font-weight: 400;">:</span></h2>
<ol>
 	<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">Integrate database: Integrate with any database with the help of various connectors. DronaHQ supports up to 50+ ready connectors to popular databases like MongoDB, Firebase, Airtable, Influx and lots more. So while you are bringing Snowflake data to the front end, you can also join that data to information from other sources like Google Sheets, MS SQL, or Salesforces. </span><a href="https://community.dronahq.com/t/connectors-overview/402"><b>See all connectors here &gt;</b></a><span style="font-weight: 400;"> </span></li>
 	<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">Controls: Dashboard control made data interpretation convenient and easy. The table grid control provides all the CRUD operations for the Snowflake dashboard. Chart control offers various options for visualization that are easy to modify and make data visualizations easy. Not only this you can use form-based control, map control, donut chart controls and many more to make your application interactive. </span><a href="https://www.dronahq.com/controls/#:~:text=Summary,hidden%20property%20in%20Freeflow%20editor."><b>See all controls here &gt;</b></a><span style="font-weight: 400;"> </span></li>
 	<li aria-level="1">Sharing Options: Collaborators can control the permissions of who can access the app and edit the app on the basis of roles. Permissions are an important part of healthy team collaboration: with the right permissions, you can ensure that only certain people are permitted to change the information on your bases.</li>
 	<li aria-level="1">Mobile + Web App output: All the micro-apps built on DronaHQ are also available in an employee portal mobile app.</li>
 	<li aria-level="1">Unlimited end-users: All plans of DronaHQ can have unlimited users, even with the free developer plan.</li>
</ol>
&nbsp;
<h2><b>Build amazing dashboards with DronaHQ</b></h2>
<span style="font-weight: 400;">In this article, we have learned about </span><b>Snowflake Dashboard</b><span style="font-weight: 400;"> and their usage. This article also provided in-depth knowledge about building a snowflake dashboard and its key features, its components, and the steps involved in creating Snowflake Dashboards.</span>

<span style="font-weight: 400;">Now build your own dashboard on [DronaHQ](https://www.dronahq.com/) using any database or app be it a customer order dashboard, inventory dashboard, or salesforce dashboard.</span>

&nbsp;

<span style="font-weight: 400;">Thank you!</span>

&nbsp;

&nbsp;

&nbsp;

&nbsp;

&nbsp;

&nbsp;