<?xml version="1.0" encoding="UTF-8"?><rss xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:atom="http://www.w3.org/2005/Atom" version="2.0" xmlns:media="http://search.yahoo.com/mrss/"><channel><title><![CDATA[Retool Blog]]></title><description><![CDATA[Retool's blog: all about internal tools, data, and engineering.]]></description><link>https://retool.com/blog/</link><image><url>https://retool.com/blog/favicon.png</url><title>Retool Blog</title><link>https://retool.com/blog/</link></image><generator>Ghost 4.6</generator><lastBuildDate>Wed, 29 Sep 2021 08:30:32 GMT</lastBuildDate><atom:link href="https://retool.com/blog/rss/" rel="self" type="application/rss+xml"/><ttl>60</ttl><item><title><![CDATA[When BI tools fall short: why we built our own marketing dashboards]]></title><description><![CDATA[If you’ve ever had to wrangle a maze of marketing, sales, and BI tools—just to end up plugging it all into a spreadsheet—this article is for you. We’ll go over the three core dashboards and explain why we treat our analytics as a product rather than a static dashboard. ]]></description><link>https://retool.com/blog/when-bi-tools-fall-short-our-own-marketing-dashboards/</link><guid isPermaLink="false">614b851317ec827590fecd14</guid><dc:creator><![CDATA[Ivana Ivanovic]]></dc:creator><pubDate>Thu, 23 Sep 2021 16:21:34 GMT</pubDate><media:content url="https://retool.com/blog/content/images/2021/09/banner_blogpost_08-20-26_2--6-.png" medium="image"/><content:encoded><![CDATA[<img src="https://retool.com/blog/content/images/2021/09/banner_blogpost_08-20-26_2--6-.png" alt="When BI tools fall short: why we built our own marketing dashboards"><p>If you&#x2019;ve ever had to wrangle a maze of marketing, sales, and BI tools&#x2014;just to end up plugging it all into a spreadsheet&#x2014;this article is for you. <br><br>We&#x2019;ll go over the three core dashboards we built for all marketing and full-funnel metrics, why we chose to build our own, and how our marketing lead Kevin White (formerly of Segment, HackerOne and MemSQL) uses them.</p><h2 id="why-our-own-dashboards-vs-existing-tools">Why our own dashboards vs. existing tools</h2><p>With a background in marketing ops and driving demand, Kevin has had a front row view of how marketing tech stacks and data pipelines have evolved and expanded over the last decade.<br><br>What&apos;s most surprising? Most companies still struggle with a simple problem: <strong>aggregating, viewing, and acting on different data sources.</strong><br><br>While the problem in the past may have been that the tools were not powerful enough or the data you needed didn&#x2019;t exist, today we face a different issue: there are too many tools at your discretion. Your data sits in an endless assortment of ad platforms, marketing automation platforms, CRMs, payment processors, and data warehouses that are all good at a specific job&#x2014;but leave you struggling to get a cohesive, comprehensive picture from 10 open tabs. </p><p>Retool solves this nicely, as we can pull in data from data warehouses, Stripe, Salesforce, Google Ads,Segment&#x2014;really anything with an API&#x2014;to build an interface custom to your business. And, much like great tools in the vein of Mixpanel or Amplitude, we make it pretty easy for everyone to have canonical company dashboards and replicate/customize them for their own needs.<br><br><em>What is unique about Retool, then?</em> We treat analytics like a product: rather than a static view/dashboard, our marketing team has a veritable app to play with.<br><br>For example, for a product launch, we can use Retool like a BI tool to drill into the metrics&#x2014;but also use it as a sign-up tracker, a goal-oriented dashboard, and a workflow manager (e.g., &quot;when metric X hits Y, do this&quot;). <br><br>This also means we don&#x2019;t have to limit ourselves to the structures defined by a BI tool. If anyone on the team wants to add a button, a workflow, or a deep-dive modal, Retool&#x2019;s ability to say &quot;Yes!&quot; to deep and fast customization is what makes a difference when it comes to acting on the data. <br><br>Last but not the least: at Retool, we like drinking our own champagne. The more we use our own product, the better it gets, the more confidently we can speak about it, and the better we can market it. </p><h2 id="our-main-marketing-dashboard-core-metrics-and-visualizations">Our main marketing dashboard: core metrics and visualizations</h2><p>If you are wondering what a marketing dashboard should include, our main Retool marketing dashboard is a good start. Kevin&#x2019;s goal was to have both a bird&#x2019;s eye view of key marketing data so he can easily spot trends, and the ability to drill down into different data vectors over different time periods. </p><p>Kevin looks at this dash daily: it contains our core metrics, including those we use for reporting to the company and the board.<br></p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://lh5.googleusercontent.com/-yInlNyKlu4_5pyWZDAZ9DSMnO73hEGGMUZDW1DdPRM8MPLCHdWFr-TQcVZss0FLu3uRTRdGOTy0LjRtuNnF2bKEbMstbeYZ9QV8JAOyMgOB8BbKSzhIxBDnkbtLgVrLf5lgAJLD=s0" class="kg-image" alt="When BI tools fall short: why we built our own marketing dashboards" loading="lazy"><figcaption>Retool&apos;s main marketing dashboard at a glance</figcaption></figure><p>The dashboard essentially looks at different parts of the marketing funnel: leads, MQLs, and sign-ups. </p><p>Let&#x2019;s zero in a bit.</p><p>The top two charts look at leads and MQLs by channel. You can set a date range, and cohort the data by different time period types (date, month, year). The charts are interactive: you can hover over any bar area to see actual numbers and your selected date range, and drill into any channel by checking the menu box on the right.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://retool.com/blog/content/images/2021/09/08.png" class="kg-image" alt="When BI tools fall short: why we built our own marketing dashboards" loading="lazy" width="1750" height="989" srcset="https://retool.com/blog/content/images/size/w600/2021/09/08.png 600w, https://retool.com/blog/content/images/size/w1000/2021/09/08.png 1000w, https://retool.com/blog/content/images/size/w1600/2021/09/08.png 1600w, https://retool.com/blog/content/images/2021/09/08.png 1750w" sizes="(min-width: 720px) 720px"><figcaption>Monthly leads by channel</figcaption></figure><p><br>Having leads and MQLs chart side-by-side allows for a quick glance into conversion rate trends, both by channel and by time period: &#xA0;</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://retool.com/blog/content/images/2021/09/06.png" class="kg-image" alt="When BI tools fall short: why we built our own marketing dashboards" loading="lazy" width="2000" height="520" srcset="https://retool.com/blog/content/images/size/w600/2021/09/06.png 600w, https://retool.com/blog/content/images/size/w1000/2021/09/06.png 1000w, https://retool.com/blog/content/images/size/w1600/2021/09/06.png 1600w, https://retool.com/blog/content/images/size/w2400/2021/09/06.png 2400w" sizes="(min-width: 720px) 720px"><figcaption>Leads and MQLs side by side: easily spot conversion trends</figcaption></figure><p>The next two charts provide a look into:</p><ol><li>The composition of paid vs. organic leads, and</li><li>Traffic sessions by source type</li></ol><p>This allows us to not only understand key metrics at a glance, but also correlate traffic (chart on the right) with leads (chart on the left). </p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://retool.com/blog/content/images/2021/09/02.png" class="kg-image" alt="When BI tools fall short: why we built our own marketing dashboards" loading="lazy" width="2000" height="552" srcset="https://retool.com/blog/content/images/size/w600/2021/09/02.png 600w, https://retool.com/blog/content/images/size/w1000/2021/09/02.png 1000w, https://retool.com/blog/content/images/size/w1600/2021/09/02.png 1600w, https://retool.com/blog/content/images/size/w2400/2021/09/02.png 2400w" sizes="(min-width: 720px) 720px"><figcaption>Weekly leads and traffic at a glance</figcaption></figure><h2 id="saas-marketing-funnel-from-landing-page-to-sign-up%E2%80%94and-cohorts-too">SaaS marketing funnel: from landing page to sign-up&#x2014;and cohorts too <br></h2><p>While charts are useful for quick observation of trends, the three tables on our main marketing dashboard are focused on tracking the full marketing funnel, from visit to sign-up. In the first table, Kevin can see how weekly cohorts are converting: </p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://retool.com/blog/content/images/2021/09/03-1.png" class="kg-image" alt="When BI tools fall short: why we built our own marketing dashboards" loading="lazy" width="2000" height="548" srcset="https://retool.com/blog/content/images/size/w600/2021/09/03-1.png 600w, https://retool.com/blog/content/images/size/w1000/2021/09/03-1.png 1000w, https://retool.com/blog/content/images/size/w1600/2021/09/03-1.png 1600w, https://retool.com/blog/content/images/size/w2400/2021/09/03-1.png 2400w" sizes="(min-width: 720px) 720px"><figcaption>Marketing funnel by week: how weekly cohorts are converting</figcaption></figure><p>Next come two tables for analyzing the marketing funnel by landing page and referrer channel. The beautiful thing about these charts? You can drill down into each individual row. For example, seeing how each use case page is performing&#x2014;from traffic to sign-up page visits, to converting from sign-up page to actual signup&#x2014;is super useful, and not just for the marketing team. </p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://retool.com/blog/content/images/2021/09/01-1.png" class="kg-image" alt="When BI tools fall short: why we built our own marketing dashboards" loading="lazy" width="2000" height="752" srcset="https://retool.com/blog/content/images/size/w600/2021/09/01-1.png 600w, https://retool.com/blog/content/images/size/w1000/2021/09/01-1.png 1000w, https://retool.com/blog/content/images/size/w1600/2021/09/01-1.png 1600w, https://retool.com/blog/content/images/size/w2400/2021/09/01-1.png 2400w" sizes="(min-width: 720px) 720px"><figcaption>Marketing funnel by landing page, with every funnel metric</figcaption></figure><h2 id="supercharging-google-search-console">Supercharging Google Search Console </h2><p>Google Search Console is a powerful tool, but it is somewhat lacking in data visualization. Jane Kelly, our head of growth, put together a dashboard that augments Google Search Console with some neat new views and visualizations. </p><p>The top part of the dashboard is a customizable chart for comparing different datasets: in our case, Kevin uses Dataset 1 to represent branded search (light blue), and Dataset 2 the non-branded (dark blue). Again, you can aggregate data by any time period. The chart also includes drop-down filters for page, country, and device. </p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://retool.com/blog/content/images/2021/09/04--1-.png" class="kg-image" alt="When BI tools fall short: why we built our own marketing dashboards" loading="lazy" width="2000" height="755" srcset="https://retool.com/blog/content/images/size/w600/2021/09/04--1-.png 600w, https://retool.com/blog/content/images/size/w1000/2021/09/04--1-.png 1000w, https://retool.com/blog/content/images/size/w1600/2021/09/04--1-.png 1600w, https://retool.com/blog/content/images/size/w2400/2021/09/04--1-.png 2400w" sizes="(min-width: 720px) 720px"><figcaption>Branded vs. non-branded traffic</figcaption></figure><p>In our case, the chart shows at a glance that our investments in non-branded organic search terms are starting to pay off.</p><p>Below this chart we put together a query (search term) table accompanied by a visualization that helps us see when a certain search term starts picking up in impressions, clicks, and the CTR rate&#x2014;and when its overall position improves. </p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://retool.com/blog/content/images/2021/09/05--1-.png" class="kg-image" alt="When BI tools fall short: why we built our own marketing dashboards" loading="lazy" width="2000" height="1160" srcset="https://retool.com/blog/content/images/size/w600/2021/09/05--1-.png 600w, https://retool.com/blog/content/images/size/w1000/2021/09/05--1-.png 1000w, https://retool.com/blog/content/images/size/w1600/2021/09/05--1-.png 1600w, https://retool.com/blog/content/images/size/w2400/2021/09/05--1-.png 2400w" sizes="(min-width: 720px) 720px"><figcaption>Google search console dashboard: query table + visualization</figcaption></figure><h2 id="further-down-the-funnel">Further down the funnel<br></h2><p>Kevin visits this Retool dashboard for insights into our full self-serve funnel by different vectors. It gives him the ability to, for example, show how pages with different landing page types and paths are converting visitors beyond sign-ups: to paid users, actions taken within the app, etc.</p><p>Once again, the ability to drill into full-funnel performance by channel is key. &#xA0;<br></p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://retool.com/blog/content/images/2021/09/07-2.png" class="kg-image" alt="When BI tools fall short: why we built our own marketing dashboards" loading="lazy" width="1979" height="798" srcset="https://retool.com/blog/content/images/size/w600/2021/09/07-2.png 600w, https://retool.com/blog/content/images/size/w1000/2021/09/07-2.png 1000w, https://retool.com/blog/content/images/size/w1600/2021/09/07-2.png 1600w, https://retool.com/blog/content/images/2021/09/07-2.png 1979w" sizes="(min-width: 720px) 720px"><figcaption>Full-funnel performance by channel&#xA0;</figcaption></figure><h2 id="what%E2%80%99s-next">What&#x2019;s next</h2><p>Just as we were writing this article, our head of growth Jane Kelly pinged us with an update: &#xA0;</p><figure class="kg-card kg-image-card"><img src="https://lh4.googleusercontent.com/N7dGlBDJ6kX9o6HAZ17g39AyUWMB3Pqct7LZSCNSjsbPCSByDcLxWDPTp31sSOMplQvK8HfLlnmnOngU6eMy0xwRIWJEmY9yf0C4P_qbpj8VNGP8L7yP5MmK9mOhM4gZgTGKvXbA=s0" class="kg-image" alt="When BI tools fall short: why we built our own marketing dashboards" loading="lazy"></figure><p>What&#x2019;s next will not just be driven by marketing &#x201C;end-user&#x201D; demand, but also produced in a self-serve fashion, with team members frequently creating their own apps, such as this content dashboard: <br></p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://retool.com/blog/content/images/2021/09/09.png" class="kg-image" alt="When BI tools fall short: why we built our own marketing dashboards" loading="lazy" width="2000" height="890" srcset="https://retool.com/blog/content/images/size/w600/2021/09/09.png 600w, https://retool.com/blog/content/images/size/w1000/2021/09/09.png 1000w, https://retool.com/blog/content/images/size/w1600/2021/09/09.png 1600w, https://retool.com/blog/content/images/size/w2400/2021/09/09.png 2400w" sizes="(min-width: 720px) 720px"><figcaption>One of Retool&apos;s content dashboards</figcaption></figure><p>The idea, then, is not that Retool is the be-all-end-all tool for your marketing analytics, but that treating your analytics as an ever-changing, nimble product, rather than a static dashboard, has significant advantages. <br></p>]]></content:encoded></item><item><title><![CDATA[Retool for Startups: Early-stage startups can now build internal tools for free]]></title><description><![CDATA[Focus on building your core product, not custom internal tools. Early-stage startups now get a free year of Retool.]]></description><link>https://retool.com/blog/retool-for-startups/</link><guid isPermaLink="false">61130b9617ec827590fec8dd</guid><category><![CDATA[announcement]]></category><dc:creator><![CDATA[Kevin Garcia]]></dc:creator><pubDate>Tue, 24 Aug 2021 13:00:00 GMT</pubDate><media:content url="https://retool.com/blog/content/images/2021/08/Hero-Image---1024x400---2.png" medium="image"/><content:encoded><![CDATA[<img src="https://retool.com/blog/content/images/2021/08/Hero-Image---1024x400---2.png" alt="Retool for Startups: Early-stage startups can now build internal tools for free"><p>Before Retool, our co-founders tried to build a Venmo competitor but failed to reach product-market fit.</p><p>While their first product didn&apos;t work out, they came away with an important lesson: great internal tooling can help startup founders fill early product gaps and speed up manual work. The only issue was that building these tools was too slow and repetitive. So they decided to build a better solution.</p><p>Today, Retool helps thousands of startups like Brex and DoorDash build custom internal tools without wasting time on redundant work. Retool helps early-stage teams operate fast without all the restrictions that come with spreadsheets, SaaS tools, or manual workarounds.</p><p>We believe great tooling can help startups focus on building better products. <strong>That&apos;s why we&apos;re excited to announce that Retool is now free for early-stage startups. </strong><a href="https://www.retool.com/startups/">Get your free credits now &#x2192;</a></p><h2 id="introducing-retool-for-startups"><strong>Introducing Retool for Startups</strong></h2><p>It&apos;s easy to solve less critical work with out-of-the-box tools. But what about the internal tools that are core to your business? We see a lot of technical founders and engineers spend a lot of time building (and rebuilding) the same tools:</p><ul><li>Tools that <a href="https://retool.com/templates/stripe-refund-tool">join product and Stripe data</a> into a single customer view</li><li>Tools that <a href="https://retool.com/templates/promo-code-manager">convert manual workflows</a> into fully-featured apps for your team</li><li>Tools that help non-technical teammates <a href="https://retool.com/templates/postgresql-admin-panel">read and write to your database</a></li></ul><p><strong>But building from scratch can take weeks</strong>, and distracts your team from focusing on your core product.</p><p>Retool gives technical founders a head start. You can use pre-built UI components, database integrations, APIs, and advanced features (like access control) to create any CRUD app, dashboard, or tool you want. It enables your team to solve problems fast and get back to building your core product.</p><p>Retool for Startups gives early-stage startups <strong>up to 12 months of free access</strong> to the advanced features on our <strong><a href="https://retool.com/pricing/">Startup</a></strong> and <strong><a href="https://retool.com/pricing/">Pro</a></strong> plans (up to $1200 total value).</p><p>We also know that great internal tooling requires the right stack, so we&apos;ve partnered with AWS, MongoDB, Segment, and more to give you powerful options at the best possible price&#x2014;<strong>totaling over $160,000 in software discounts</strong>.</p><hr><blockquote>We first adopted Retool to build out our internal tools for customer success at neo.tax, but we soon discovered lots of other use cases for it: internal company-wide demos, quick product mock-ups, and ad-hoc data analysis. <br><br>We now consider Retool a core part of our software stack. Thanks to Retool&#x2019;s startup credits, we can maximize our time on our most important company objectives. It&#x2019;s an absolute win-win for everyone!</blockquote><p><strong>Firas Abuzaid, co-founder and CTO at neo.tax</strong></p><hr><h2 id="who-counts-as-an-early-stage-startup"><strong>Who counts as an early-stage startup?</strong></h2><p>Our early-stage discounts are available to startups that <strong>meet both of the following criteria</strong>:</p><ul><li>Launched less than 5 years ago</li><li>Raised less than $10M in funding</li></ul><p>Not sure if you qualify? <a href="https://www.retool.com/startups/">Apply anyways</a>. If you are affiliated with any of the venture funds or accelerators below, you can also reach out to them directly to receive an exclusive referral code for even more Retool credits on top of our standard deal:</p><ul><li>Sequoia Capital</li><li>Techstars</li><li>Antler</li><li>Y Combinator</li></ul><p>Don&#x2019;t see your venture fund or accelerator? Tell them to <a href="https://retool.typeform.com/to/qgVhKdhf">apply to be a Retool Startup Partner here</a>.</p><h2 id="get-started"><strong>Get started</strong></h2><p>Don&apos;t let internal tooling be a roadblock in shipping your product.<em> </em>Use Retool to build every process and tool you need to grow faster.</p><p><a href="https://www.retool.com/startups/">Get your free credits now &#x2192;</a></p>]]></content:encoded></item><item><title><![CDATA[Why Solera Health chose Retool over React for internal tools]]></title><description><![CDATA[Solera Health chose to build custom apps in Retool instead of using React. Learn how those CRUD apps reduced friction and sped up workflows for customer support agents. ]]></description><link>https://retool.com/blog/solera-health-customer-story/</link><guid isPermaLink="false">60feea0117ec827590fec515</guid><category><![CDATA[interview]]></category><dc:creator><![CDATA[Kevin Garcia]]></dc:creator><pubDate>Thu, 12 Aug 2021 17:05:15 GMT</pubDate><media:content url="https://retool.com/blog/content/images/2021/07/Frame-14701-1.svg" medium="image"/><content:encoded><![CDATA[<img src="https://retool.com/blog/content/images/2021/07/Frame-14701-1.svg" alt="Why Solera Health chose Retool over React for internal tools"><p></p><p><a href="https://soleranetwork.com/">Solera Health</a> is a marketplace that connects individuals to interventions and treatments for chronic conditions and disease prevention, like diabetes prevention courses or weight management programs.</p><p>Like many fast-growing companies, <a href="https://soleranetwork.com/">Solera Health</a> had to move fast to build their customer-facing products&#x2014;often at the expense of internal tools and processes.</p><p>A lot of their internal processes were built on their CRM, with a few one-off applications built for admin tasks. And as the company grew, they realized it was time for more custom and scalable internal tooling. </p><p>Kenneth Molnar, a Dev Ops Engineer, and Kee Han Ooi, a Software Engineer, decided to scope out replacing Solera&apos;s internal tooling with React apps. &#x201C;But we just didn&#x2019;t need the same level of control and polish on our internal tools as the tools we were building for our providers&#x2014;not to mention, we simply didn&#x2019;t have the time to build React tools for everything,&#x201D; explains Kenneth.</p><p><strong>This is the story of why Solera Health chose to build custom apps in Retool instead of using React, and how those CRUD apps reduced friction and sped up workflows for customer support agents. </strong></p><h2 id="the-cost-of-building-react-apps">The cost of building React apps</h2><p>Kenneth and Kee Han agreed that the process of building React apps from scratch was too time-consuming, notably because:</p><ul><li><strong>Maintaining and testing</strong> all of the packages one by one is a slow process, especially when the team needs to update specific packages and be sure that they won&#x2019;t break the application.</li><li>Even when using a library like <a href="https://material-ui.com/">Material UI</a>, <strong>creating components from scratch</strong> is still slower than using an out-of-the-box solution.</li><li><strong>Different permissions across the organization </strong>were a necessary day-one feature.<strong> </strong>When building a single destination for internal admin tooling, users with different job functions needed different levels of permissions, requiring the team to choose between making an extensive single application with a complex and flexible permission model, or smaller, more straightforward applications. </li></ul><p>Not only was building React apps from scratch slow, but it also affected how they allocated team resources. More custom work meant more developers building and maintaining tooling.</p><p>At this time, they had a robust set of internal tooling for existing products that helped non-developers do their work. But as new platforms or products launched, the equivalent tooling took time to develop&#x2014;meaning operational support tasks that were normally done by other teams had to be handled by developers until the tooling could be built.</p><p>Even if React apps could solve the problem well, the cost of slowing down new core product development was too high. &#x201C;We had to find a better way to build internal tools,&#x201D; says Kee Han. Soon after that, Solera&#x2019;s CTO started looking into low-code and no-code solutions.</p><h2 id="looking-for-a-better-way-to-build-apps">Looking for a better way to build apps</h2><p>When looking for a new internal tooling platform, the team prioritized:</p><ul><li>Accelerating internal tool building</li><li>Iterating on internal tools faster</li><li>Utilizing fewer dev resources</li><li>Allow engineering to be more focused on customer-centric initiatives</li></ul><p>When they found Retool, it checked all the boxes, and provided a simple way to move away from React. </p><p>&#x201C;Retool eliminates the pain of building React apps from scratch and gives us the best of custom tooling,&#x201D; explains Kenneth. &#x201C;It&#x2019;s great because it&#x2019;s technically a single application (Retool itself), but we can build small, tailored apps by job function on top of it&#x2014; without the infrastructure overhead of actually managing multiple small applications.&#x201D;</p><h2 id="moving-to-retool-the-technical-details">Moving to Retool: The technical details</h2><p><strong>Here&apos;s how Solera chose to deploy Retool: </strong></p><ul><li>Solera uses an <a href="https://retool.com/self-hosted/">on-premise version</a> of Retool</li><li>They use Retool on a Kubernetes cluster</li><li>They rely on single-sign-on to streamline access</li></ul><p>Kenneth and Kee Han first installed Retool on a Kubernetes cluster in a non-production environment. &#xA0;</p><p>Then they configured single-sign-on with their identity provider (to demonstrate the ability to interact with their platform APIs using the same authentication models they use in their scratch-built applications).</p><p>Because their platform APIs do most of the heavy lifting around security, this increased their confidence in Retool from a security standpoint.</p><p>Finally, they built a few quick POC apps with various resource types to show that Retool could communicate with every kind of data source they anticipated needing in the short term (API, <a href="https://retool.com/integrations/bigquery">BigQuery</a>, SQL, etc.).</p><p>At this point, they were convinced they wanted to move forward with <strong>making things more production-ready</strong>. To do that, they needed to:</p><ul><li>Enable a good development workflow to move things from development to production</li><li>Set up a separate cluster for the two environments</li><li>Automate upgrades to Retool itself so that someone wasn&apos;t having to execute commands on the Kubernetes cluster manually</li></ul><p>So they:</p><ul><li>Enabled Git SYNC in their dev environment in a Read/Write fashion</li><li>Converted their original POC YAML files for the Kubernetes cluster config into Helm charts and put those in source control</li><li>Built a release pipeline in Azure DevOps to be able to deploy changes to the Retool infrastructure configuration</li></ul><p>They then built out a production Kubernetes cluster and deployed Retool to it (configured to be Read Only on GIT Sync). They set up pull request workflows in Azure DevOps so that application developers could bundle all of the changes into a single pull request and deploy it cleanly to production. </p><p>&#x201C;At that point, we had a nice workflow for developing apps directly in lower environments and then pushing them to prod via a PR when ready,&#x201D; explains Kee Han. &#x201C;The process went very smoothly.&#x201D;</p><h2 id="centralizing-information-and-workflows">Centralizing information and workflows</h2><p>Kee Han single-handedly built several Retool apps used across the organization, including a provider admin dashboard, central contracts and data dashboard, an admin portal for Retool analytics, and a customer service dashboard. </p><h3 id="provider-admin-dashboard">Provider Admin Dashboard</h3><p><strong>Purpose</strong>: Allow Solera to turn providers on and off for payers.</p><p><strong>Before Retool: </strong>Non-technical staff members had no way of accessing or modifying the data.</p><p><strong>With Retool: </strong>Kee Han created a simple UI interface where a user can enable or disable a provider with the click of two or three buttons.</p><p><strong>Primary benefit:</strong> Saves developer time because the alternative was to create another React app&#x2014;which would have taken a ton of time. </p><blockquote>Using Retool for our Provider Admin Dashboard is foolproof.<br><strong>Kee Han Ooi, Software Engineer, Solera Health</strong></blockquote><h3 id="solera-caremanager-dashboard">Solera CareManager Dashboard</h3><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://retool.com/blog/content/images/2021/08/Frame-13.png" class="kg-image" alt="Why Solera Health chose Retool over React for internal tools" loading="lazy" width="1384" height="527" srcset="https://retool.com/blog/content/images/size/w600/2021/08/Frame-13.png 600w, https://retool.com/blog/content/images/size/w1000/2021/08/Frame-13.png 1000w, https://retool.com/blog/content/images/2021/08/Frame-13.png 1384w" sizes="(min-width: 720px) 720px"><figcaption>Agent view to search patient records (Note: All data is <a href="https://retool.com/utilities/generate-api-from-mock-data">randomly generated</a>)</figcaption></figure><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://retool.com/blog/content/images/2021/08/Frame-14732.png" class="kg-image" alt="Why Solera Health chose Retool over React for internal tools" loading="lazy" width="1000" height="496" srcset="https://retool.com/blog/content/images/size/w600/2021/08/Frame-14732.png 600w, https://retool.com/blog/content/images/2021/08/Frame-14732.png 1000w" sizes="(min-width: 720px) 720px"><figcaption>Agents can edit any patient info directly in app (Note: All data is <a href="https://retool.com/utilities/generate-api-from-mock-data">randomly generated</a>)</figcaption></figure><p><strong>Purpose</strong>: Empower customer-facing agents to find information to better assist patients.</p><p><strong>Before Retool: </strong>Agents had to visit multiple data sources to find relevant patient information and respond to their requests.</p><p><strong>With Retool: </strong>All patient information, such as programs, their programs ID, milestones, weekly assessment, history, and all their different activities, are in one place.</p><p><strong>Primary benefit: </strong>Helps agents see critical information about patients, change information, and better serve patients. <br></p><h3 id="retool-admin-portal">Retool admin portal</h3><figure class="kg-card kg-image-card"><img src="https://retool.com/blog/content/images/2021/08/Admin-Portal.png" class="kg-image" alt="Why Solera Health chose Retool over React for internal tools" loading="lazy" width="2000" height="1319" srcset="https://retool.com/blog/content/images/size/w600/2021/08/Admin-Portal.png 600w, https://retool.com/blog/content/images/size/w1000/2021/08/Admin-Portal.png 1000w, https://retool.com/blog/content/images/size/w1600/2021/08/Admin-Portal.png 1600w, https://retool.com/blog/content/images/2021/08/Admin-Portal.png 2277w" sizes="(min-width: 720px) 720px"></figure><p><strong>Purpose: </strong>Track Retool usage, app changes, and user behavior to build better internal apps and understand what&#x2019;s working.</p><h2 id="moving-faster-with-retool">Moving faster with Retool</h2><p>Using Retool has provided Kenneth, Kee Han, and the entire Solera team an end-to-end app development process that&apos;s faster and easier to maintain. </p><p>&#x201C;We&#x2019;ve been able to rapidly and inexpensively crunch out applications that are very useful to our team,&#x201D; explains Kenneth. </p><blockquote>Feature requests or changes to tools used to take at least a week to be addressed, but with Retool, they can be made the same day.<br><strong>Kenneth Molnar, DevOps Engineer, Solera Health</strong></blockquote><p>What&#x2019;s more, they&apos;ve enjoyed building Retool apps. &#x201C;Retool offers us prebuilt components and integration with resources that we otherwise would have to build,&#x201D; Kee Han says. </p><p>&#x201C;This speeds up our process and reduces our need to maintain package updates&#x2014;in React, we&#x2019;d have to update over 100 packages, but with Retool, we only need to update the Retool version, and the packages are updated automatically,&#x201D; he adds. </p><p>The Solera team has also leveraged Retool&#x2019;s customer support team, providing constant feedback and testing new applications and modules. </p><p>&#x201C;Ultimately, Retool empowers us to provide a better tooling service level to our internal users than in the past and, as a result, better serve our customers,&#x201D; Kee Han says. </p><p>By eliminating technical headaches from building apps in React and providing custom, easily updated solutions, Solera Health can focus on what they do best: delivering health solutions to their partners and patients.</p>]]></content:encoded></item><item><title><![CDATA[Build a MongoDB GUI in minutes]]></title><description><![CDATA[Here is how to build a simple yet powerful admin panel for your MongoDB instance. We’ll demonstrate how to query data, build tables and components, and use inline JavaScript to customize them. ]]></description><link>https://retool.com/blog/build-a-mongodb-gui-in-minutes/</link><guid isPermaLink="false">610ead4117ec827590fec823</guid><dc:creator><![CDATA[Ivana Ivanovic]]></dc:creator><pubDate>Sat, 07 Aug 2021 17:10:17 GMT</pubDate><media:content url="https://retool.com/blog/content/images/2021/08/banner_blogpost_7-29-21_2_1.png" medium="image"/><content:encoded><![CDATA[<img src="https://retool.com/blog/content/images/2021/08/banner_blogpost_7-29-21_2_1.png" alt="Build a MongoDB GUI in minutes"><p><br>In this post, we&#x2019;ll show you how to build a simple yet powerful admin panel for your MongoDB instance. Using MongoDB&#x2019;s sample data, we&#x2019;ll demonstrate how to query data, build tables and components, and use inline JavaScript to customize them&#x2014;basically, everything you need in a great MongoDB client/admin panel/GUI with Retool (interested in other options? Check out our 2021 <a href="https://retool.com/blog/the-best-mongodb-guis-in-2020/">guide to best MongoDB GUIs</a>).</p><p>Let&#x2019;s dive in.</p><h2 id="reading-data-from-mongodb">Reading data from MongoDB </h2><p>Creating your new app in Retool (you can <a href="https://login.retool.com/auth/signup">try Retool</a> for free) will give you a blank canvas to which you can drag and drop UI components, set up queries, browse metadata for your queries, and much much more. </p><p>Let&apos;s drag a table to the canvas; it will pre-fill with JSON placeholder data. <br></p><figure class="kg-card kg-image-card"><img src="https://lh5.googleusercontent.com/RaJpF2mb8ppyQlb8r-Wv5B5JdUwcXAO4M-g5mD2NPjk9nHtb6hMKH8f2mnMQzW4ftQVM8DwNuy3Yrxw2jVTcnDCBwUMVd-yw_3IDXwS8aFlPmp1cEowrP2HK8ZF_l_KU7KpT-5VU" class="kg-image" alt="Build a MongoDB GUI in minutes" loading="lazy"></figure><p><br>To connect your MongoDB data, click on &#x201C;Resources&#x201D; &gt; &#x201C;Create a new resource&#x201D;: </p><figure class="kg-card kg-image-card"><img src="https://lh3.googleusercontent.com/dlzPnvP2HYya7yWQ5K_-q3f24hTAjJYPoUkOxW3NpCxTazUCQPOSgPaALoXFMF7tRFarishMWBprPKBLEV7jO6rNtW1tAeOmNp0U6VAMWUYGBqkBwjl4gxM_EFS7pOhv-8myzVAa" class="kg-image" alt="Build a MongoDB GUI in minutes" loading="lazy"></figure><blockquote><strong>Hot tip:</strong> A simple Command +K will open Retool&#x2019;s omnibox, which will help you find pretty much anything anywhere within your Retool app. Use it to pull up any resource ultra fast. <br></blockquote><p>For more information check out <a href="https://docs.retool.com/docs/mongodb">our docs on connecting to MongoDB</a>. Also, check out this <a href="https://retool.com/blog/building-a-listing-approval-tool-in-mongodb/">walkthrough guide</a> to help get your Atlas setup connected, and build a sample listing approval tool using Mongo&apos;s <em>sample_airbnb</em> dataset. </p><p>Back to our sample app: we connected to our MongoDB Atlas instance, where we&#x2019;ve <a href="https://docs.atlas.mongodb.com/sample-data/available-sample-datasets/">preloaded sample datasets</a> that come with MongoDB. We&#x2019;ll work with MongoDB&#x2019;s &#x201C;sales&#x201D; sample set: it contains around 5000 sales orders, each including items like prices, quantities, customer information, whether a coupon was used, and when the order happened: <br></p><figure class="kg-card kg-image-card"><img src="https://lh4.googleusercontent.com/CTv241xxmlqgRuyroCdQecz4fzXdpaxX-lKXHFI9BW34CgRSqDSJdiMmQp8o0Y8ldwT4nSGCfMDg9JcjLHxtNfp5PtN7HPHaizj34cNINgCjjyVeuKq3PxDZ48y0OFpe0gM_eBCb" class="kg-image" alt="Build a MongoDB GUI in minutes" loading="lazy"></figure><p><br>Let&#x2019;s pull this data into our Retool UI. We&#x2019;ll change the query to reference our MongoDB resource, rename the query to &#x201C;listOrders&apos;&apos;, use the &#x201C;find&#x201D; action on the &#x201C;sales&#x201D; collection, then run the query to return our sales order data. Dragging a table onto the UI panel will then automatically populate the table with data from our last saved query results, which will be our sales orders data.</p><figure class="kg-card kg-image-card"><img src="https://lh6.googleusercontent.com/oyQhvhU2besT6S8aWo6ZLgT_Ax-crPH9y6W0bXWppBTbklYz2GAGH3AqpnKvN0TIM6fVnQJy81-87SrH633BFrc8FB5dHVLhHLSLh44yGDebLj_JaIt8rAQNsc3wPJKG3DKGFzXe" class="kg-image" alt="Build a MongoDB GUI in minutes" loading="lazy"></figure><figure class="kg-card kg-image-card"><img src="https://lh6.googleusercontent.com/hm0oC1DVTs_nqJnLTJXwEK9n_4zbYev60zHIFRyLmAFCgXRf78g84a61hKQfMQS2nxcmIkle3s_NEJTRuNYvoI9_ysHtpq2QgVYeKUPnZM5F4IXZtTvHYe4qoxVqklDwCZrI1NC1" class="kg-image" alt="Build a MongoDB GUI in minutes" loading="lazy"></figure><blockquote><strong>Remember to save queries!</strong></blockquote><blockquote>Retool doesn&#x2019;t auto-save queries, so please remember to always save after editing a query.</blockquote><h3 id="building-a-user-interface-to-make-best-use-of-the-data">Building a user interface to make best use of the data</h3><p>Since there is a lot of data here, let&#x2019;s set a limit to 100 orders/results at a time, then change the table to Compact mode which will make it easier to see the data. </p><figure class="kg-card kg-image-card"><img src="https://lh6.googleusercontent.com/4gQtIjp-ddPQoujiG-lMNrIUm1SpKpkNYLspJAw5izJb1YMclpZokPe1e_XCDfnpi5iM8_d9mvEH-V8sXSftt1Uuow8ASY_ay0I7JlFNfSNN9qZylA6_d2WPhJTjGBcz1sgARZdV" class="kg-image" alt="Build a MongoDB GUI in minutes" loading="lazy"></figure><p>Retool lets you inspect data in each cell: in this case, customer data is a JSON object with properties like gender, age and email. &#xA0;</p><figure class="kg-card kg-image-card"><img src="https://lh6.googleusercontent.com/X9V80eAMBhH-5QOt0JAHn9l9AU6IG-QxSDuND1aW84Ur4c--xm_u1xKZLUtzpjTj6gGm95wjvZhFlgN_THkRhyDPB7B3seZ4dEWrHnhmTtcMCNh4nNBvN61mAQgG29-O6vryU1vJ" class="kg-image" alt="Build a MongoDB GUI in minutes" loading="lazy"></figure><p>If we wanted to only display certain information in this column &#x2014; say customer email &#x2014; we can use JavaScript to reference the right cell and accomplish this. While we are at it, we can also update the column title on the fly. </p><figure class="kg-card kg-image-card"><img src="https://lh4.googleusercontent.com/JmpbhXzy6IAsdzrWTY4jnA0RBLbQcHuvPwLrm6DYxxFcNxOadel1K6EYG1bwecOKISfBOvC8Q34M5kJHnJuEhlUghc5Bo6ABjOHTHkdwYq-ZljB3Oh9p1eYFnYhsC4egSpAgpZKx" class="kg-image" alt="Build a MongoDB GUI in minutes" loading="lazy"></figure><p>Similarly, rather than seeing all items in the &#x201C;Items&#x201D; column (which came as an array of JSON objects for each of the items in the order), we can choose to simply display the number of items in the order by using <em>`{{self.length}}`</em><br></p><figure class="kg-card kg-image-card"><img src="https://lh5.googleusercontent.com/pgFLiQ0SkEZSRolQwjX13-JIt4iVncXA4Et7FaY6VE6VNb0ttyx1opWHTfuVYsigm5hwAq1zCYkcU359F6LyQvqEavNKKN7p8T_8EqWRq6Tl_k1dg3QibTS1crgf6kyH0ngwcj4j" class="kg-image" alt="Build a MongoDB GUI in minutes" loading="lazy"></figure><figure class="kg-card kg-image-card"><img src="https://lh4.googleusercontent.com/88658xzSZy9SxqsmEy5Ud0DE4L4b_231hez5u6vnHcavsWzwPoq0NztJ2bIfL3KoWNJsDJwHrFgfABSoRd0hS3W16j4LDdA49j5p1jzQmKyvUik8Okh-Dw1slwABq8P6D91MviBW" class="kg-image" alt="Build a MongoDB GUI in minutes" loading="lazy"></figure><h3 id="taking-advantage-of-retool%E2%80%99s-ui-components-json-explorer-containers-and-more">Taking advantage of Retool&#x2019;s UI components: JSON explorer, containers, and more <br></h3><p>With our MongoDB data in an admin panel, we want to maximize the usefulness of the interface so that we can navigate the order data better. A great way to do that is to separate individual data into different components.</p><p>Let&#x2019;s say we wanted to have a better view into customer information. This is but one of many use cases for Retool&#x2019;s JSON explorer component. We can put it in a nifty container, give it a name, change the background, and overall make it more user-friendly. </p><figure class="kg-card kg-image-card"><img src="https://lh3.googleusercontent.com/IrV_KdtVQRxrF4GBqDAT31d2OCc1uv4D306Ztyyv86mLr6I5JxvIAWdOH-OFjYjQVRpW4z7fcHLIlUmMpI32cCQFRxph9d9C3LimSarC1jYTh3d1OCBXUL11eLHNWApC9ex2tXqK" class="kg-image" alt="Build a MongoDB GUI in minutes" loading="lazy"></figure><p>To see additional items in this order, let&#x2019;s drag over another container with a table which we&#x2019;ll call &#x201C;Order items&#x201D;. We can also put the price data in an easier-to-read format by overwriting the value in the cell with the value nested in the object. We do this by referencing <em>`{{self.$numberDecimal}}`.</em></p><figure class="kg-card kg-image-card"><img src="https://lh3.googleusercontent.com/3mBvCGIUtyec-afWDPsKNt9lex4Ce7sQqkHJgIlgt3DBDPLNqD89rCYoVSVtJ5YwwvxeC9S6bRex6vuDEha72ZyAQ0Q7S5fLTNnfef-ACxAptZoPjHRterSkMo5nnldEoWAVYxfl" class="kg-image" alt="Build a MongoDB GUI in minutes" loading="lazy"></figure><p>To make the table more readable, we can hide the tag column in the table itself&#x2014;choosing to instead show tags in a multi-select component in the same container. </p><figure class="kg-card kg-image-card"><img src="https://lh5.googleusercontent.com/oTiTtR9Pf4A98QbivAwy8GS0xbD5n1RIXsGJNJ4uRed7xJ49Qu-dNaO9HFt8FTVeHgs7E0geE0IfVI5RZpNm6gF9dWH2bUZQm7tvGOmSdv6iy-XeWg3QRuFisF0LmObSCZ1wK1Fo" class="kg-image" alt="Build a MongoDB GUI in minutes" loading="lazy"></figure><p><br><br>Retool offers many options for formatting tables, containers, and the overall dashboard. You can add other <a href="https://retool.com/blog/text-v2-app-documentation/">sophisticated text components</a>, change background and font colors, use Markdown for table headers, etc. </p><h3 id="filtering-items-in-mongodb">Filtering items in MongoDB<br></h3><p>If we wanted to search for a specific customer&#x2019;s order, we&#x2019;d want to add some simple filtering ability: type in a customer email and query MongoDB for records associated with this customer. We can do this by modifying our listOrders query by adding a sorting order and a query structure: </p><figure class="kg-card kg-image-card"><img src="https://lh5.googleusercontent.com/DCILhJxhnO8JGTDtci6ELZMLejyi2cXqblQKoJCAibxrRODM5gnZyW6eE6PB0KOnfOtTEbJDCkFZQEO84dABUJOrP9ioa0CusbHK8lAq6cU_FFPrdGoJphDjdmWJyk7yhY39MYLj" class="kg-image" alt="Build a MongoDB GUI in minutes" loading="lazy"></figure><p><br>We then write some JavaScript using the ternary operator to quickly generate a dynamic query input based on if there is a value populated in the email text input field, <em>`textinput1`</em>. Additionally, we set the listOrders query dropdown to &#x201C;Run query automatically when inputs change.&#x201D; Now we have the ability to filter the table, but also scroll through the orders and easily see each individual one with its relevant data in designated components. </p><figure class="kg-card kg-image-card"><img src="https://lh6.googleusercontent.com/RZESdlXZ4FehZ2tFTXEpOsj_kyE-7Sihkbl1IipJ-L5K3xRBc21J8gfgyE7uIn_ubdwr7LD0_sxhK-CohZ-qGR-OV1TXXovU0AxpHHLjWI7O64kTFlChNf7uF4SiBXRsEK3Tf-hn" class="kg-image" alt="Build a MongoDB GUI in minutes" loading="lazy"></figure><h3 id="there-is-a-lot-more-you-can-do"><br>There is a lot more you can do</h3><p>In this tutorial, we went through building a basic MongoDB GUI, with some simple components and actions. Hopefully, you&#x2019;ve gleaned the customization capabilities with inline JavaScript, and some query manipulation. To see more, including creating, deleting, updating, and sorting items in MongoDB, check out this video: <br></p><figure class="kg-card kg-embed-card"><iframe width="200" height="113" src="https://www.youtube.com/embed/Tn-hxs6eXYY?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></figure><p>And for some sophisticated use cases for Retool admin panels, watch our <a href="https://www.youtube.com/watch?v=aVPXHf-UxFg&amp;list=PLqWdQFDVLADmkOrHQ-x-YPjma_Dzlvrq5">Lightning Demos series</a>, including short demos from Coursera, Segment, and Neo4j. <br></p>]]></content:encoded></item><item><title><![CDATA[Best PostgreSQL GUIs in 2021 (Updated)]]></title><description><![CDATA[This post walks through the best GUIs available for querying your Postgres data.]]></description><link>https://retool.com/blog/best-postgresql-guis-in-2020/</link><guid isPermaLink="false">5e82404e212ec66509ca4e81</guid><category><![CDATA[sql]]></category><category><![CDATA[guide]]></category><dc:creator><![CDATA[Angel D'az]]></dc:creator><pubDate>Wed, 28 Jul 2021 15:15:00 GMT</pubDate><media:content url="https://retool.com/blog/content/images/2020/03/query-console-3.png" medium="image"/><content:encoded><![CDATA[<!--kg-card-begin: markdown--><img src="https://retool.com/blog/content/images/2020/03/query-console-3.png" alt="Best PostgreSQL GUIs in 2021 (Updated)"><p>If you&#x2019;re a modern web developer, chances are you&#x2019;ve interacted with PostgreSQL (&#x201C;Postgres&#x201D; for short). It&#x2019;s the <a href="https://insights.stackoverflow.com/survey/2019#technology-_-databases">second most popular database</a> among developers overall, and almost 70% say <a href="https://insights.stackoverflow.com/survey/2019#technology-_-most-loved-dreaded-and-wanted-databases">they love working with it</a>.</p>
<p>PostgreSQL ships with a built-in CLI called psql, but some don&apos;t prefer to write queries via the command line. This post will review the best PostgreSQL GUI tools available for querying, visualizing, and analyzing your Postgres data, as well as remotely accessing and navigating database servers.</p>
<h2 id="1pgadmin">1) pgAdmin</h2>
<p><strong>Overview</strong></p>
<p><a href="https://www.pgadmin.org/">PgAdmin</a> is one of the most popular GUIs available for Postgres users. Database objects are immediately easy to find on a left hand menu. PgAdmin is on it&#x2019;s fourth major version and supports all of PostgreSQL&#x2019;s features while also being open-source.</p>
<p><img src="https://retool.com/blog/content/images/2020/03/screenshot.png" alt="Best PostgreSQL GUIs in 2021 (Updated)" loading="lazy"></p>
<p><strong>Strong Points</strong></p>
<p>PgAdmin&#x2019;s greatest strength is that anybody can use it, anywhere. You can configure it to run on any cloud server and then access it from all of the major operating systems; Windows, Linux, and MacOS.</p>
<p>PgAdmin runs as a web application, meaning it can be deployed on any server, including your computer. This is convenient if you&#x2019;re running Postgres as a distributed database across multiple servers, as you can include PgAdmin on each. Admittedly, this is a feature more targeted at the Database Administrator (DBA) level than the Analyst or Engineer level, which involves more SQL than production database management.</p>
<p><strong>Useful Shortcuts for your Editor</strong></p>
<p>SQL Query Editors are where most Postgres users spend their time when manipulating data. PgAdmin&#x2019;s SQL Editor provides an extensive list of useful <a href="https://www.pgadmin.org/docs/pgadmin4/development/keyboard_shortcuts.html#sql-editors">shortcuts</a> for quality of life improvements. They cover most of what you&#x2019;d want to accomplish when writing queries that need maintenance friendly white space.</p>
<p><strong>Drawbacks</strong></p>
<p>The main drawback of PgAdmin is installation barriers, especially for SQL developers who aren&#x2019;t experts at the command line. Running a Postgres GUI as a web application from your terminal is something that newcomers should not be expected to figure out from the ground up. Managing multiple servers, databases, and the usage that comes with them, is definitely a more advanced terminal skillset.</p>
<h2 id="2navicat">2) Navicat</h2>
<p><strong>Overview</strong></p>
<p>Navicat is not as popular as PgAdmin but definitely comes with many of the features you would expect from software that makes talking to databases easier. Navicat is a paid tool and isn&#x2019;t open-source, so it comes with many more features than the typical open-source tool. Unlike pgAdmin, for example, Navicat supports multiple SQL dialects, like MongoDB, MySQL, and PostgreSQL.</p>
<p><img src="https://retool.com/blog/content/images/2020/03/02.Product_01_Premium_Windows_01_Mainscreen15.png" alt="Best PostgreSQL GUIs in 2021 (Updated)" loading="lazy"></p>
<p><strong>Strong Points</strong></p>
<p>Installation of Navicat requires no more than <a href="https://www.navicat.com/en/navicat-monitor-installation-guide?ver=ubuntu">three lines</a> of terminal commands in Ubuntu. It is easy to get up and running and has multiple features which make it a great choice for team collaboration. You can easily improve team productivity for the SQL your team writes via Navicat&#x2019;s job scheduler.</p>
<p>An add-on feature called Navicat Cloud also allows for Navicat SQL-specific team collaboration. This cloud friendliness extends to how easy it is to connect to data sources, like cloud databases, local flat files, or SSH tunneling and SSL.</p>
<p>Navicat also comes with a powerful data modeling tool, which lets you visualize database structures and design schemas.</p>
<p><strong>Modern Aesthetic</strong></p>
<p>The aesthetic of Navicat&#x2019;s GUI is slicker and more modern than pgAdmin&#x2019;s. One of the neat things about Navicat is that it gives the user a choice of dark or light theme from the start (for those dark mode die hards out there).</p>
<p><strong>Drawbacks</strong></p>
<p>The main drawback to Navicat is the price. Cost may not be as much of an issue for a business looking to maximize their database users&#x2019; efficiency, but it could be frustrating if you&#x2019;re an individual looking for a simpler query tool. The Navicat trial is only available for 14 days, and you have to buy licenses to be able to work with PostgreSQL or MySQL.</p>
<p><a href="https://www.navicat.com/en/store/navicat-for-postgresql#W">Navicat for PostgreSQL pricing consists</a> of three tiers: non-commercial ($119), standard ($199), and enterprise ($299).</p>
<br>
<div class="inline-newsletter-form">
    <p><b>Subscribe to the Retool monthly newsletter</b><br>Once a month, we send out top stories (like this one) along with Retool tutorials, templates, and product releases.</p>
    <!--[if lte IE 8]>
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>
<![endif]-->
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
  hbspt.forms.create({
	region: "na1",
	portalId: "7660877",
	formId: "483b2cd8-808f-4b2f-80be-f4b3f3a78d83"
});
</script>
</div>
<h2 id="3dbeaver">3) DBeaver</h2>
<p><strong>Overview</strong></p>
<p>DBeaver is open source like PgAdmin. However, it supports different types of databases like Navicat. DBeaver also has an enterprise version which provides advanced plugins for productivity. You can run DBeaver on all of the common Operating Systems; Windows, Linux, and MacOS, and import and export data from a variety of file formats, including CSV, HTML, XML, JSON, XLS, and XLSX.</p>
<p><img src="https://retool.com/blog/content/images/2020/03/02.Product_01_Premium_Windows_01_Mainscreen15-1.png" alt="Best PostgreSQL GUIs in 2021 (Updated)" loading="lazy"></p>
<p><strong>Strong Points</strong></p>
<p>At least for beginners, the best thing about DBeaver (at least in how it compares to the other GUIs so far) is that it runs as a desktop application. Database objects are easy to find on the left-hand side menu, and connecting to my local Postgres database was intuitive. No CLI experience is necessary for you to start.</p>
<p>DBeaver, being open-source, has both free and paid options. An easy-to-sell concept: start with a deadline-less free DBeaver and transition into a paid tier as your organization&#x2019;s needs scale.</p>
<p><strong>Drawbacks</strong></p>
<p>DBeaver&#x2019;s main strength is also its main weakness: desktop applications only have as much power as your machine. To unlock the productivity levels you need in distributed development situations, you&#x2019;ll have to turn to its enterprise option.</p>
<h2 id="4heidisql">4) HeidiSQL</h2>
<p><strong>Overview</strong></p>
<p><a href="https://www.heidisql.com/">HeidiSQL</a> is the only GUI on this list that was built exclusively for Windows. Just like DBeaver and Navicat, HeidiSQL can connect to different database drivers, like MySQL, Microsoft SQL Server, and PostgreSQL. HeidiSQL is free and open-source.</p>
<p><img src="https://retool.com/blog/content/images/2020/03/scrKnfpXS.png" alt="Best PostgreSQL GUIs in 2021 (Updated)" loading="lazy"></p>
<p><strong>Strong Points</strong></p>
<p>Like many Windows desktop applications, HeidiSQL is easy to download and install. If you&#x2019;re siloed in Windows and your IT department is firm on that, HeidiSQL is a great option for connecting to a Postgres database.</p>
<p>I was able to connect to a database with only a handful of credential fields. The console prints out the commands that the GUI executes in real time &#x2014; much like a log. This visibility into the back end makes it a useful tool for debugging and troubleshooting database problems.</p>
<p><strong>Drawbacks</strong></p>
<p>HeidiSQL is pretty lightweight, so it&#x2019;s missing some of the power features that advanced users might need, like a debugger, and has no cross-platform support.</p>
<h2 id="5datagrip">5) Datagrip</h2>
<p><strong>Overview</strong></p>
<p><a href="https://www.jetbrains.com/datagrip/">Datagrip</a> is a cross-platform integrated development environment (IDE) from the folks over at JetBrains (makers of IntelliJ, PyCharm, etc.). That means, you can use it on Macs, Windows, <em>and</em> Linux. Unlike PgAdmin or Navicat, it is not a web application and can run as a local application like Spotify, VSCode, or RStudio.</p>
<p><img src="https://retool.com/blog/content/images/2020/03/query-console.png" alt="Best PostgreSQL GUIs in 2021 (Updated)" loading="lazy"></p>
<p><strong>Strong Points</strong></p>
<p>DataGrip is intense, and it&#x2019;s built from the ground up for power and customizability, ranging from dark themes to plugins for the many database systems and dialects available.</p>
<p>As an Ubuntu (Linux) OS user, installing dependencies requires two bash CLI commands. Installing DataGrip only requires one. A single terminal with an open log remains open when I launch DataGrip. This terminal prints out log information about the app as it&apos;s running. You can run it in the background, but I like DataGrip&#x2019;s balance between command-line usage and desktop application.</p>
<p><img src="https://retool.com/blog/content/images/2020/03/image1.png" alt="Best PostgreSQL GUIs in 2021 (Updated)" loading="lazy"></p>
<p><strong>Drawbacks</strong></p>
<p>With a range of plugins and up-to-date development, it&#x2019;s no surprise that DataGrip is a paid tool at <a href="https://www.jetbrains.com/datagrip/buy/#commercial?billing=yearly">$199 per year</a>, per user, for the first year ($159.00 for the second year and $119.00 thereafter). Unlike pgAdmin or Navicat, DataGrip is not built to be an administrator web application that you can deploy on any cloud server. It&#x2019;s made for querying.</p>
<p>DataGrip is more than enough for many small businesses because a desktop application can help them solve most of their urgent database problems on one or a few computers. That said, another solution may be better for deploying and managing many Postgres DBs.</p>
<h2 id="6omnidb">6) OmniDB</h2>
<p><strong>Overview</strong></p>
<p><a href="https://omnidb.org/">OmniDB</a> is open-source software that works on Mac, Windows, and Linux. It&#x2019;s focused on lightweight, no-frills, Postgres database management.</p>
<p><img src="https://retool.com/blog/content/images/2020/03/image8.png" alt="Best PostgreSQL GUIs in 2021 (Updated)" loading="lazy"></p>
<p><strong>Strong Points</strong></p>
<p>Despite being open-source, OmniDB retains a lot of the SQL development features that a lot of the paid GUIs have, including features like SQL autocomplete, syntax highlighting, customizable charts for database metrics, and complete debugging tooling. Release notes show that OmniDB is most focused on Postgres.</p>
<p><strong>Drawbacks</strong></p>
<p>OmniDB is a lightweight tool, meaning it works great for one or a few SQL developers who need a free option for fundamental database work. It&#x2019;s not, however, the best option for SQL developers who need a wide community of support, documentation, and at-scale deployment for their databases.</p>
<h2 id="7beekeeperstudio">7) Beekeeper Studio</h2>
<p><strong>Overview</strong></p>
<p><a href="https://www.beekeeperstudio.io">Beekeeper Studio</a> is a cross-platform open-source database management desktop app that works on Mac, Linux, and Windows. It supports a broad set of databases, including PostgreSQL, MySQL, SQLite, SQL Server, CockroachDB, and Redshift.</p>
<p><img src="https://retool.com/blog/content/images/2020/09/history-dark-c32b77360f595a940249a1aa51494c69dd1847743c2e5d0a96de7cb7441daaa4.png" alt="Best PostgreSQL GUIs in 2021 (Updated)" loading="lazy"></p>
<p><strong>Strong Points</strong></p>
<p>Beekeeper Studio is focused on providing a smooth, fast, and easy-to-use interface, as opposed to a powerful, keyboard-shortcut-based nightmare. Typical tasks, like quickly updating a database table or running a SQL query, are super quick and simple.</p>
<p>Another benefit: the Beekeeper Studio team is <a href="https://www.beekeeperstudio.io/mission/">committed</a> to staying open-source and never adding any user tracking or user monitoring. This commitment to privacy is a unique promise among the apps we&#x2019;ve reviewed here.</p>
<p><strong>Drawbacks</strong></p>
<p>Beekeeper Studio doesn&#x2019;t have as many bells and whistles as DBeaver or DataGrip, so if you&#x2019;re a DBA or need sophisticated performance monitoring and profiling tools, you&#x2019;re better off with something like DataGrip or DBeaver.</p>
<h2 id="8tableplus">8) TablePlus</h2>
<p><strong>Overview</strong></p>
<p><a href="https://tableplus.com/">TablePlus</a> is a modern, native GUI tool for relational databases, such as MySQL, PostgreSQL, SQLite, and a few NoSQL databases like MongoDB. The TablePlus team is <a href="https://github.com/TablePlus/TablePlus/issues">fairly active on GitHub</a> &#x2014; the only people behind the company being founder Henry Pham and Windows developer Raccoon Thai.</p>
<p><img src="https://retool.com/blog/content/images/2021/05/image6-1.png" alt="Best PostgreSQL GUIs in 2021 (Updated)" loading="lazy"></p>
<p><strong>Strong Points</strong></p>
<p>TablePlus is slick. It provides a customizable user interface (UI), meaning you don&#x2019;t have to use Mojave at all. You can customize your configurations and their appearance as much as you like.</p>
<p>That slickness, however, doesn&#x2019;t belie an unsophisticated tool. A standout among many TablePlus features is its database security functionalities. When you use TablePlus, the connection between you and your database is end-to-end encrypted. That encryption means no data is sent to a TablePlus server. Additionally, TablePlus comes with built-in SSH and ensures your database credentials are stored securely in your device&#x2019;s keychain.</p>
<p><strong>Drawbacks</strong></p>
<p>Despite the slickness of its UI, <a href="https://www.capterra.com/p/170642/TablePlus/">some TablePlus users</a> have pointed out how difficult it is to carve out a unified UX. An advantage to TablePlus is that it supports a wide range of databases, but a weakness of that approach is that the UX of all of them can suffer. Luckily, if you&#x2019;re using it as a Postgres GUI, you&#x2019;ll likely find the support you need. Users noted it suffered more when it came to things like Redis.</p>
<h2 id="9querypie">9) QueryPie</h2>
<p><strong>Overview</strong></p>
<p><a href="https://www.querypie.com/en">QueryPie</a> is a cross-platform database IDE for Mac, Windows, and Linux. QueryPie promises to provide data access governance, from the cloud to on-premises to a variety of other platforms up to and including various SQL tools.</p>
<p><img src="https://retool.com/blog/content/images/2021/05/image9.png" alt="Best PostgreSQL GUIs in 2021 (Updated)" loading="lazy"></p>
<p><strong>Strong Points</strong></p>
<p>QueryPie stands out for a few different features, including:</p>
<ul>
<li>Auto-complete, giving you the ability to write your queries faster.</li>
<li>Multi-query, multi-results, giving you an intuitive UI that makes query search and execution faster. You can also view multiple query results simultaneously.</li>
<li>In-line data edit, giving you the ability to edit query results and table structure directly and easily.</li>
</ul>
<p>QueryPie also has some unique features when it comes to <a href="https://www.querypie.com/blog/why-you-should-use-querypie-as-a-sql-client-for-snowflake/">Snowflake</a>, so if you&#x2019;re interested in expanding beyond Postgres, QueryPie is worth considering.</p>
<p><strong>Drawbacks</strong></p>
<p>The QueryPie team announced its MVP in 2019, and <a href="https://www.indiehackers.com/product/querypie">updates have been sparse since</a>. On their blog, a majority of recent posts date back to early 2020. Though the tool appears robust and useful, you may want to look elsewhere if you&#x2019;re looking for a product that comes with more tutorials and up-to-date content.</p>
<h2 id="10sqlgate">10) SQLGate</h2>
<p><strong>Overview</strong></p>
<p><a href="https://www.sqlgate.com/">SQLGate</a> is an integrated tool for database management and development. It promises to simplify how you construct and operate databases. It works with Oracle, SQL Server, MySQL, MariaDB, Tibero, DB2, and, of course, PostgreSQL. Together, <a href="https://www.sqlgate.com/">according to SQLGate</a>, these databases make up 83.2% of the database management system (DBMS) market, meaning using SQLGate will allow you to manage most of the DBMS tools out there.</p>
<p><img src="https://retool.com/blog/content/images/2021/05/sqlgate-gt71lkcguyugn29v.png" alt="Best PostgreSQL GUIs in 2021 (Updated)" loading="lazy"></p>
<p><strong>Strong Points</strong></p>
<p>SQLGate has a few features that make it especially useful for database operators and analysts (though SQLGate also says it&#x2019;s useful and accessible to developers, planners, and marketers, too).</p>
<ul>
<li>Direct database connections, meaning you can connect without any complex Postgres client installations.</li>
<li>Big data processing, giving you the ability to quickly export query results (even massive amounts of them) to Excel.</li>
<li>Ultralight design, proven by the fact that the entire app and all of its functions are contained in less than 50MB.</li>
</ul>
<p><strong>Drawbacks</strong></p>
<p>Pricing, like Navicat, is SQLGate&#x2019;s main drawback. SQLGate is the most expensive tool on this list, coming in at $300 for an indie developer license and about $500 (you have to contact them for specifics, so it could be higher) for an enterprise license. With the amount of open-source and cheaper options on this list, you should take a close look at the unique benefits this Postgres GUI option provides &#x2014; or else look elsewhere.</p>
<h2 id="11retool">11) Retool</h2>
<p><strong>Overview</strong></p>
<p><a href="https://retool.com">Retool</a> is a web-based tool for building internal tools and applications on top of your data. It connects to all modern databases (Postgres, MySQL, MongoDB, and even Oracle) and any REST API, as well as third-party APIs like Stripe and Twilio.</p>
<p><strong>Strong Points</strong></p>
<p>Retool connects to pretty much anything, which is useful if you&#x2019;ve got more than one data source to work with. You can access and work with your Postgres DBs and your MongoDB collections in the same GUI, all from your browser. Retool also puts a GUI wrapper over write operations so you can avoid accidentally writing <code>DROP TABLE</code> and getting yelled at.</p>
<p><img src="https://retool.com/blog/content/images/2020/03/Screen-Shot-2020-03-30-at-4.21.59-PM.png" alt="Best PostgreSQL GUIs in 2021 (Updated)" loading="lazy"></p>
<p>Retool saves engineering time, too, as proven by our customer stories. <a href="https://retool.com/blog/avo-story/">Just look at Avo</a>, which saved hundreds of hours of engineering time by implementing Retool.</p>
<p>If you&#x2019;re building tools on top of your data, Retool saves you time by providing the reusable components you need: tables, buttons, text inputs, and even custom components. Retool is cloud-hosted, so the GUI is accessible from any major operating system and any major browser.</p>
<p><strong>Drawbacks</strong></p>
<p>Retool isn&#x2019;t specifically focused on Postgres (like OmniDB), and is missing some advanced features like a query debugger.</p>
<blockquote>
<p>Retool gives you a complete set powerful building blocks for building internal tools: <strong>Assemble your app in 30 seconds by dragging and dropping from <a href="https://retool.com/components">50+ pre-built components</a>. Connect to Postgres and dozens of <a href="https://retool.com/integrations/">data integrations</a> and anything with a REST or GraphQL API. <a href="https://login.retool.com/auth/signup">Get started for free</a>&#x1F449;</strong></p>
</blockquote>
<h2 id="choosingbetweenthesepostgresqlguis">Choosing between these PostgreSQL GUIs</h2>
<p>Which is the best PostgreSQL GUI? The answer is: it depends. If you&#x2019;re a single analyst looking to move into transparent and reproducible workflows with a single instance of a database, then DBeaver, Beekeeper Studio, DataGrip, or HeidiSQL are your best bets.</p>
<p>If you are part of a larger team, however, then paying for Navicat may be the best option because of Navicat&#x2019;s team collaboration focus.</p>
<p>pgAdmin is the only PostgreSQL native GUI &#x2014; plus, it&#x2019;s totally free and scales easily across multiple servers. pgAdmin makes for a great choice for Postgres-focused DBAs. That said, a need for distributed servers usually only arises for skilled developers who can tackle this kind of configuration.</p>
<p>Retool shines when you&#x2019;re working with multiple data sources. Modern developers rarely stay in one ecosystem like Postgres. As an organization grows, data workers have a growing list of stakeholders who need and want visibility for their metrics. Integrating multiple data sources with clicks and transforming with SQL is my preferred method of data manipulation because it minimizes developer time and maximizes domain-specific knowledge about your own data.</p>
<!--kg-card-end: markdown-->]]></content:encoded></item><item><title><![CDATA[How Earnin rebuilt their customer service process ahead of launching a new feature]]></title><description><![CDATA[This is the story how Paula built a new service dashboard in Retool to help the customer service team prepare for the launch of their new product, WeWin. ]]></description><link>https://retool.com/blog/earnin-customer-story/</link><guid isPermaLink="false">60eb83ce17ec827590fec09e</guid><category><![CDATA[interview]]></category><dc:creator><![CDATA[Kevin Garcia]]></dc:creator><pubDate>Mon, 26 Jul 2021 16:00:00 GMT</pubDate><media:content url="https://retool.com/blog/content/images/2021/07/Earn.svg" medium="image"/><content:encoded><![CDATA[<img src="https://retool.com/blog/content/images/2021/07/Earn.svg" alt="How Earnin rebuilt their customer service process ahead of launching a new feature"><p><a href="https://www.earnin.com/">Earnin</a> empowers people to control their finances with a variety of services and products that give customers flexibility, access to, and control over their money.</p><p>Their products play a critical role in a lot of their customers&apos; finances, as they help eliminate the wait for payday, it helps their customers pay bills on time, and save sooner&#x2014;all with no mandatory fees (1). </p><p>In fact, 84% of their customers said that Earnin reduced their financial stress during COVID-19 (2).</p><p>But helping customers with finances is often very time-sensitive&#x2014;like paying bills or rent on time&#x2014;so it&#x2019;s mission-critical that Earnin provides support to their customers quickly and reliably. </p><p>That&#x2019;s where Paula Obler, a Software Engineer on the team at Earnin, comes in. She builds tools for Earnin customer service agents and internal teams so that customers get help when they need it&#x2014;and have access to their earned money. </p><p><strong>This is the story how Paula built a new customer service tool in Retool to help the customer support team prepare for the launch of their new feature, WeWin (3). </strong><br></p><h2 id="scaling%E2%80%94and-hitting-a-breaking-point-for-legacy-tools">Scaling&#x2014;and hitting a breaking point for legacy tools</h2><p>In the early days at Earnin, the engineering team built custom internal tooling for the customer service team that supported their basic needs. </p><p>As they scaled both teams and product offerings, however, it became obvious that they would need more robust and comprehensive tools. As a result of their aging tooling, the customer service team suffered&#x2014;and so did the support they provided to Earnin customers. </p><p>Their homegrown solution initially displayed way too much information and was confusing to navigate. </p><figure class="kg-card kg-image-card"><img src="https://retool.com/blog/content/images/2021/07/Before.png" class="kg-image" alt="How Earnin rebuilt their customer service process ahead of launching a new feature" loading="lazy" width="1920" height="1080" srcset="https://retool.com/blog/content/images/size/w600/2021/07/Before.png 600w, https://retool.com/blog/content/images/size/w1000/2021/07/Before.png 1000w, https://retool.com/blog/content/images/size/w1600/2021/07/Before.png 1600w, https://retool.com/blog/content/images/2021/07/Before.png 1920w" sizes="(min-width: 720px) 720px"></figure><p>&#x201C;The data wasn&#x2019;t organized in a way that matched agents&#x2019; workflows, so they lost time hopping from tool to tool in order to gather the necessary information to serve customers,&#x201D; Paula explains. </p><blockquote>The entire customer support process was slowed down as a result, and our customer experience was impacted.</blockquote><p>What&#x2019;s more, onboarding new agents was a challenge because the internal tool wasn&#x2019;t intuitive or streamlined. As the company started growing faster, the need to improve the onboarding process started to hit a breaking point. </p><p>On top of that, another consequence of the old tooling was something Paula felt in her day-to-day: &#x201C;Developing new or updating old internal tools was a slow and laborious process,&#x201D; she explains. &#x201C;The tools existed in a legacy repo and used an old UI framework, which was clunky for developers and reduced our interest in improving our internal tools.&#x201D;</p><p>With the launch of <a href="https://www.earnin.com/wewin">WeWin</a>, an incentive feature where users could have a chance to earn up to $10M as they saved more money, Paula and her team wanted to build a better tool that would streamline the customer support workflow, thereby allowing agents to access information faster and respond to customers with more confidence to customer requests. </p><figure class="kg-card kg-image-card"><img src="https://retool.com/blog/content/images/2021/07/Goals.png" class="kg-image" alt="How Earnin rebuilt their customer service process ahead of launching a new feature" loading="lazy" width="1920" height="1080" srcset="https://retool.com/blog/content/images/size/w600/2021/07/Goals.png 600w, https://retool.com/blog/content/images/size/w1000/2021/07/Goals.png 1000w, https://retool.com/blog/content/images/size/w1600/2021/07/Goals.png 1600w, https://retool.com/blog/content/images/2021/07/Goals.png 1920w" sizes="(min-width: 720px) 720px"></figure><p>They needed to create a tool that matched&#x2014;and optimized&#x2014;agents&#x2019; workflows. It was important that they help minimize the cognitive load of responding to support requests so helping customers would be simple, not confusing. </p><p>Because requests are often time-sensitive and financially impactful, Paula wanted the new tools to empower agents to really engage with the issues customers brought forth, instead of spending their time managing the workflow around the issue. </p><p>Finally, as a developer, Paula hoped to improve her own team&#x2019;s experience of developing tools for customer support agents and other internal stakeholders alike. By speeding up the release cycle for making changes to their internal tools, agents and developers would be better able to sustain the company&#x2019;s rapid growth.<br></p><h2 id="empowering-the-customer-support-team-with-retool">Empowering the customer support team with Retool</h2><p>Paula started by developing a customer service tool to support their WeWin feature.</p><p>For every $10 Earnin customers save, they&#x2019;re entered for a chance to win money weekly. Using Retool, Paula built a service dashboard that empowers agents to respond to customer requests and issues quickly and easily. </p><p>In the Retool dashboard, agents can search for a customer&#x2019;s user ID, see all the WeWin numbers that have been drawn for the customer, see their ticket entries, and more. </p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://retool.com/blog/content/images/2021/07/After.gif" class="kg-image" alt="How Earnin rebuilt their customer service process ahead of launching a new feature" loading="lazy" width="600" height="338"><figcaption>Earnin&apos;s Retool app</figcaption></figure><p>&#x201C;All of the customer data is displayed in one place and agents can take actions right from Retool,&#x201D; Paula explains. &#x201C;They no longer have to jump from tab to tab to find information or resolve the customer&#x2019;s request.&#x201D;</p><p>Paula and her team are also building a workflow that covers the most frequently asked questions from agents, displays key customer details for a bird&#x2019;s eye view, and provides action buttons to further reduce the time it takes to help a customer.</p><h2 id="simplified-streamlined-workflows%E2%80%94for-both-agents-and-developers">Simplified, streamlined workflows&#x2014;for both agents and developers</h2><p>Using Retool makes managing customer requests easier and it improves several internal workflows, too. </p><p>From onboarding new agents&#x2014;which is quick and simple using the new Retool workflow&#x2014;to faster and more enjoyable development cycles for development, Retool has streamlined how Paula and her team work with the entire Earnin team.</p><p>&#x201C;Our developers can now involve agents in the development process thanks to the ease of creating mockups, getting feedback, and iterating within Retool,&#x201D; Paula explains. </p><p>For example, the two engineers who manage support tools can create several versions of a new feature&#x2014;like their new FAQs dashboard&#x2014;and test them out with agents, gather feedback, and iterate. &#x201C;It&#x2019;s far more effective than using wireframes because agents can actually use the tool as we&#x2019;re developing and iterating,&#x201D; she adds.</p><p>Because Earnin is a mobile-based application, Paula and her team don&#x2019;t have the tooling to manage web UI development&#x2014;something that made building internal tools tricky. </p><p>&#x201C;Using Retool eliminates the need for a frontend codebase and reduces the load on our developers,&#x201D; Paula says. &#x201C;It&#x2019;s one less thing for us to think about because Retool automates the frontend away.&#x201D;<br></p><h2 id="saving-time-and-launching-faster">Saving time and launching faster</h2><p>Paula and her team have already noticed improvements in their workflows and abilities to help agents respond faster and more proficiently to customer requests. </p><p>Moving forward, they&#x2019;ll track new Retool feature success by asking agents for feedback and gathering suggestions for improvements to the internal tools. </p><p>They&#x2019;ll also measure training time for agents and chat handle time, aiming to vastly reduce the time and effort it takes to both onboard new agents and respond to customer inquiries. </p><p>&#x201C;We&#x2019;ve already seen improvements in our development time since launching the WeWin customer support tool,&#x201D; says Paula. </p><blockquote>Instead of months, we launched a Retool app in two weeks because our developers didn&apos;t have to build out a frontend repo with custom UI.</blockquote><p>The Earnin team will continue to track time savings for the development team, agents, and customers alike&#x2014;all in the spirit of driving better financial control for all.</p><p>Want more? Check out <a href="https://www.youtube.com/watch?v=cUzbMWPKd2c&amp;list=PLqWdQFDVLADmkOrHQ-x-YPjma_Dzlvrq5&amp;index=9">Paula&apos;s demo</a> from our Retool Lightning Demos series. </p><hr><p><em>(1) Restrictions and/or third party fees may apply, see <a href="https://www.earnin.com/TOS" rel="nofollow noreferrer">Earnin.com/TOS</a> for details.</em></p><p><em>(2) Earnin Survey Dec 10 2020 - Jan 1, 2021: 1122 Responses</em></p><p><em>(3) Disclaimer NO PURCHASE NECESSARY TO ENTER OR WIN. Must be 18 years of age or older and a legal resident of the U.S. or DC. Games begin each Sunday starting 12/6/20 at 9:01 p.m. ET and end the following Monday at 9:00 p.m. ET with the last Game ending 12/19/21. To download the App, view the Official Rules, odds disclosures, prize details, and alternate means of entry, visit<a href="https://www.earnin.com/wewin/" rel="nofollow noreferrer">https://www.earnin.com/wewin/</a> . Void where prohibited. $10,000,000 grand prize payable over 29 years. Sponsor: Activehours, Inc. (d/b/a Earnin &#xAE;), 200 Portage Ave, Palo Alto, CA 94306.</em><br></p>]]></content:encoded></item><item><title><![CDATA[Building apps on top of Google Sheets]]></title><description><![CDATA[In this post, we'll show you how to create simple apps from Google Sheets, from simple use cases to powerful apps built by Segment and Brex.  

]]></description><link>https://retool.com/blog/google-sheets/</link><guid isPermaLink="false">5b985307c27eef13a344ff3b</guid><category><![CDATA[product]]></category><category><![CDATA[sheets]]></category><category><![CDATA[guide]]></category><dc:creator><![CDATA[Sid Puri]]></dc:creator><pubDate>Fri, 23 Jul 2021 23:30:00 GMT</pubDate><media:content url="https://retool.com/blog/content/images/2021/07/banner_blogpost_7-23-21_2.svg" medium="image"/><content:encoded><![CDATA[<!--kg-card-begin: markdown--><img src="https://retool.com/blog/content/images/2021/07/banner_blogpost_7-23-21_2.svg" alt="Building apps on top of Google Sheets"><p>While spreadsheet software has evolved over the years&#x2014;first VisiCalc, then Lotus, Excel and now Google Sheets&#x2014;the core abstractions have remained the same.They&#x2019;re flexible, intuitive, and accessible.</p>
<p>But these abstractions make spreadsheets bad at certain tasks.In particular, entering data is error-prone (no validation), and building interactive interfaces is difficult. You <em>could</em> get a spreadsheet to do almost anything, but you probably shouldn&apos;t.</p>
<p><a href="https://retool.com">Retool</a> is a fast way of building UIs and internal tools. And because Google Sheets is probably the lowest-friction way to store and use structured data online, Google Sheets is where many internal tools start. This post will show you how to use Retool to make powerful apps from Google Sheets. You&#x2019;ll be able to build internal tools on top of any Google Sheet in just a few minutes.</p>
<img src="https://retool.com/blog/content/images/2018/09/google-sheets-retool-1.png" style="max-width: 100%; width: 650px" alt="Building apps on top of Google Sheets">
<p>For example, if you work in sales, you can pull in your Google Sheet with leads, and send each one a personalized email by simply pressing a button. If you&#x2019;re an ecommerce company, you can have operators submit orders via Google Sheets, and then build a UI to run an API request for each row.</p>
<p>Because Google Sheets is the lowest-friction way to store and use structured data online, we built a native integration to dramatically reduce the amount of work it takes to build a tool on top a Google Sheet.</p>
<h2 id="tutorialbuildingatooltocontactsalesleads">Tutorial: building a tool to contact sales leads</h2>
<p>Let&apos;s say you&apos;re a venture capital firm. During an accelerator&apos;s &quot;demo day&quot;, you recorded a list of companies that look promising. Using a full-blown CRM to compile this list would be overkill, so you used Google Sheets:</p>
<div style="margin: 30px 0px">
    <div style="margin-bottom: 15px">
<iframe style="border: 1px solid rgba(0,0,0,0.2); border-radius: 8px; width: 100%; height: 400px; padding: 2px;" src="https://docs.google.com/spreadsheets/d/1jQKcJQRgjBNzr2ZlKHJOGzv7HwSHJZOiYV0wQ9sx2EI"> </iframe></div>
<a target="_blank" rel="noopener noreferrer" href="https://docs.google.com/spreadsheets/d/1jQKcJQRgjBNzr2ZlKHJOGzv7HwSHJZOiYV0wQ9sx2EI"> Click here to see the original Google Sheets </a>
</div>
<p>Now, you want to go through the spreadsheet company by company, and send each contact a follow-up email. Before, you&#x2019;d have to write every email &#x201C;by hand&#x201D;. But now, with Retool, you can create an app on top of your Google Sheets data, and fire off a templatized email to each company by simply pressing a button.</p>
<p>Here&#x2019;s the final app. Feel free to click around on different rows, enter in an email address, send some emails, etc.</p>
<div style="width: 100%">
<iframe class="google-sheets-demo" scrolling="no" src="https://samples.tryretool.com/embedded/public/b8f30f04-1ff0-4887-9c17-ef6a90b297a2" style="width:1px; min-width:100%; height: 650px; padding: 2px; max-width: 900px"> </iframe>
    </div>
<div style="margin-top: 10px; margin-bottom: 10px;">
And here&apos;s how we built it, in a matter of minutes. <a href="https://docs.retool.com/docs/google-sheets">P.S. Here&apos;s the text tutorial</a>, if you prefer reading.
</div>
<iframe src="https://player.vimeo.com/video/290840194" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<h2 id="lightningdemoshowcourserasegmentandbrexwentfromspreadsheetstoapplications">Lightning demos: how Coursera, Segment and Brex went from spreadsheets to applications</h2>
<p>For more sophisticated use cases where companies replaced multitudes of Google Sheets used internally with some powerful apps, check out our lightning demos:</p>
<iframe width="560" height="315" src="https://www.youtube.com/embed/Q11vLV4-e24" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<h2 id="afewsimpleusecases">A few simple use cases</h2>
<h3 id="simpleinventorytracker">Simple inventory tracker</h3>
<p><img src="https://retool.com/blog/content/images/2021/07/image2.png" alt="Building apps on top of Google Sheets" loading="lazy"></p>
<p>If you run an ecommerce business, you probably have operations teams heavily dependent on Google Sheets for use cases like inventory tracking, supply chain, and delivery tracking.</p>
<p>You might face an issue of too many people editing the sheet, or example - editing item quantity or adding new products. If you are looking for a more controlled experience, you can build the UI on Retool so you don&#x2019;t risk your team accidentally deleting rows or manipulating the wrong cell.</p>
<h3 id="customcrm">Custom CRM</h3>
<p>You might have heard the saying &#x201C;all CRMs start as spreadsheets&#x201D;. Your spreadsheets could be missing some custom field requirements and views but you make do&#x2014;you also don&#x2019;t want to move to a completely new setup and spend time implementing it.</p>
<p>A custom UI on top of a sheet can help you achieve that complexity while keeping your underlying database intact:</p>
<p><img src="https://retool.com/blog/content/images/2021/07/CRM.png" alt="Building apps on top of Google Sheets" loading="lazy"></p>
<h3 id="customizableemailautomation">Customizable email automation</h3>
<p>Let&apos;s say you wanted to email a bunch of people (sales contacts, hackathon attendees, survey respondents...). You want to use a template, yet personalize each message a little bit. Unfortunately, standard email marketing automation systems are not customizable enough for this use case. Retool to the rescue!</p>
<p>Check out this video on converting a Google Sheet app to a customizable email &quot;automator&quot;:</p>
<iframe width="560" height="315" src="https://www.youtube.com/embed/4jq81jh-bFI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<h3 id="applicanttrackingsystem">Applicant tracking system</h3>
<p>Almost every company today uses a candidate applicant tracking system, and smaller shops might use a Google sheet that is potentially hooked up to a Google Form/Typeform.</p>
<p>You might want to build an interface to help easily switch candidate stages, add custom notes, send emails, and enable custom views. With a simple Retool app you can keep your sheet structure as your back end, and create a UI front end that&#x2019;s easy to use for anyone in your company.</p>
<p><img src="https://retool.com/blog/content/images/2021/07/applicanttracker.png" alt="Building apps on top of Google Sheets" loading="lazy"></p>
<h2 id="combiningyourgooglesheetswithexternaldatasources">Combining your Google sheets with external data sources</h2>
<p>Retool lets you pull in and <a href="https://docs.retool.com/docs/queries">combine data from different sources</a>, including your databases and APIs. If you have some data in Google Sheets, you can enrich it by joining it to data from another source.</p>
<p>For example, you could enrich your list of leads above with data from your own Gmail, such that it shows when you last contacted each person.You could also connect Retool to Clearbit&#x2019;s API to enrich leads directly in the sheet you use.</p>
<p>In a different scenario, you can export data into Google Sheets for analysis. Spreadsheets are the tool of choice for many analysts (business/finance/data) to quickly manipulate data. If you have internal data in databases/APIs, you can quickly build a Retool app to export it to Google Sheets. This is useful when you want to quickly create financial models in Sheets based on data you have in your database / API.</p>
<p>For example, you could model different growth scenarios for your company, based on the data you have in Stripe. You can create a tool to generate new Sheets (with your template for financial modeling). And because your templates have pre-existing formulas + structure, the new data will flow into them, and all your forecasts will be refreshed with your new numbers.</p>
<p>Connecting to Google Sheets is available to all Retool users. <a href="https://twitter.com/retoolapp?lang=en">Let us know</a> if you&apos;ve got any feedback &#x2014; we love talking to users!</p>
<div class="cta-container">
<div class="cta-headline">Build your own Google Sheets apps:</div>
    <a href="https://login.retool.com/auth/signup" onclick=" setCookie(&apos;marketing_referrer&apos;, &apos;google-sheets-post&apos;, 1)
"><button id="try-now-cta" class="cta cta-primary">Try now</button></a>
    <a href="https://retool.com/docs"><button id="docs-cta" class="cta cta-secondary">Docs</button></a>
</div>
<style>
@media only screen and (max-width: 770px) {
    .google-sheets-demo {
        height: 1080px !important;
    }
}
</style>
<!--kg-card-end: markdown-->]]></content:encoded></item><item><title><![CDATA[How the Segment support team uses real-time data to help customers create and use audiences]]></title><description><![CDATA[As Segment prepared to launch their second product, Personas, a PM realized that their customer support team needed a new level of visibility into product data.]]></description><link>https://retool.com/blog/segment-customer-story/</link><guid isPermaLink="false">6054d214212ec66509ca50bf</guid><category><![CDATA[interview]]></category><dc:creator><![CDATA[Kevin Garcia]]></dc:creator><pubDate>Wed, 21 Jul 2021 16:00:00 GMT</pubDate><media:content url="https://retool.com/blog/content/images/2021/03/Frame-11.png" medium="image"/><content:encoded><![CDATA[<img src="https://retool.com/blog/content/images/2021/03/Frame-11.png" alt="How the Segment support team uses real-time data to help customers create and use audiences"><p>Customer journeys can be incredibly complex. A customer might see any number of your ads, emails, links, products, and more over the course of their lifecycle. And as people do more things on the internet, companies need a way to make sense of all of this digital data.</p><p>Gathering and creating insights from this customer data is no small task. That&#x2019;s where <a href="https://segment.com/">Segment</a> comes in. Segment helps businesses understand who their customers are and use that information across every team and channel.</p><p>Their second product line, <a href="https://segment.com/product/personas/">Personas</a>, helps developers and marketers build audiences or cohorts of their users based on the information they capture from their website, apps, or SaaS platforms. With real-time audiences, businesses can engage with their customers on a whole new level.</p><p>But audiences for global enterprises with huge reach can be incredibly complex. Alex Millet, a product manager on the Personas product, realized that supporting this scale of customers required giving internal teams a new level of visibility. <strong>Here&#x2019;s how he made it happen</strong>.</p><h2 id="a-need-to-better-equip-support-teams">A need to better equip support teams</h2><p></p><p>What Alex found was that offering customers the power to build complex audiences through Personas created a need for Segment&apos;s support teams to be better equipped to respond to nuanced issues and incredibly detailed questions. </p><p>So Alex and his team decided to give the support team the power to understand the audiences at every level&#x2014;but they encountered a couple of barriers to doing so: </p><ul><li><strong>Data was difficult to access and consolidate</strong>: Customer support couldn&#x2019;t access and consolidate data to debug customer issues because they hadn&apos;t yet built a single source of truth. <br><br>As Alex and his team allowed Segment customers to build more complex audiences within the Personas product, the logic got harder and harder to untangle for the support team. When customers ran into issues, the support team had to dig through layers of data from different sources, eating up precious time and resources. </li><li><strong>They lacked clarity on customer support needs</strong>: Alex needed to figure out the best way to empower the Personas support team, but he didn&#x2019;t know what information they were missing. He was looking for more than just a tool to serve up information, he wanted one that would help him understand which information would be most valuable to his team.</li></ul><h2 id="using-a-data-driven-dashboard-to-support-customers">Using a data-driven dashboard to support customers</h2><p></p><p>Alex turned to Retool to develop internal tools that would allow the Personas support team to better utilize detailed data from different customers&#x2019; audiences, like how they get added to or removed from a customer segment based on their actions. </p><p>For example, within Personas, customers can define the conditions of users they want to target with campaigns (to improve odds of conversion or action). </p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://retool.com/blog/content/images/2021/03/Screen-Shot-2021-03-22-at-8.19.17-PM.png" class="kg-image" alt="How the Segment support team uses real-time data to help customers create and use audiences" loading="lazy"><figcaption>Complex audience creation in Segment</figcaption></figure><p>Customers often flag bugs, but the support team didn&#x2019;t always have the tools to help them&#x2014;until they started using their Retool dashboard. </p><p>When responding to a ticket, customer support agents are usually looking for a specific audience and user&#x2014;and their <strong>Personas Support Dashboard</strong> helps them find exactly that. </p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://retool.com/blog/content/images/2021/03/Screen-Shot-2021-03-22-at-8.21.37-PM.png" class="kg-image" alt="How the Segment support team uses real-time data to help customers create and use audiences" loading="lazy"><figcaption>Personas Support Dashboard</figcaption></figure><p>This Retool dashboard pulls together different data sources into one timeline so that support agents can see all the information about a user or audience in one place.</p><p> Using this dashboard, a customer support agent can look at different events&#x2014;when a user viewed a product, opened an email, or which ad campaign they came from&#x2014;and when the user was entered into a specific audience. </p><p>&#x201C;When you have 10-20 different conditions, gathering the data and understanding where the issue is coming from can be really complicated,&#x201D; explains Alex.</p><blockquote>Using the Retool dashboard helps our support team pin down where issues are coming from faster and more accurately by stitching all of our data together into a single timeline.</blockquote><h2 id="supporting-customers-faster">Supporting customers, faster</h2><p></p><p>Using their Retool dashboard, Alex and his team can respond faster to customer requests with more straightforward access to data. They&#x2019;re no longer digging around, looking for the source of truth, or wondering if an issue is settled. </p><p>What&#x2019;s more, &#x201C;Using the dashboard&#x2019;s analytics helps me know which information is most helpful for our support teams, too,&#x201D; explains Alex. </p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://retool.com/blog/content/images/2021/07/Mode-Dash.png" class="kg-image" alt="How the Segment support team uses real-time data to help customers create and use audiences" loading="lazy" width="1255" height="599" srcset="https://retool.com/blog/content/images/size/w600/2021/07/Mode-Dash.png 600w, https://retool.com/blog/content/images/size/w1000/2021/07/Mode-Dash.png 1000w, https://retool.com/blog/content/images/2021/07/Mode-Dash.png 1255w" sizes="(min-width: 720px) 720px"><figcaption>Segment tracks Retool usage in Mode</figcaption></figure><p>&#x201C;With an understanding of how they&#x2019;re using our Retool dashboard, we can build better tooling for our teams and stay ahead of customer issues instead of trying to fix them after they come up.&#x201D;</p><p>Empowered with better access to nuanced data, the customer support team at Segment is better able to help customers building complex audiences and making the most of their Personas product&#x2014;a critical success for everyone involved. </p><hr><p>To hear more from Angelina, as well as other SaaS experts from Botkeeper, Neo4j, LeadGenius, and Remitly, check out our <a href="https://www.youtube.com/watch?v=vF7NsIssHAA">SaaS Lightning Demo</a>.</p>]]></content:encoded></item><item><title><![CDATA[How SaltPay consolidated 10 back office tasks into one app]]></title><description><![CDATA[This is the story of how SaltPay was able to bring together critical user data and support workflows into one Retool app to replace a disjointed and slow customer support process.]]></description><link>https://retool.com/blog/saltpay-customer-story/</link><guid isPermaLink="false">60eb556a17ec827590fec00c</guid><category><![CDATA[interview]]></category><dc:creator><![CDATA[Kevin Garcia]]></dc:creator><pubDate>Tue, 20 Jul 2021 16:00:00 GMT</pubDate><media:content url="https://retool.com/blog/content/images/2021/07/Frame-17.svg" medium="image"/><content:encoded><![CDATA[<img src="https://retool.com/blog/content/images/2021/07/Frame-17.svg" alt="How SaltPay consolidated 10 back office tasks into one app"><p>Everyone has their favorite local haunts: the bookstore with limited edition hardcovers or the coffee shop with your favorite latte. But behind the scenes at all small businesses is a small team deciding how to accept payments, reward customer loyalty, and more.</p><p>To make it happen, many small and medium-sized businesses turn to <a href="https://www.saltpay.co/">SaltPay</a>, a payments company with products that help automate point of sale, loyalty wallets, and ways for merchants to accept payments over the phone. </p><p>&#x201C;Our goal is to empower merchants so they can do more and grow their businesses with less effort,&#x201D; says Miguel Eus&#xE9;bio, who works in Customer Relations at SaltPay. &#x201C;To do that, we need to first empower our team of agents who support our customers.&#x201D;</p><p>Miguel partners with the tech team to build the internal systems that support agents use to serve merchants and partners. &#x201C;Together, our goal is to make the SaltPay customer experience as seamless as our products make running a small or medium business,&#x201D; Miguel explains.</p><p><strong>This is the story of how SaltPay was able to bring together critical user data and support workflows into one Retool app to replace a disjointed and slow customer support process.</strong></p><h2 id="focusing-on-what-matters-the-core-product">Focusing on what matters: The core product</h2><p>As SaltPay acquired more customers over the years, they started to realize that a lot of their existing processes&#x2014;and the tooling built to support them&#x2014;needed a major upgrade. </p><p>&#x201C;Agents and our entire customer-facing team were not equipped to best serve merchants, so we weren&#x2019;t providing the best possible service,&#x201D; Miguel says. </p><p>What&#x2019;s more, the tech team wasn&#x2019;t focusing their energy where it was most useful&#x2014;<strong>on building SaltPay&#x2019;s merchant-facing products</strong>. </p><p>Instead, product and engineering juggled over 10 back-office systems that were slow and hard to use. &#x201C;Simply, it was impossible to provide good customer service because of how long it took to perform basic tasks or find simple merchant information,&#x201D; Miguel explains.</p><p>The tech team faced a decision: where should they focus their time? </p><p>They could develop back-office apps for support agents or build core products and integrations for merchants to grow their business. They ultimately decided that they needed to focus on building SaltPay and empowering merchants instead of spending all their time on back-office work. </p><p>So they sought out a way to make back-office development faster, more efficient, and better able to serve the support team&#x2019;s needs&#x2014;without costing them their core product offering.<br></p><h2 id="from-10-back-office-solutions-to-1-choosing-retool">From 10 back-office solutions to 1: Choosing Retool</h2><p>&#x201C;We needed our tech teams to work on expanding and improving our core products as we prepare to scale, so we started looking for a back-office solution,&#x201D; Miguel says. </p><p>More specifically, they were looking for a solution that met the following requirements:</p><ul><li>Would make it easy to build back-office apps without costing the tech team time and development resources</li><li>Provided critical features like SSO and on-premise hosting to ensure security and scalability</li><li>Was built on an API-first infrastructure so integrations would be effortless<br></li></ul><p>After investigating a variety of alternatives to their homegrown systems, Miguel discovered Retool. Within just a few days of testing Retool, the team decided to roll it out to power SaltPays back-office needs.</p><h2 id="streamlining-customer-relations-with-a-dashboard">Streamlining Customer Relations with a dashboard</h2><p>Today, all customer relations agent workflows are powered by a Retool dashboard. &#x201C;Our goal was to save agents time when handling merchant inquiries or updates, so we built a Retool dashboard where agents can view merchant information in one place,&#x201D; Miguel explains.</p><p>It all starts with an incredibly simple view where agents can search and find merchants.</p><figure class="kg-card kg-image-card"><img src="https://retool.com/blog/content/images/2021/07/Overview.png" class="kg-image" alt="How SaltPay consolidated 10 back office tasks into one app" loading="lazy" width="1918" height="1078" srcset="https://retool.com/blog/content/images/size/w600/2021/07/Overview.png 600w, https://retool.com/blog/content/images/size/w1000/2021/07/Overview.png 1000w, https://retool.com/blog/content/images/size/w1600/2021/07/Overview.png 1600w, https://retool.com/blog/content/images/2021/07/Overview.png 1918w" sizes="(min-width: 720px) 720px"></figure><p>From there, agents are able to run through any of their most critical processes. The dashboard allows them to:</p><ul><li>Search and find merchants quickly and easily, instead of searching through various databases</li><li>See merchant profiles and important data in one place, rather than toggling between tools to find different metrics and reports</li><li>Take action directly from the dashboard, such as adding or closing an outlet and editing merchant information</li></ul><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://retool.com/blog/content/images/2021/07/Merchant-Overview.png" class="kg-image" alt="How SaltPay consolidated 10 back office tasks into one app" loading="lazy" width="1908" height="1076" srcset="https://retool.com/blog/content/images/size/w600/2021/07/Merchant-Overview.png 600w, https://retool.com/blog/content/images/size/w1000/2021/07/Merchant-Overview.png 1000w, https://retool.com/blog/content/images/size/w1600/2021/07/Merchant-Overview.png 1600w, https://retool.com/blog/content/images/2021/07/Merchant-Overview.png 1908w" sizes="(min-width: 720px) 720px"><figcaption>Merchant Overview, where agents can see and update all merchant info</figcaption></figure><p>Before using Retool, agents had to search through multiple back-office tools, taking time and slowing their responsiveness to customers. &#x201C;But with our plans to scale and the increasing volume of customers, this method wouldn&#x2019;t work,&#x201D; says Miguel. </p><p>Now, with a central source of truth, merchant data updates happen in real time and agents only need to navigate to Retool to help a customer&#x2014;no more tracking information down across multiple tools. Agents are better equipped to respond to requests and customers see their issues resolved faster.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://retool.com/blog/content/images/2021/07/Bulk-update.png" class="kg-image" alt="How SaltPay consolidated 10 back office tasks into one app" loading="lazy" width="1920" height="1080" srcset="https://retool.com/blog/content/images/size/w600/2021/07/Bulk-update.png 600w, https://retool.com/blog/content/images/size/w1000/2021/07/Bulk-update.png 1000w, https://retool.com/blog/content/images/size/w1600/2021/07/Bulk-update.png 1600w, https://retool.com/blog/content/images/2021/07/Bulk-update.png 1920w" sizes="(min-width: 720px) 720px"><figcaption>SaltPay&apos;s Retool app also includes the ability for agents to make bulk updates</figcaption></figure><p>&#x201C;Retool has allowed us to easily build apps and a user interface for our agents so our tech team can focus on building our product and APIs, in order to empower our customers,&#x201D; Miguel says. </p><h2 id="empowering-agents-to-provide-a-better-service">Empowering agents to provide a better service</h2><p>Since rolling out the Retool customer relations dashboard, SaltPay agents have access to more tools and are empowered to better help merchants. </p><p>What&#x2019;s more, they&#x2019;re less dependent on the tech team to respond to requests and build back-office solutions&#x2014;and when they do need an update to the tool, <strong>the tech team can make it happen on the same day</strong>. </p><p>Finally, all agent workflows are simplified. With fewer manual tasks to complete, agents can move through their days faster and assist more customers. </p><p>&#x201C;Retool saves our team time and helps us provide a better service for customers by empowering agents to respond faster and with more information and allowing our tech team to focus on building, improving, and scaling our core product offering,&#x201D; Miguel says. </p><p>Just as they&#x2019;re expanding their product offerings for merchants weekly, SaltPay hopes to automate even more back-office tasks using Retool and expand to include other workflows and features, too.</p><p>Want more? Check out <a href="https://www.youtube.com/watch?v=Thd9Rwr7mjM&amp;list=PLqWdQFDVLADmkOrHQ-x-YPjma_Dzlvrq5&amp;index=7">Miguel&apos;s demo</a> from our Retool Lightning Demos series.</p>]]></content:encoded></item><item><title><![CDATA[Build simple and effective document workflow automation with Revv & Retool]]></title><description><![CDATA[With Revv and Retool, you can 10x your document workflow automation. Stitch together different Systems of Record, and build a powerful UI layer. ]]></description><link>https://retool.com/blog/build-document-workflow-automation-with-revv-retool/</link><guid isPermaLink="false">60f5b81b17ec827590fec3a2</guid><category><![CDATA[guide]]></category><dc:creator><![CDATA[Sid Puri]]></dc:creator><pubDate>Mon, 19 Jul 2021 20:16:56 GMT</pubDate><media:content url="https://retool.com/blog/content/images/2021/07/Frame-20--1-.png" medium="image"/><content:encoded><![CDATA[<img src="https://retool.com/blog/content/images/2021/07/Frame-20--1-.png" alt="Build simple and effective document workflow automation with Revv &amp; Retool"><p>Drafting, reviewing, tracking, signing, and storing business documents is essential&#x2014;and can be painful, especially if you are still in the pen and paper era. <a href="https://www.revv.so/">Revv</a>, a complete document management system, <a href="https://www.revv.so/blog/digital-contracts/">specializes in migrating from paper documents</a>, converting word docs, excel sheets, and PDFs to digital documents. </p><p>Revv also enables you to digitize and automate your document creation and management process. The information represented in a document is collected and put together from multiple Systems of Records (SoRs) like CRM, CPQ, CLM, ERP, etc.</p><p>Using Revv and Retool, you can stitch together different Systems of Record and create internal workflows, integrate Revv with your CRM such as Salesforce, and enable the easy flow of information between SoRs.</p><figure class="kg-card kg-image-card"><img src="https://lh3.googleusercontent.com/kRP9MEuFuluqnLz8XQ8_-J-ixyVOAKV6yxeAsqZA7XfukdmOMuZd604c9cK5VfT4uTeAMFr4wG1PBeq_W2weYZhimJvNTL56Mwa2X1EyeaiELR3YwSCxngreeNkdQzCQjnkcyOP1" class="kg-image" alt="Build simple and effective document workflow automation with Revv &amp; Retool" loading="lazy"></figure><h2 id="how-to-automate-document-workflow-process-by-integrating-revv-and-retool">How to automate document workflow process by integrating Revv and Retool<br></h2><p>Revv offers more than 1000 legally vetted ready-to-use NDA and other business document templates that you can use to draft your documents. </p><p>To create an NDA, you need to input information of the client with whom you are sharing the document. This information is usually stored in a CRM like Salesforce. Doing this manually is not effective. It slows down the sales process, may lead to loss of data in transit, incorrect information being added to the document, etc.</p><p>This is where Retool comes in: with Retool, you can build a UI layer that connects directly to Salesforce and Revv, so you can manage your CRM and Revv updates in one centralized place. You can use Retool to create a simple app that pulls relevant fields from your CRM and use Revv&#x2019;s APIs to create a custom NDA in a few clicks.</p><figure class="kg-card kg-image-card"><img src="https://lh5.googleusercontent.com/U3BAXth4G2rrgUqBjMF4gqOnH5rATbtUVjij59crEgbNEFsFZ2FkRSwYmz85g1zoRILcNS7qq0YetT2eSSQYwYmqwHGh8pVHGMzENb-E1lMCA34DnmBWwp7jFLhN0zUf0RYTTtla" class="kg-image" alt="Build simple and effective document workflow automation with Revv &amp; Retool" loading="lazy"></figure><h2 id="tutorial-create-a-retool-nda-workflow-app-with-revv">Tutorial: create a Retool NDA workflow app with Revv</h2><p>If you already have Revv and Retool accounts, you can connect them in minutes using Retool&#x2019;s <a href="https://retool.com/integrations/rest-api">REST API integration</a> as shown below.</p><figure class="kg-card kg-image-card"><img src="https://lh6.googleusercontent.com/r6G5lTRuujAXXhLFh7lJiZ8HBuXN-L0VFV0o27ESlNE2BK3gZEu-PRSC9YKMTSGSCwkxKKIbXXVaMZhDlDeAaByEo-_C5W2hhNlJje1ev4Bv88mQFLxcw_YjaW1n3D2LvqSV4CFO" class="kg-image" alt="Build simple and effective document workflow automation with Revv &amp; Retool" loading="lazy"></figure><p><br>By integrating with the Revv API, you can access any of Revv&#x2019;s many API-based actions within Retool to create simple CRUD applications. Some examples of Revv APIs that might be useful:</p><ol><li><strong>GET/ </strong><a href="https://build.revv.so/#c8420090-500f-46e1-8aac-bce88d13c4a9">List All Documents</a></li><li><strong>GET/ </strong><a href="https://build.revv.so/#e8e01b4f-6478-470e-bf3b-5d4f88a87838">Document By ID</a></li><li><strong>POST/ </strong><a href="https://build.revv.so/#09dbf885-683e-4513-a94b-5bd261e285b9">Create Document</a></li><li><strong>POST/ </strong><a href="https://build.revv.so/#0eb5b734-2afe-4c33-b0e1-73888e0bbcad">Send Document to Fill &amp; Esign</a></li></ol><p>You can also pull data from Revv to create dashboards and take bulk actions from right inside a Retool app. </p><p>To build an app on top of Revv:</p><ol><li>Connect your REST API in Retool</li><li>Write relevant queries to pull data from Revv</li><li>Create a custom UI with <a href="https://retool.com/use-case/react-drag-and-drop-app-builder-depr">Retool&#x2019;s drag-and-drop components</a></li></ol><p>You can then build your custom UI to work with Revv according to your business&#x2019;s back-office document needs. In Revv&#x2019;s sample app, we connect Revv-Retool-Salesforce to pull our users&#x2019; information and Revv document actions inside one central dashboard, so we can create and send Revv NDA documents to users in Salesforce. &#xA0;</p><p>Retool comes with a <a href="https://docs.retool.com/docs/salesforce-integration">native integration with Salesforce</a> that lets you use Salesforce Object Query Language (SOQL) to query our Salesforce data.<br></p><figure class="kg-card kg-image-card"><img src="https://lh4.googleusercontent.com/ffAFFteiKQANjlJJkmwYOh4wuEzfECZsXcarqvTdzHRE3ksZeaNYgS4Cv24dJZ8JW9L9_6pj8G_SrqGJabxwPaaEbhnoitHTREdDF79UDDTqMRFS_LmgdDQaJl3gFi0yOG1rdwQ7" class="kg-image" alt="Build simple and effective document workflow automation with Revv &amp; Retool" loading="lazy"></figure><p><br>Each row in the table represents a customer to whom the NDA needs to be sent. This information is required to create NDAs (and other business documents) within Revv using <a href="https://www.revv.so/templates?search=NDA">Revv&#x2019;s templates</a>. Just select the rows for which the NDA needs to be generated, then select the folder name (created in Revv) where the NDA needs to be drafted and stored. Choose &#x2018;Create document action&#x2019; from the list and click &#x2018;Proceed&#x2019;. </p><figure class="kg-card kg-image-card"><img src="https://lh6.googleusercontent.com/UoomkOptnSv6m9d5cPlWnJMFRQ1dTQvmFYQWFHpTNOpRI9RR1BBaxdrtLjJN4VhqPuzf-aV5flBihHXkTkZ1WqEfk01y9bc1nIR19Ku5yS7UO8f8GhGeHjJZmkXdYd1pRCA4iqMc" class="kg-image" alt="Build simple and effective document workflow automation with Revv &amp; Retool" loading="lazy"></figure><blockquote>Note: every time a new Opportunity is created in Salesforce, the information automatically updates in the table due to the smooth Salesforce-Retool-Revv integration.</blockquote><p>The created document(s) will be visible in the selected folder within Revv.</p><figure class="kg-card kg-image-card"><img src="https://lh6.googleusercontent.com/h6-GrKHSouVkNgyMTIra5alRS8y9cnuS7HQwuMVzqiGscLTPnTnLyvXG3SFxyRN2GuOs8zfqCZy3MOi9T2XmdD-hHCZQimpVRDs06k4EoWSm_Fc7JxTVCaW6h9tqtrw7YNCCU9Ff" class="kg-image" alt="Build simple and effective document workflow automation with Revv &amp; Retool" loading="lazy"></figure><p>You can click and open the documents, edit them further if needed, and send them to other teams for approval&#x2014;or to the customer for final review and eSignature.</p><p>The above integration workflow can be applied to different document use cases. You can, for example: </p><ul><li><strong>Get documents approved in no time.</strong> The action for &#x2018;Send for Acceptance&#x2019; can be triggered for the same list of documents using Retool and Revv. All you need to do is select the required action to be initiated and the tool does the remaining steps for you.</li></ul><figure class="kg-card kg-image-card"><img src="https://lh3.googleusercontent.com/CDB4Xb085N0BUd7Rmkt02ZgehoeGNrTp9YaS9iLt8FIFos6vEBkkYQgnwbwx4PEZ4hY-YLWQFVAMiVEPR4Iu-JCgKZBSxYIpSFR8KLRp6Vk_EaTfk9UlPiEEmu0VKMPrCpbFmKcs" class="kg-image" alt="Build simple and effective document workflow automation with Revv &amp; Retool" loading="lazy"></figure><ul><li><strong>Sign documents within minutes.</strong> Select the documents that need to go out for signature, select &#x2018;Send for eSign&#x2019;, and click &#x2018;Proceed&#x201D;. The trigger will initiate the action and send out a document to respective parties for eSigning.</li></ul><p>And voila! You have completed the overall document process. </p><p><a href="https://revv.retool.com/embedded/public/1127bca5-876d-4c1d-8c9f-b56942a68e07">Check out the demo for the above use cases</a> and let us know if you have any questions: @<a href="https://twitter.com/Revv_so">Revv_so</a>, <a href="https://twitter.com/retool">@retool</a> <br><br><br></p>]]></content:encoded></item><item><title><![CDATA[How to build a Super Subscription Center in Retool using Stripe and Sync Inc.]]></title><description><![CDATA[This tutorial walks how to build a subscription management center using Retool, Stripe, and Sync Inc.]]></description><link>https://retool.com/blog/how-to-build-a-super-subscription-center-in-retool-using-stripe-and-sync-inc/</link><guid isPermaLink="false">60df075d17ec827590febfcd</guid><category><![CDATA[tutorial]]></category><category><![CDATA[integration]]></category><dc:creator><![CDATA[Justin G.]]></dc:creator><pubDate>Mon, 05 Jul 2021 20:49:27 GMT</pubDate><media:content url="https://retool.com/blog/content/images/2021/07/Retool---Stripe---Sync-Inc-Cover.png" medium="image"/><content:encoded><![CDATA[<img src="https://retool.com/blog/content/images/2021/07/Retool---Stripe---Sync-Inc-Cover.png" alt="How to build a Super Subscription Center in Retool using Stripe and Sync Inc."><p>Let&apos;s build a tool to manage Stripe subscriptions using Retool. The app will allow you to search through all your subscriptions, see all the associated current and upcoming invoices, charges, and products for your customer all in one, clean view. Then you can begin to take actions like exporting invoices or canceling subscriptions:</p><figure class="kg-card kg-image-card"><img src="https://docs.syncinc.so/assets/retool-subs/001_subscription_center_end_state.png" class="kg-image" alt="How to build a Super Subscription Center in Retool using Stripe and Sync Inc." loading="lazy"></figure><p>While Retool does come with a <a href="https://docs.retool.com/docs/stripe-integration">Stripe API integration</a>, configuring a Retool app to search and retrieve data through the Stripe API is tedious. You&apos;ll still need to handle pagination, caching, and running multiple, sequential API calls.</p><p>Luckily, Sync Inc replicates all your Stripe data to a Postgres database so you can use Retool&apos;s first class support for SQL to work with your Stripe data. In this tutorial you&apos;ll learn how this all works together to make building your Stripe subscription tools easy.</p><h2 id="stripe-setup">Stripe Setup</h2><p>You&apos;ll need a Stripe account that contains active subscriptions to build this Retool app. If you don&apos;t have any active subscriptions in your LIVE Stripe account, you can easily add some fake ones in your TEST account (in fact - building a <code>staging</code> version of this app using your Stripe account in TEST mode is highly recommended since you&apos;re working with sensitive data).</p><h3 id="create-test-subscriptions">Create test subscriptions</h3><p>To get going, add a couple test subscriptions to your Stripe account:</p><p><strong>Step 1:</strong> Login to your <a href="https://dashboard.stripe.com/dashboard">Stripe dashboard</a> and put your account into <em>TEST MODE</em> by flipping the <strong>View test data</strong> switch.</p><figure class="kg-card kg-image-card"><img src="https://docs.syncinc.so/assets/retool-subs/002_turn_on_test_mode.png" class="kg-image" alt="How to build a Super Subscription Center in Retool using Stripe and Sync Inc." loading="lazy"></figure><p><strong>Step 2:</strong> Create a recurring product by going to the product page, clicking <strong>+ Add Product</strong>, and filling out the form to create a new product. Double check that the product is configured to be <strong>Recurring</strong>:</p><figure class="kg-card kg-image-card"><img src="https://docs.syncinc.so/assets/retool-subs/003_recurring_product.png" class="kg-image" alt="How to build a Super Subscription Center in Retool using Stripe and Sync Inc." loading="lazy"></figure><p><strong>Step 3:</strong> Finally, create a new customer with a subscription to the product you just created. To do so, click the <strong>Actions</strong> button on the customer page and select <strong>Create Subscription</strong>:</p><figure class="kg-card kg-image-card"><img src="https://docs.syncinc.so/assets/retool-subs/004_create_subscription.png" class="kg-image" alt="How to build a Super Subscription Center in Retool using Stripe and Sync Inc." loading="lazy"></figure><p>Repeat the process by creating a couple more customers with recurring subscriptions.</p><h3 id="generate-a-restricted-stripe-api-key">Generate a restricted Stripe API key</h3><p>Sync Inc requires an API key to sync all your Stripe data in real-time. As a best practice, we recommend providing Sync Inc with a <a href="https://stripe.com/docs/keys">restricted API key</a>. To generate a restricted API key:</p><p><strong>Step 1:</strong> Navigate to the <a href="https://dashboard.stripe.com/test/apikeys">Stripe API keys page</a> by selecting <strong>Developers</strong> in the left navigation and clicking <strong>API keys</strong>. Then click the <strong>+ Create restricted key</strong> button.</p><figure class="kg-card kg-image-card"><img src="https://docs.syncinc.so/assets/retool-subs/005_create_restricted_api_key.png" class="kg-image" alt="How to build a Super Subscription Center in Retool using Stripe and Sync Inc." loading="lazy"></figure><p><strong>Step 2:</strong> Give your key a name (something like &quot;sync inc&quot; will do just fine). Then provide this new key with the following permissions:</p><ul><li><strong>READ</strong> access to everything</li><li><strong>READ &amp; WRITE</strong> access to <strong>Webhooks</strong></li><li><strong>No</strong> access to the <strong>CLI</strong></li></ul><p>You can get more details by reading <a href="https://docs.syncinc.so/stripe/reference#create-a-stripe-api-key">Sync Inc&apos;s reference for Stripe</a>.</p><p><strong>Step 3:</strong> Finally, click the <strong>Create Key</strong> button and keep this new restricted API key handy as you move on to set up Sync Inc.</p><h2 id="sync-inc-setup">Sync Inc Setup</h2><p>With your Stripe API key created, you can now setup Sync Inc to replicate Stripe to a Postgres database:</p><p><strong>Step 1:</strong> Create or Login to your <a href="https://app.syncinc.so/signup">Sync Inc account</a>.</p><p><strong>Step 2:</strong> Connect your Stripe account to Sync Inc by going through the tutorial or clicking the <strong>Add database</strong> button and selecting <strong>Stripe</strong>.</p><figure class="kg-card kg-image-card"><img src="https://docs.syncinc.so/assets/retool-subs/008_add_database.png" class="kg-image" alt="How to build a Super Subscription Center in Retool using Stripe and Sync Inc." loading="lazy"></figure><p><strong>Step 3:</strong> You&apos;ll be prompted to enter your Stripe API key. Then, in the destination section, select to have a <strong>New Sync Inc database</strong> generated. Finally, click <strong>Create</strong>.</p><figure class="kg-card kg-image-card"><img src="https://docs.syncinc.so/assets/retool-subs/006_create_sync_inc_db.png" class="kg-image" alt="How to build a Super Subscription Center in Retool using Stripe and Sync Inc." loading="lazy"></figure><p><strong>Step 4:</strong> Sync Inc will immediately provision you a Postgres database and begin syncing all your Stripe data to it (if you&apos;re using a TEST API key, then Sync Inc will only sync your TEST data for free, forever). You&apos;ll be provided with credentials for you new database:</p><figure class="kg-card kg-image-card"><img src="https://docs.syncinc.so/assets/retool-subs/007_sync_db_created.png" class="kg-image" alt="How to build a Super Subscription Center in Retool using Stripe and Sync Inc." loading="lazy"></figure><h2 id="retool-resource-setup">Retool Resource Setup</h2><p>Now, add your Sync Inc database to Retool <a href="https://docs.retool.com/docs/connecting-your-database">like any other Postgres database</a>:</p><p><strong>Step 1:</strong> In a new tab, log into your <a href="https://retool.com/">Retool dashboard</a>. In the top menu bar click <strong>Resources</strong> and then the blue <strong>Create New</strong> button.</p><p><strong>Step 2:</strong> Select <strong>Postgres</strong> from the list of resource types.</p><p><strong>Step 3:</strong> Enter the name for your resource (i.e. &quot;Stripe&quot;) and then enter the <strong>Host</strong>, <strong>Port</strong>, <strong>Database name</strong>, <strong>Database username</strong>, and <strong>Password</strong> for your Sync Inc database. You can copy and paste these from Sync Inc. Then click the blue <strong>Create resource</strong> button.</p><figure class="kg-card kg-image-card"><img src="https://docs.syncinc.so/assets/retool-subs/009_enter_db_cred.png" class="kg-image" alt="How to build a Super Subscription Center in Retool using Stripe and Sync Inc." loading="lazy"></figure><p><strong>Step 4:</strong> Retool will confirm that your resource was created. Click <strong>Back ro resources</strong> for now.</p><h2 id="retool-app-setup">Retool App Setup</h2><p>With Stripe successfully connected to Retool using Sync Inc, we are ready to build an app that shows all your subscriptions, invoices, and charges in one clean view.</p><p>First, get the app set up in Retool.</p><p><strong>Step 1:</strong> On the Retool app page, click the blue <strong>Create new</strong> button and select <strong>Create a blank app</strong>:</p><figure class="kg-card kg-image-card"><img src="https://docs.syncinc.so/assets/retool-subs/010_create_blank_app.png" class="kg-image" alt="How to build a Super Subscription Center in Retool using Stripe and Sync Inc." loading="lazy"></figure><p><strong>Step 2:</strong> Give your app a name. Something like <em>Super Subscription Center</em> will work just fine and then click <strong>Create app</strong>:</p><figure class="kg-card kg-image-card"><img src="https://docs.syncinc.so/assets/retool-subs/011_name_app.png" class="kg-image" alt="How to build a Super Subscription Center in Retool using Stripe and Sync Inc." loading="lazy"></figure><p><strong>Step 3:</strong> You&apos;ll now see a blank Retool app in edit mode. To start building the app, drag and drop a text field into the header. Then, in the inspector drawer on the right, enter <code># Super Subscription Center</code> as the value to give your app a name:</p><figure class="kg-card kg-image-card"><img src="https://docs.syncinc.so/assets/retool-subs/012_add_title.gif" class="kg-image" alt="How to build a Super Subscription Center in Retool using Stripe and Sync Inc." loading="lazy"></figure><p>This is the basic flow for adding new components to your app:</p><ol><li><strong>Drag and drop</strong> the visual components into your app.</li><li><strong>Configure</strong> the data and interactions for the component.</li><li><strong>Adjust</strong> layout and polish the UI of the component.</li></ol><p>You&apos;ll follow this construction pattern as you build the rest of the app from here on out.</p><h2 id="searchable-subscriptions">Searchable subscriptions</h2><p>With all the foundations in place, you are ready to start building the core functionality of your app - starting with a searchable table that shows all the current subscriptions.</p><h3 id="scaffold-the-ui">Scaffold the UI</h3><p>Drag and drop the components that will make up this section of the app onto the canvas:</p><p>First, drag a <strong>Container</strong> component onto the canvas. Resize it to cover about half the width of the app.</p><p>Then drag and drop a text input field and place it at the top of the container. This will be your search bar. In the inspector on the right, edit the component&apos;s <strong>Label</strong> to be <code>Email</code> and then to make it look nice select <code>search</code> as the <strong>Left icon</strong>:</p><figure class="kg-card kg-image-card"><img src="https://docs.syncinc.so/assets/retool-subs/013_add_search_bar.png" class="kg-image" alt="How to build a Super Subscription Center in Retool using Stripe and Sync Inc." loading="lazy"></figure><p>Drag and drop a <strong>table</strong> component under your newly created search bar and position it to fill up the container. At the end, your app will look something like this:</p><figure class="kg-card kg-image-card"><img src="https://docs.syncinc.so/assets/retool-subs/014_add_table.png" class="kg-image" alt="How to build a Super Subscription Center in Retool using Stripe and Sync Inc." loading="lazy"></figure><h3 id="query-for-subscriptions">Query for subscriptions</h3><p>To add the underlying Stripe data to your app, you&apos;ll simply query your Sync Inc database using SQL. To step into this paradigm, let&apos;s add a simple set of data with search. Then, we&apos;ll refine the query to pull in the exact data you need.</p><p><strong>Step 1:</strong> Open up the bottom panel and create new query by clicking <strong>+ New</strong> and selecting <strong>Resource query</strong>:</p><figure class="kg-card kg-image-card"><img src="https://docs.syncinc.so/assets/retool-subs/015_add_new_query.png" class="kg-image" alt="How to build a Super Subscription Center in Retool using Stripe and Sync Inc." loading="lazy"></figure><p><strong>Step 2:</strong> Select the <strong>Stripe Postgres</strong> database you created earlier as the resource, then enter the SQL statement below:</p><pre><code class="language-sql">select
	customer.id as &quot;cus_id&quot;,
	customer.name,
	customer.email,
	subscription.id as &quot;sub_id&quot;,
	subscription.status,
	subscription.current_period_end,
	subscription.collection_method
from customer
left join subscription
	on customer.id = subscription.customer_id;
</code></pre><p>When you click the <strong>Preview</strong> button you&apos;ll see that this query pulls in key details about your customers as well as the customer&apos;s associated subscriptions via a <code>JOIN</code> with the <code>subscription</code> table.</p><figure class="kg-card kg-image-card"><img src="https://docs.syncinc.so/assets/retool-subs/016_preview_query.png" class="kg-image" alt="How to build a Super Subscription Center in Retool using Stripe and Sync Inc." loading="lazy"></figure><p><strong>Step 3:</strong> This query looks good for now, so click the <strong>Save &amp; Run</strong> button and then name the query <code>get_subscriptions</code> by clicking on the query in the list on the left.</p><p><strong>Step 4:</strong> To pull the data from <code>get_subscriptions</code> into the table in your app, open the right inspector, select your table in the canvas, and then in the <strong>data</strong> field enter <code>{{get_subscriptions.data}}</code>. The double brackets (i.e. <code>{{}}</code>) indicate that you are using JavaScript in Retool. Then, the <code>get_subscriptions.data</code> is retrieving the data from your query.</p><p>You&apos;ll immediately see the data from your query populate your table:</p><figure class="kg-card kg-image-card"><img src="https://docs.syncinc.so/assets/retool-subs/017_add_data_to_table.png" class="kg-image" alt="How to build a Super Subscription Center in Retool using Stripe and Sync Inc." loading="lazy"></figure><p><strong>Step 5:</strong> You&apos;re now querying data from Stripe (using SQL!) and populating that data to your table in the UI of your app. Now, add search. To do so, add the following <code>WHERE</code> clause to your <code>get_subscriptions</code> query:</p><pre><code class="language-sql">select
	customer.id as &quot;cus_id&quot;,
	customer.name,
	customer.email,
	subscription.id as &quot;sub_id&quot;,
	subscription.status,
	subscription.current_period_end,
	subscription.collection_method
from customer
left join subscription
	on customer.id = subscription.customer_id
where subscription.status is not null and ({{ !textinput1.value }} or customer.email::text ilike {{ &quot;%&quot; + textinput1.value + &quot;%&quot; }});
</code></pre><p>This <code>WHERE</code> clause does two things:</p><ul><li>First, it checks if there is a value in the text input box. If there is nothing in the text input, then nothing happens.</li><li>If there is text in the text input, then it uses Postgres <code>ilike</code> to search by the customer&apos;s email.</li></ul><p>When you click <strong>Save &amp; Run</strong> you&apos;ll now see that when you enter text into the text input you search your table:</p><figure class="kg-card kg-image-card"><img src="https://docs.syncinc.so/assets/retool-subs/018_search.gif" class="kg-image" alt="How to build a Super Subscription Center in Retool using Stripe and Sync Inc." loading="lazy"></figure><p><strong>Step 6:</strong> In addition to customer and subscription data, you also want to see some invoicing data. Specifically, you need see the value of the subscription and what products are included. To do so, update your <code>get_subscriptions</code> query to add the following fields:</p><pre><code class="language-sql">select
	customer.id as &quot;cus_id&quot;,
	customer.name,
	customer.email,
	subscription.id as &quot;sub_id&quot;,
	subscription.status,
	subscription.current_period_end,
	subscription.collection_method,
  invoice.amount_due::numeric,
  line_item.description
from customer
left join subscription
	on customer.id = subscription.customer_id
left join invoice
	on subscription.latest_invoice_id = invoice.id
left join invoice_line_item_map
	on invoice.id = invoice_line_item_map.invoice_id
left join line_item
	on invoice_line_item_map.line_item_id = line_item.id
where subscription.status is not null and ({{ !textinput1.value }} or customer.email::text ilike {{ &quot;%&quot; + textinput1.value + &quot;%&quot; }})
</code></pre><p>This will pull in the <code>invoice.amount_due</code> and <code>line_item.description</code> details you need by joining to the <code>invoice</code> and <code>line_item</code> table.</p><p>You&apos;ve now queried for all your data and set up search using SQL.</p><h3 id="clean-up-the-table">Clean up the table</h3><p>As a last step, adjust the UI so it shows the data effectively.</p><p><strong>Step 1:</strong> Select the table and open up the right inspector.</p><p><strong>Step 2:</strong> Simplify the table by removing data that is only helpful to the app - but not your user. In this case, you can drop the <code>cud_id</code> and <code>sub_id</code> columns as well as the <code>subscription end</code> column by clicking the eye icon.</p><p><strong>Step 3:</strong> Rename and format each of the columns in your table by select each column in the inspector, formatting the name of the column, and aligning the data type. For instance, for the <code>amount</code> column you can give the column a friendly name like <code>Amount</code> and then for the data type select <code>USD (cents)</code>:</p><figure class="kg-card kg-image-card"><img src="https://docs.syncinc.so/assets/retool-subs/019_edit_columns.png" class="kg-image" alt="How to build a Super Subscription Center in Retool using Stripe and Sync Inc." loading="lazy"></figure><p>You now have a searchable table that returns data to help you evaluate subscriptions. Now, you&apos;ll bring in the details.</p><h2 id="subscription-details">Subscription details</h2><p>After you select a subscription in the table you just created, you&apos;ll want to see the details of the subscription on the right side of your app. Let&apos;s start with the customer and subscription details card in the top right:</p><figure class="kg-card kg-image-card"><img src="https://docs.syncinc.so/assets/retool-subs/020_subscription_details_section.png" class="kg-image" alt="How to build a Super Subscription Center in Retool using Stripe and Sync Inc." loading="lazy"></figure><p>For this component, you&apos;ll repeat the same construction pattern by first scaffolding the UI, connecting the data, and then cleaning up the interface.</p><h3 id="scaffold-the-ui-1">Scaffold the UI</h3><p>This component is simply a container of text fields that present data about the customer and their subscription in more detail. To lay out the UI, drag and drop a container in the top right portion of the app and add the following placeholder text fields:</p><figure class="kg-card kg-image-card"><img src="https://docs.syncinc.so/assets/retool-subs/021_scaffold_ui.png" class="kg-image" alt="How to build a Super Subscription Center in Retool using Stripe and Sync Inc." loading="lazy"></figure><p>To format the text appropriately, use <a href="https://www.markdownguide.org/cheat-sheet/">Markdown</a>. For instance, for <strong>Customer Name</strong> and <strong>Status</strong> you can format the text as <code>H3</code> by entering the value as <code>### Customer Name</code>.</p><h3 id="query-for-customer-and-subscription-data">Query for customer and subscription data</h3><p>Now, replace the placeholder text with real data from Stripe.</p><p>You can populate the first several fields in the subscription card with data already available in the table to the left. All you need to do is pull those values into the text components.</p><p>Starting with the <code>Customer Name</code> text component, select the component and in the inspector on the right enter the value as <code>### {{table1.selectedRow.data.name}}</code>:</p><figure class="kg-card kg-image-card"><img src="https://docs.syncinc.so/assets/retool-subs/022_update_customer_name.png" class="kg-image" alt="How to build a Super Subscription Center in Retool using Stripe and Sync Inc." loading="lazy"></figure><p>This tiny JavaScript statement pulls the <code>name</code> value from whatever row is selected in <code>table1</code>. For your end user, this means the text box will immediately show the name of any customer they select in the table.</p><p>You can repeat this same data access pattern for the next several fields:</p><h4 id="status">Status</h4><pre><code class="language-js">### {{table1.selectedRow.data.status === &quot;active&quot; ? &quot;Active&quot; : table1.selectedRow.data.status === &quot;canceled&quot; ? &quot;Canceled&quot; : &quot;Issue&quot;}}
</code></pre><p>For status, you&apos;ll again pull the value from the selected row in <code>table</code> and utilize a <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator">ternary operator</a> to show a user-friendly value for the status of the subscription.</p><h4 id="customer-email-customer-id">Customer Email | Customer ID</h4><pre><code class="language-js">{{table1.selectedRow.data.email}} | {{table1.selectedRow.data.cus_id}}
</code></pre><p>Here is a nice example of how you can easily concatenate string values in a text component.</p><h4 id="subscription-plan">Subscription Plan</h4><pre><code>{{table1.selectedRow.data.description}}
</code></pre><p>For the subscription plan you can simply return the description for the selected row in <code>table1</code> as normal.</p><hr><p>You&apos;ve now populated as much of the data in the subscription card as you can from the existing data in <code>Table1</code>. For the rest of the data in this card, you&apos;ll need to write new queries.</p><p>Turn your attention to the <strong>Since:</strong>, <strong>Spent:</strong>, <strong>MRR:</strong>, and <strong>&#x394;:</strong> fields:</p><figure class="kg-card kg-image-card"><img src="https://docs.syncinc.so/assets/retool-subs/023_customer_details.png" class="kg-image" alt="How to build a Super Subscription Center in Retool using Stripe and Sync Inc." loading="lazy"></figure><p>For these fields, you want to pull in specific details about the customer so you can easily see how valuable the customer is. To get this data, you&apos;ll need to write a new query (<code>get_customer</code>) as well as a helper function (<code>calc_customer_stats</code>).</p><p>Starting with the <code>get_customer</code> query, open the bottom drawer and click to create a new query against your Sync Inc database. Then enter the following SQL statement:</p><pre><code class="language-sql">SELECT
  customer.id,
  customer.created as &quot;cus_created&quot;,
  invoice.number,
  invoice.amount_paid::int as &quot;amount_paid&quot;,
  invoice.period_start,
  invoice.period_end,
  invoice.created as &quot;inv_created&quot;
FROM customer
left join invoice
	on customer.id = invoice.customer_id
where customer.id = {{table1.selectedRow.data.cus_id}}
order by invoice.number asc;
</code></pre><p>This query pulls in some more information about the customer and then performs a <code>JOIN</code> with the <code>invoice</code> table to pull in all their billing history. The <code>WHERE</code> clause at the end filters the data for just the one customer selected in <code>Table1</code>. Last, the <code>ORDER BY</code> clause allows us to sort the results to make working with the data easier in the helper functions.</p><p>Click the <strong>Save &amp; Run</strong> button and then name the query <code>get_customer</code>:</p><figure class="kg-card kg-image-card"><img src="https://docs.syncinc.so/assets/retool-subs/024_get_customer.png" class="kg-image" alt="How to build a Super Subscription Center in Retool using Stripe and Sync Inc." loading="lazy"></figure><p>You now have the raw data required to calculate the rest of the fields. While you could use some additional SQL to calculate the specific values for each field, you&apos;ll use a JavaScript helper function here.</p><p>To build your helper function, click to create a new query and select <strong>JavaScript Query</strong>:</p><figure class="kg-card kg-image-card"><img src="https://docs.syncinc.so/assets/retool-subs/025_new_js_query.png" class="kg-image" alt="How to build a Super Subscription Center in Retool using Stripe and Sync Inc." loading="lazy"></figure><p>For this helper function, you want to iterate through the array of data returned from your <code>get_customer</code> query to calculate some metrics:</p><pre><code class="language-js">let index = get_customer.data.amount_paid.length;

let toDollars = (num) =&gt; {
  return (num / 100).toLocaleString(&quot;en-US&quot;, {
    style: &quot;currency&quot;,
    currency: &quot;USD&quot;,
  });
};

return {
  mrr: toDollars(get_customer.data.amount_paid[index - 1]),
  spend: toDollars(get_customer.data.amount_paid.reduce((i, o) =&gt; i + o)),
  growth: toDollars(
    get_customer.data.amount_paid[index - 1] - get_customer.data.amount_paid[0]
  ),
};
</code></pre><p>This helper function does two things. First, it formats numbers into currency strings using the <code>toDollars()</code> function.</p><p>Next, it calculates the metrics you need as follows:</p><ul><li><strong>MRR:</strong> is calculated as the amount paid on the most recent invoice (assuming all your customer only have subscription products)</li><li><strong>Spend:</strong> is a summation of all the revenue from the customer.</li><li><strong>Growth (i.e. &#x394;):</strong> is simply the difference in value of the most resent invoice compared to the first invoice.</li></ul><p>Click <strong>Save</strong> and then name the query <code>calc_customer_stats</code>.</p><figure class="kg-card kg-image-card"><img src="https://docs.syncinc.so/assets/retool-subs/026_calc_stats.png" class="kg-image" alt="How to build a Super Subscription Center in Retool using Stripe and Sync Inc." loading="lazy"></figure><p>You want this helper function to run anytime the <code>get_customer</code> query is run. So as a last step, open the <code>get_customer</code> query and have the <code>calc_customer_stats</code> query trigger on success:</p><figure class="kg-card kg-image-card"><img src="https://docs.syncinc.so/assets/retool-subs/027_on_success_trigger.png" class="kg-image" alt="How to build a Super Subscription Center in Retool using Stripe and Sync Inc." loading="lazy"></figure><p>With your metrics calculated you can now add these values to the subscription card:</p><h4 id="since">Since</h4><pre><code>{{moment(get_customer.data.cus_created[0]).format(&quot;MMMM DD, YYYY&quot;)}}
</code></pre><p>Here you use <code>moment.js</code> to format the <code>datetime</code> value returned from your <code>get_customer</code> query.</p><h4 id="mrr">MRR</h4><pre><code>{{calc_customer_stats.data.mrr}}
</code></pre><h4 id="spent">Spent</h4><pre><code>{{calc_customer_stats.data.spend}}
</code></pre><h4 id="growth-aka-%CE%B4">Growth (a.k.a &#x394;)</h4><pre><code>{{calc_customer_stats.data.growth}}
</code></pre><hr><p>There is just one more field to add to your subscription card: details around when the customer will receive their next invoice.</p><p>This last field requires one additional query that pulls in the <code>upcoming_invoice</code> details for the customer. Luckily, this data lives in your Sync Inc database.</p><p>Click to create another SQL query against your Sync Inc database and enter the following SQL statement:</p><pre><code class="language-sql">SELECT
    upcoming_subscription_invoice.next_payment_attempt as &quot;next_invoice_date&quot;,
    (upcoming_subscription_invoice.amount_due/100.00)::money as &quot;next_invoice_amount&quot;
from upcoming_subscription_invoice
where upcoming_subscription_invoice.subscription_id = {{table1.selectedRow.data.sub_id}};
</code></pre><p>Sync Inc maintains tables that show the <em>temporary</em> state of upcoming objects you would otherwise need to use the Stripe API for. In this case, you&apos;re pulling in the <code>time period</code> and <code>amount</code> of the next invoice associated to the subscription.</p><p>Click the <strong>Save &amp; Run</strong> button and name this query <code>get_next_invoice</code>:</p><figure class="kg-card kg-image-card"><img src="https://docs.syncinc.so/assets/retool-subs/028_get_next_invoice.png" class="kg-image" alt="How to build a Super Subscription Center in Retool using Stripe and Sync Inc." loading="lazy"></figure><p>Now, pull this data into your app&apos;s interface by updating the last remaining value in your subscription card with the data retrieved in <code>get_next_invoice</code>:</p><pre><code>Next Invoice on **{{moment(get_next_invoice.data.next_invoice_date[0]).format(&quot;MMMM Do YYYY&quot;)}}** for **{{get_next_invoice.data.next_invoice_amount[0]}}**
</code></pre><p>To make this value stand out, format the text to be green by using the style options in the inspector:</p><figure class="kg-card kg-image-card"><img src="https://docs.syncinc.so/assets/retool-subs/029_finish_sub_card.png" class="kg-image" alt="How to build a Super Subscription Center in Retool using Stripe and Sync Inc." loading="lazy"></figure><hr><p>The subscription card is now complete. When a user selects a subscription in the table, the details of the customer including key metrics and upcoming invoice details are immediately shown. All with SQL.</p><figure class="kg-card kg-image-card"><img src="https://docs.syncinc.so/assets/retool-subs/030_current_state_of_app.gif" class="kg-image" alt="How to build a Super Subscription Center in Retool using Stripe and Sync Inc." loading="lazy"></figure><h2 id="invoices-charges-and-products">Invoices, charges, and products</h2><p>Now, you&apos;ll round out the app by showing the customer&apos;s prior invoices, charges, and products.</p><figure class="kg-card kg-image-card"><img src="https://docs.syncinc.so/assets/retool-subs/031_invoice_list.png" class="kg-image" alt="How to build a Super Subscription Center in Retool using Stripe and Sync Inc." loading="lazy"></figure><p>You&apos;ll be able to pull in all this data in one additional SQL query and then display it in your app using Retool&apos;s <code>List View</code> component.</p><p>Keeping with the process, first you&apos;ll scaffold the UI components.</p><h3 id="scaffold-the-ui-2">Scaffold the UI</h3><p>The <code>List View</code> component allows you to show a list of items. It can dynamically show more or fewer items depending on how the underlying data changes.</p><p>Drag and drop the <code>List View</code> component onto your app and then add a <code>Container</code> component to the top of the list. As soon as you drop the <code>Container</code> into the <code>List View</code> component you&apos;ll see it&apos;s duplicated three times. This quickly gives you a sense of how the <code>List View</code> component works by showing a new UI component for each item in an array of data.</p><p>You&apos;ll make the <code>List View</code> component dynamic later, but for now you&apos;re just scaffolding the front-end. So to make things easier select the <code>List View</code> component and in the inspector adjust the <strong>Number of rows</strong> to one for the time being.</p><figure class="kg-card kg-image-card"><img src="https://docs.syncinc.so/assets/retool-subs/032_set_invoice_list_to_1.png" class="kg-image" alt="How to build a Super Subscription Center in Retool using Stripe and Sync Inc." loading="lazy"></figure><p>Now, add a couple more UI components to the <code>Container</code> you created:</p><figure class="kg-card kg-image-card"><img src="https://docs.syncinc.so/assets/retool-subs/033_scaffold_invoice_list.png" class="kg-image" alt="How to build a Super Subscription Center in Retool using Stripe and Sync Inc." loading="lazy"></figure><p>The only flourish here (in addition to the emojis &#x1F44F;) is the styling on the container with the payment information. You can do the same by selecting the container and editing the style as you did previously with the green text.</p><h3 id="query-for-invoices-payments-and-products">Query for invoices, payments, and products</h3><p>Open the bottom drawer and create a new query for your Sync Inc database. Enter the following SQL statement:</p><pre><code class="language-sql">SELECT
  invoice.id as &quot;inv_id&quot;,
  invoice.subscription_id as &quot;sub_id&quot;,
  invoice.number,
  invoice.created,
  invoice.status,
  (invoice.amount_paid /100.00)::money as &quot;amount&quot;,
  invoice.hosted_invoice_url,
  line_item.description as &quot;line_item_description&quot;,
  (price.unit_amount/100.00)::money as &quot;unit amount&quot;,
  price.recurring_interval,
  product.name as &quot;product&quot;,
  charge.id as &quot;charge_id&quot;,
  charge.description as &quot;charge_description&quot;,
  (charge.amount/100.00)::money as &quot;charge_amount&quot;,
  charge.status as &quot;charge_status&quot;,
  charge.created as &quot;charge_created&quot;
from invoice
left join charge
	on invoice.charge_id = charge.id
left join invoice_line_item_map
	on invoice.id = invoice_line_item_map.invoice_id
left join line_item
	on invoice_line_item_map.line_item_id = line_item.id
left join price
	on line_item.price_id = price.id
left join product
	on price.product_id = product.id
where invoice.subscription_id = {{table1.selectedRow.data.sub_id}}
group by invoice.id, charge.id, line_item.description, price.unit_amount, product.name, price.recurring_interval
order by invoice.number desc;
</code></pre><p>This SQL query performs a <code>SELECT</code> across several tables that you <code>JOIN</code> together in order to pull in invoices, line_items, prices, products, and charges. Then, you use the <code>WHERE</code> statement to filter the data down to just the one subscription you have selected in <code>Table1</code>.</p><p>Click to <strong>Save &amp; Run</strong> the query and name it <code>get_current_invoices</code>:</p><figure class="kg-card kg-image-card"><img src="https://docs.syncinc.so/assets/retool-subs/034_get_current_invoices.png" class="kg-image" alt="How to build a Super Subscription Center in Retool using Stripe and Sync Inc." loading="lazy"></figure><h3 id="clean-up-the-list">Clean up the list</h3><p>You&apos;ll now link the data from your <code>get_current_invoices</code> query to your UI components.</p><p>Select the <strong>Invoice #</strong> placeholder and replace the value with:</p><pre><code>### &#x1F9FE; Invoice #: {{get_current_invoices.data.number[i]}}
</code></pre><p>This statement should look familiar to you with the exception of the <code>[i]</code> at the end. So let&apos;s step through this:</p><ul><li>The <code>###</code> is markdown notation for an <code>H3</code> text format.</li><li>The double brackets then tell Retool we&apos;ll be using JavaScript. The <code>get_current_invoices.data.number</code> pulls in the invoice number from the <code>get_current_invoices</code> query. Because we pull in all the invoices in the <code>get_current_invoices</code> query, this value is actually an array.</li><li>So finally, the <code>[i]</code> is extracting just one value from that array. The variable <code>i</code> is used by the <code>List View</code> component so that you request the same index from the array for every item in the same <code>container</code> in the list. So for instance, the first <code>container</code> in the list will use index 0 and then the second will use index 1. So on and so forth.</li></ul><p>After you enter the value, you should see your text component update correctly:</p><figure class="kg-card kg-image-card"><img src="https://docs.syncinc.so/assets/retool-subs/035_set_list_value.png" class="kg-image" alt="How to build a Super Subscription Center in Retool using Stripe and Sync Inc." loading="lazy"></figure><p>To finish the job, you now need to match the value from the <code>get_current_invoices</code> query to the remaining values in the UI:</p><!--kg-card-begin: html--><table>
<thead>
<tr>
<th>UI Text Component</th>
<th>Value</th>
</tr>
</thead>
<tbody>
<tr>
<td>Invoice Date and Time</td>
<td><code>{{moment(get_current_invoices.data.created[i]).format(&quot;MMM DD, YYYY - hh:mm A&quot;)}}</code></td>
</tr>
<tr>
<td>Invoice Status</td>
<td><code>#### {{get_current_invoices.data.status[i] === &quot;paid&quot; ? &quot;&#x1F7E2; Paid&quot; : &quot;&#x26A0;&#xFE0F; Issue&quot;}}</code></td>
</tr>
<tr>
<td>Invoice Amount</td>
<td><code>{{get_current_invoices.data.amount[i]}}</code></td>
</tr>
<tr>
<td>Invoice Plan</td>
<td><code>{{get_current_invoices.data.line_item_description[i]}}</code></td>
</tr>
<tr>
<td>Payment</td>
<td><code>##### Payment &#x2192; {{get_current_invoices.data.charge_amount[i]}}</code></td>
</tr>
<tr>
<td>Payment Status</td>
<td><code>##### {{get_current_invoices.data.charge_status[i] === &quot;succeeded&quot; ? &quot;&#x2705; Success&quot; : &quot;&#x26A0;&#xFE0F; Issue&quot;}}</code></td>
</tr>
<tr>
<td>Payment Date and Time</td>
<td><code>{{moment(get_current_invoices.data.charge_created[i]).format(&quot;MMM DD, YYYY - hh:mm A&quot;)}}</code></td>
</tr>
<tr>
<td>Payment Description</td>
<td><code>{{get_current_invoices.data.charge_description[i]}}</code></td>
</tr>
</tbody>
</table><!--kg-card-end: html--><p>You&apos;ll now have a clean representation of your customer&apos;s invoices:</p><figure class="kg-card kg-image-card"><img src="https://docs.syncinc.so/assets/retool-subs/036_final_list_item.png" class="kg-image" alt="How to build a Super Subscription Center in Retool using Stripe and Sync Inc." loading="lazy"></figure><p>Finally, you want the number of list items displayed in your list to change depending on the number of invoices associated to a subscription. To do so, select the <code>List View</code> component and change the <strong>Number of rows</strong> in the inspector to <code>{{get_current_invoices.data.inv_id.length}}</code>:</p><figure class="kg-card kg-image-card"><img src="https://docs.syncinc.so/assets/retool-subs/037_final_list_setting.png" class="kg-image" alt="How to build a Super Subscription Center in Retool using Stripe and Sync Inc." loading="lazy"></figure><h2 id="add-interactions">Add interactions</h2><p>Your Super Subscription Center is now pulling in all the data you need to find a customer&apos;s subscription and evaluate it. Now, add two interactions to your app to start exploring how to mutate your Stripe data using Sync Inc and Retool.</p><h3 id="view-invoice">View invoice</h3><p>To get a hang of interactions, let&apos;s start with a simple button that allows a user to see an invoice.</p><p>First, drag and drop a button into the container of one of your invoice items.</p><p>Then, in the inspector change the text of the button to read <code>View Invoice</code>.</p><p>Finally, to make the button trigger an event click the <strong>+ New</strong> link in the <strong>Event Handlers</strong> section of the inspector. Configure the event as follows:</p><figure class="kg-card kg-image-card"><img src="https://docs.syncinc.so/assets/retool-subs/038_add_view_invoice.png" class="kg-image" alt="How to build a Super Subscription Center in Retool using Stripe and Sync Inc." loading="lazy"></figure><ul><li><strong>Event:</strong> Click</li><li><strong>Action:</strong> Go to URL</li><li><strong>URL:</strong> <code>{{get_current_invoices.data.hosted_invoice_url[i]}}</code></li></ul><p>Since you are already pulling in the URL for the invoice in the <code>get_current_invoices</code> query, you just need to associate this URL to the button.</p><p>With the event configured, click the <strong>View Invoice</strong> button you just created and you&apos;ll see the invoice load in a new tab.</p><h3 id="cancel-subscription">Cancel subscription</h3><p>So far, you&apos;ve read all your Stripe data using Sync Inc. Sync Inc is a read-only database, so to mutate your Stripe data, you&apos;ll use the Stripe API.</p><p>For instance, to cancel a subscription, you&apos;ll simply make a <code>DELETE</code> request against the Stripe API.</p><p>Any mutation you make will then propagate to your Sync Inc database in about 1 second.</p><p>Let&apos;s step through it. To get started, add a new Stripe API resource to Retool:</p><p><strong>Step 1:</strong> Open up the bottom drawer and create a new resource query. In the <strong>Resource</strong> dropdown, select <strong>Create new resource</strong>:</p><figure class="kg-card kg-image-card"><img src="https://docs.syncinc.so/assets/retool-subs/039_add_api_resource.png" class="kg-image" alt="How to build a Super Subscription Center in Retool using Stripe and Sync Inc." loading="lazy"></figure><p><strong>Step 2:</strong> You&apos;ll be taken to Retool&apos;s resource page. Select to create a new <strong>Stripe</strong> resource.</p><figure class="kg-card kg-image-card"><img src="https://docs.syncinc.so/assets/retool-subs/040_select_stripe.png" class="kg-image" alt="How to build a Super Subscription Center in Retool using Stripe and Sync Inc." loading="lazy"></figure><p><strong>Step 3:</strong> Give the new resource a name (something like <em>Stripe API</em>) and enter your API key. Here, you&apos;ll want to generate a new restricted API key for Retool that includes WRITE permissions as well.</p><p><strong>Step 4:</strong> Click <strong>Create resource</strong> and then navigate back to your app.</p><figure class="kg-card kg-image-card"><img src="https://docs.syncinc.so/assets/retool-subs/041_create_resource.png" class="kg-image" alt="How to build a Super Subscription Center in Retool using Stripe and Sync Inc." loading="lazy"></figure><p>Back in your Super Subscription Center app, open the bottom drawer, and click to create a new resource.</p><p>Select the <strong>Stripe API</strong> resource you just created and then select the <strong>DELETE</strong> <strong><code>/v1/subscriptions/{subscription_exposed_id}</code></strong> as the operation.</p><p>You want to delete the subscription that the user has selected, so in the <strong>PATH</strong> section, set the <strong>subscription_exposed_id</strong> to <code>{{table1.selectedRow.data.sub_id}}</code>.</p><p>After the user deletes a subscription, you also want to update the subscription&apos;s status in the app to close the feedback loop and let the user know the subscription has indeed been canceled. To do so, set the <code>get_subscriptions</code> query to trigger when your Stripe API call succeeds.</p><p>All together, your Stripe API query to delete subscriptions will look like this:</p><figure class="kg-card kg-image-card"><img src="https://docs.syncinc.so/assets/retool-subs/042_configure_stripe_call.png" class="kg-image" alt="How to build a Super Subscription Center in Retool using Stripe and Sync Inc." loading="lazy"></figure><p>Deleting a subscription is a big action. So click the <strong>Advanced</strong> tab and make the following changes:</p><figure class="kg-card kg-image-card"><img src="https://docs.syncinc.so/assets/retool-subs/043_stripe_advanced.png" class="kg-image" alt="How to build a Super Subscription Center in Retool using Stripe and Sync Inc." loading="lazy"></figure><ul><li>Select to <strong>Show a confirmation modal before running</strong>. This will ensure the user needs to confirm the action so they wield this power with caution.</li><li>Then, set the <strong>Run triggered queries after</strong> to <code>1000</code> - this will ensure that your Sync Inc database is fully up-to-date before you refresh the data on the page to confirm the subscription has been deleted.</li></ul><p>With your advanced settings in place, click to <strong>Save</strong> the query and name it <code>cancel_subscription</code>.</p><p>Now, drag a button into the subscription card and configure it to trigger the <code>cancel_subscription</code> query:</p><figure class="kg-card kg-image-card"><img src="https://docs.syncinc.so/assets/retool-subs/044_setup_delete_button.png" class="kg-image" alt="How to build a Super Subscription Center in Retool using Stripe and Sync Inc." loading="lazy"></figure><ul><li>Edit the button&apos;s text to read <strong>Cancel Subscription</strong></li><li>Create an event handler that triggers the <code>cancel_subscription</code> query</li><li>To improve the UX, disable the button if the subscription is already canceled by setting <strong>Disable when</strong> to <code>{{table1.selectedRow.data.status === &quot;canceled&quot;}}</code></li><li>Finally, make the button red to let the user know this is dangerous.</li></ul><p>Now, see your full Super Subscription Center working by searching for a subscription, evaluating it, and then deleting it:</p><figure class="kg-card kg-image-card"><img src="https://docs.syncinc.so/assets/retool-subs/045_final_app.gif" class="kg-image" alt="How to build a Super Subscription Center in Retool using Stripe and Sync Inc." loading="lazy"></figure><h2 id="next-steps">Next Steps</h2><p>You now have an internal tool purpose built for your team to manage subscriptions!</p><p>With Retool, you didn&apos;t need to create a React application, worry about deployments, authentication, or even fuss with HTML, CSS, and boilerplate JavaScript. And with Sync Inc, you were able to pull in all your Stripe data in just a couple SQL queries. No need to created nested API call, deal with pagination, or fuss with client side search logic.</p><p>From here, you can continue to customize your app. Bring in data from your production database and join it to Stripe seamlessly (Sync Inc can put your Stripe data in <em>your</em> database). And of course, when you are ready, add your production API key to Sync Inc, change your resource in Retool, and start working with real customer subscriptions.</p>]]></content:encoded></item><item><title><![CDATA[What is low code? A comprehensive guide]]></title><description><![CDATA[Low code helps you build apps faster with less engineering work. This is a complete guide for low code use cases, benefits, drawbacks, and more.]]></description><link>https://retool.com/blog/what-is-low-code/</link><guid isPermaLink="false">60d511b717ec827590febee2</guid><category><![CDATA[guide]]></category><dc:creator><![CDATA[Kevin Garcia]]></dc:creator><pubDate>Fri, 25 Jun 2021 16:00:00 GMT</pubDate><media:content url="https://retool.com/blog/content/images/2021/06/thomas-tastet-hSODeSbvzE0-unsplash.jpg" medium="image"/><content:encoded><![CDATA[<img src="https://retool.com/blog/content/images/2021/06/thomas-tastet-hSODeSbvzE0-unsplash.jpg" alt="What is low code? A comprehensive guide"><p>Low code and no code have equal amounts of hype and skepticism. </p><p>On the one hand, it&#x2019;s clear low code has market traction: in April 2021, a provider of low code automation software, <a href="https://fortune.com/2021/04/21/uipath-ipo-valuation-stock-price/">IPO&#x2019;d at $31 billion</a>. And Gartner predicts that by 2024, <a href="https://www.forbes.com/sites/ilkerkoksal/2020/04/29/the-rise-of-low-code-app-development/">more than 65%</a> of application development activity will come from low code application development platforms.</p><p>On the other, there is still developer skepticism: according to an <a href="https://evansdata.com/press/viewRelease.php?pressID=272">Evans Data report</a>, one in five developers never use low code. And anecdotally. And anecdotally, many developers express <a href="https://www.reddit.com/r/learnprogramming/comments/ba82qm/should_you_learn_how_to_use_lowcode_platforms/">a similar sentiment</a>:</p><figure class="kg-card kg-image-card"><img src="https://lh5.googleusercontent.com/9tY8fQgqAEbv-snvuFQZBR0kFjvh51e2KcDKhmFokrZnB6vGvGAw4dNV30A5U_3MES4RWjvi_A1i_rJE0uNYupL7wvBZduo0qTJrt2QN22WEGmaczF_v9jXlc1l5LWt9P2nPjDzW" class="kg-image" alt="What is low code? A comprehensive guide" loading="lazy"></figure><p>Our thesis? Although low code may not be disrupting or replacing software development, it is definitely transforming it.</p><p>To that effect, we thought it&#x2019;d be helpful to offer <strong>an overview of the low code landscape</strong>. We&#x2019;ll dig into the basics, the controversies, and what we think the future holds. We&#x2019;ll answer questions such as:</p><ul><li>What is low code?</li><li>What&#x2019;s the difference between low code and no code?</li><li>What are the major use cases for low code?</li><li>What are the benefits and drawbacks of low code?</li><li>What does low code say about the future of software development?</li></ul><p><strong>This article is most useful for non-developers, but anyone interested in a primer is welcome.</strong></p><h2 id="what-is-low-code-a-primer"><strong>What is low code? A primer</strong></h2><p>Low code is the development of software via a visual drag-and-drop interface. The logic is simple and the UI is intuitive; ideally, it offers possibilities for customizing the majority of components with code, but the idea is that most of the work can be done without spending time on writing custom code.</p><h3 id="the-three-components-of-low-code"><strong>The three components of low code</strong></h3><p>A low code development platform consists of three major components.</p><ol><li><strong>A visual integrated development environment (IDE): </strong>This is the core of a low code development platform. It&#x2019;s usually a drag-and-drop interface that developers use to model workflows and declare logic. They can also use it to add hand-written code. Typically, developers use the IDE to create most of the app, then customize the last mile with custom code.</li></ol><figure class="kg-card kg-image-card"><img src="https://retool.com/blog/content/images/2021/06/Low-code.gif" class="kg-image" alt="What is low code? A comprehensive guide" loading="lazy" width="600" height="390"></figure><p><strong>2. Connectors:</strong> Depending on the low code platform, various kinds of connectors plug the platform into a variety of back-end services, databases, and APIs. These provide extensibility and increased functionality. Developers tend to prioritize connectors because the usefulness of a low code platform is directly tied to what it integrates with. Some early low code platforms are short on connection functionality, leaving developers with with unnecessary workarounds or missed requirements.</p><p><strong>3. Application lifecycle manager:</strong> If a low-code platform promises robust results that match those produced by coding, then it needs to come with quality lifecycle management: tools for debugging, deployment, and maintenance of code across testing, staging, and production (necessary steps for building any app, no matter how you build it).</p><h3 id="what-does-low-code-do"><strong>What does low code do?</strong></h3><p>The primary goal of low code is to reduce the amount of &#x201C;hand-coding&#x201D; (i.e., code done from scratch) and increase the amount of code reused and apps developed. Low code is highly composable, meaning that when you use the visual IDE to construct a component, it&#x2019;s easy to then reuse that component in different situations.<br>The reason why it&#x2019;s called &#x201C;low code&#x201D; (as opposed to &#x201C;no code,&#x201D; which we&#x2019;ll get into in the next section) is that low code development is split roughly 80:20 between visual coding and &#xA0;hand-coding. You build about 80% of your app using a low code UI, then hand-code the rest&#x2014;usually last-mile specifications, as necessary. </p><p>In the below video, for instance, our developer advocate, Chris Smith, creates an internal tool app for managing sales inventory stored in MongoDB: a vast majority using Retool&#x2019;s visual interface, then final customizations using in-line JavaScript.</p><figure class="kg-card kg-embed-card"><iframe width="200" height="113" src="https://www.youtube.com/embed/Tn-hxs6eXYY?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></figure><h2 id="low-code-vs-no-code-the-differences-and-similarities"><strong>Low code vs. no code: the differences and similarities</strong></h2><p>Let&#x2019;s bust a myth right from the get-go: low code and no code are <em>not</em> the same thing. At a fundamental level, the technologies are different.</p><h3 id="what-is-no-code"><strong>What is no code?</strong></h3><p>If low code is the minimization of hand-coding, then no code is the elimination of hand-coding.</p><p>No code also uses a visual workflow builder and IDE, but it doesn&#x2019;t require developers to hand-code at all, a feature that poses both advantages and disadvantages. </p><p>At first glance, that difference seems minor. If anything, it seems advantageous for no code&#x2014;why code a little when you could skip coding altogether? But it turns out that difference makes all the difference.</p><h3 id="low-code-vs-no-code-the-small-differences"><strong>Low code vs. no code: the small differences</strong></h3><p>The first differences you&#x2019;ll notice between low code and no code involve differences among target users, design, and UI. Though these differences aren&#x2019;t minor, they make low code and no code applications look slightly different.</p><ul><li><strong>Target user</strong>: Low code is for semi-technical business users and technical developers, whereas no code is just for business users. Since low code still involves some hand-coding, many low code tools still require software developers to either handle development or take it over the last mile.</li><li><strong>Design</strong>: Low code platforms still depend on hard code for software architecture, whereas no code tends to have model-driven workflows and declarative logic.</li><li><strong>UI</strong>: Low code provides greater flexibility, enabling developers to add hand-written code to visually developed components, whereas no code is a closed system that tends to lock users into the abilities of the no code platform in question. The ramifications of this lock-in vary depending on what platform you choose.</li></ul><p>If these were the only differences, you could imagine low code and no code someday converging or a vendor offering a platform that effectively does both. This ignores the fact, however, that low code and no code are different at a fundamental level.</p><h3 id="low-code-vs-no-code-the-big-difference"><strong>Low code vs. no code: the big difference</strong></h3><p>No code abstracts away code, whereas low code retains the ability to code. Though that difference might seem small on the surface, the ramifications are profound.</p><p>Low code is a natural extension of web frameworks, component libraries, and the long tradition of borrowing pre-built work and adding in nuances that are unique to your situation. Developers have always strived for more composability, and entire businesses have been built on this desire: think API-first companies like Twilio and package managers like npm.</p><p>Low code is less a disruption and more a continuation of this tradition. Low code helps developers move faster, both by helping them make decisions and follow through on actions more efficiently. That speed, however, doesn&#x2019;t sacrifice anything&#x2014;low code respects the fact that developers will still need to customize.</p><p>The ability to customize is a DNA-level difference, and it has ripple effects. No code aims at a new audience with a new proposal: turn all of the code into UIs, logic, and simple steps, such that non-technical business users (or &#x201C;citizen developers&#x201D;) can now &#x201C;code.&#x201D;</p><p>No code, by its very nature, is opinionated and inflexible. While both low code and no code manifest similarities (namely the drag-and-drop visual IDE mentioned above), they approach different problems and solve them so distinctly that the possible end results are entirely different.</p><h2 id="5-low-code-use-cases"><strong>5 low code use cases</strong></h2><p>Low code use cases range from the complex (such as full-on app development) to the relatively simple (such as landing page design).</p><h3 id="1-internal-tools"><strong>1. Internal tools</strong></h3><p>Internal tools aren&#x2019;t flashy, but developers spend a lot of time working on them. According to our research in <a href="https://retool.com/blog/state-of-internal-tools-2021/">The state of internal tools in 2021</a>, developers spend nearly a third of their time (30%) building internal applications.</p><p>It&#x2019;s not that this work isn&#x2019;t impactful (it is; for companies with more than ten employees, one in three employees are using internal apps a developer has built). It&#x2019;s that internal tools aren&#x2019;t always how developers want to spend their time nor how businesses want to spend their development resources.</p><p>With low code platforms, you can develop internal tools faster and even enable some non-developers to build them, too.</p><h3 id="2-ui-design"><strong>2. UI design</strong></h3><p>Some low code platforms let you build an intuitive user interface from drag-and-drop components. This is especially useful for back-end developers who may have to build dashboards but aren&#x2019;t familiar with UX best practices.</p><p>This use case bleeds into others on the list. A popular internal tool, for instance, is a sales dashboard that helps sales reps track deal flow. The sales team might ask a back-end developer to make such a tool, and while the back-end developer can easily handle the data, they might not be able to present that data in an intuitive way.</p><p>With low code, a back-end developer can easily spin up a UI that they can layer onto the data they retrieve.</p><h3 id="3-integration-and-automation"><strong>3. Integration and automation</strong></h3><p>Platforms like <a href="https://www.uipath.com/">UiPath</a>, <a href="https://www.workato.com/">Workato</a>, and <a href="https://appian.com/">Appian</a> provide ways to integrate apps and automate the processes that connect and flow between them.</p><p>Many companies, large enterprises especially, are stuck with legacy infrastructure (think SAP, Oracle, Citrix) that they can&#x2019;t afford to rip out and replace. These companies, however, are increasingly feeling the heat from nimble startups relying on custom-built tools, SaaS apps, and APIs.</p><p>With low code, enterprises can achieve some of that speed by connecting and automating those legacy systems. Enterprises can then adjust and iterate much like startups can, leaving them less vulnerable to disruption.</p><h3 id="4-basic-app-development"><strong>4. Basic app development</strong></h3><p>Low code tools like <a href="https://bubble.io/">Bubble.io</a> enable non-developers to spin up entire web apps, and low code tools like <a href="https://memberful.com/">Memberful</a> enable non-developers to add specific features to their apps (in Memberful&#x2019;s case, membership).</p><p>Some of the results of Bubble.io, according to their <a href="https://bubble.io/showcase">showcase page</a>, include:</p><ul><li><a href="https://www.teeming.ai/">Teeming</a>, a cloud-based tool that helps remote teams bond via interactive work sessions</li><li><a href="https://residentstreet.com/">ResidentStreet</a>, a platform that connects people looking for &#x201C;mid-term accommodations&#x201D; (1-11 months) with furnished properties</li><li><a href="https://incomee.co/">Incomee</a>, an accounting tool for freelancers</li></ul><p>This use case is one where the difference between low code and no code really matters. Be aware of the customization limitations of no code as your app scales.</p><h3 id="5-mvps-and-prototypes"><strong>5. MVPs and prototypes</strong></h3><p>The minimum viable product (MVP) methodology, originating with famed startup expert Eric Ries, asks developers and startups to ship products faster, get feedback earlier, and build with customers in mind. MVPs (and prototypes, a similar idea) are a great use case for low code.</p><p>The idea is this: don&#x2019;t invest tons of development resources into an app or feature you&#x2019;re unsure of. When you&#x2019;re building an app from scratch, the necessary up-front investment is immense. You have to think about hosting, the back-end, the front-end, the UI, maintenance, monitoring analytics&#x2026; the list goes on. </p><p>Those are all distractions from what your primary focus needs to be at this early stage: your user and what they need. Low code helps you delay those important business decisions, so that you can make them later, when you have a stable business and customer traction. </p><p>With low code, you can get most of the way toward your final product, test it with your customers, and then, and only then, make an investment you&#x2019;re confident in.</p><h2 id="why-low-code-benefits-and-drawbacks"><strong>Why low code? Benefits and drawbacks</strong></h2><p>Low code has a variety of benefits and drawbacks, all of which depend on which low code platform(s) you choose and how you use it.</p><h3 id="low-code-benefits"><strong>Low code benefits</strong></h3><p>Though low code comes with many benefits, they generally come down to three core ones.</p><p><strong>Increase time to value (TTV</strong>)</p><p>Compared to hand-coding, low code development gets developers from idea to execution to production much faster.</p><p>According to <a href="https://resources.kintone.com/citizen-developer-business-application-report-2017">Kintone research</a>, developers using low code tools &#x201C;get applications out the door faster than large IT departments. They turn around their required applications in a matter of weeks, or a couple of months. Only 17% report turnaround times exceeding three months.&#x201D;</p><p><strong>Improve developer productivity and efficiency</strong></p><p>Many low code platforms come with pre-built components, and most come with the ability to make components you can reuse, making low code development eminently composable. Developers can borrow, build, and reuse components as they go, making them more efficient over time.</p><p>Improved productivity and efficiency is backed up by research, both in terms of sheer speed and the ability to meet previously unmet demand via improved efficiency:</p><ul><li><a href="https://go.forrester.com/blogs/why-you-need-to-know-about-low-code-even-if-youre-not-responsible-for-software-delivery/">Forrester analyst John Rymer</a> says that low code platforms &#x201C;have the potential to make software development as much as 10 times faster than traditional methods.&#x201D;</li><li><a href="https://go.caspio.com/state-of-custom-business-applications-2020?&amp;_ga=2.46840167.1975902204.1623099469-1417118847.1623099469">Caspio research</a> shows that 63% of organizations using low code platforms have the skills and resources to fulfill the demand for custom apps, whereas only 41% of organizations not using low code can say the same. Similarly, 61% (as opposed to 38%) of organizations using low code typically deliver custom apps on time, on scope, and on budget.</li></ul><p>With low code, developers can ship faster.<br></p><p><strong>Better use of existing staff</strong></p><p>Developers are in short supply.</p><p>According to the <a href="https://www.bls.gov/ooh/computer-and-information-technology/software-developers.htm#tab-6">Bureau of Labor Statistics</a>, &#x201C;employment of software developers...is projected to grow 22% from 2019 to 2029, much faster than the average for all occupations.&#x201D; Demand for software developers is already outpacing supply, despite the ever-increasing need for software. This is backed up by<a href="https://www.techrepublic.com/article/cio-jury-83-of-cios-struggle-to-find-tech-talent/"> TechRepublic research</a>, which found that 83% of CIOs struggle to find tech talent.</p><p>Low code allows already hired developers to move faster (as covered in the previous benefit), but it also allows non-developers, such as operations staff, to take part in development. Companies can produce more software with existing staff.</p><h3 id="drawbacks"><strong>Drawbacks</strong></h3><p>Low code isn&#x2019;t without its drawbacks, but you can defeat many of these by choosing a modern low code platform that fits your use case.</p><h3 id="vendor-lock-in"><strong>Vendor lock-in</strong></h3><p>Perhaps the top reason developers fear low code tools is the risk of vendor lock-in. Whereas hand-coding is inherently flexible and extensible, low code platforms have the potential to lock developers into a limited ecosystem.</p><p>This drawback varies depending on which low code platform you choose. Legacy low code application development platforms, many of which resemble no code more than low code, can absolutely lock you into their ecosystems. Modern low code platforms, however, tend to be built on the aforementioned tradition of composability, meaning that there&#x2019;s an inherent respect for the need to customize.</p><p>Retool, for instance, is built on Javascript and SQL, meaning developers versed in those languages can easily add on to what they develop in Retool.</p><h3 id="shadow-it-and-governance"><strong>Shadow IT and governance</strong></h3><p>IT might be resistant to low code adoption.</p><p>According to <a href="https://www.forbes.com/sites/jasonbloomberg/2017/07/20/the-low-codeno-code-movement-more-disruptive-than-you-realize/?sh=4db92168722a">Jason Bloomberg</a>, an IT industry analyst, &#x201C;IT has been telling business stakeholders for years that the six month/million dollar plan is the only way to build enterprise software,&#x201D; but now, <a href="https://www.forbes.com/sites/jasonbloomberg/2017/07/20/the-low-codeno-code-movement-more-disruptive-than-you-realize/?sh=4db92168722a">according to Simon Chan</a>, Founder and CEO of DigiVue Consulting, &#x201C;the same systems can be implemented by smaller players at a fraction of the price and in a fraction of the time,&#x201D; which &#x201C;has leveled the playing field.&#x201D;</p><p>What might appear to be a level playing field to a business user, however, can appear to be a threat to IT. IT has long had to resist the encroachment of so-called &#x201C;shadow IT,&#x201D; and a low code program might appear to add fuel to that fire. Imagine, the IT admin might fear, if employees were not only adopting SaaS tools without permission but were <em>building</em> apps without permission?</p><p>This isn&#x2019;t IT being controlling. There are serious ramifications, especially in terms of security, from letting more people build software. And they&#x2019;re not wrong &#x2014; according to <a href="https://resources.kintone.com/citizen-developer-business-application-report-2017">Kintone research</a>, more than one in four surveyed organizations have no citizen development policy of any kind in place. The problem is less with low code itself and more with how companies implement and scale low code programs. Eventually, governance becomes necessary.</p><h3 id="scalability"><strong>Scalability</strong></h3><p>Some developers have an instinctual resistance to low code platforms based on the assumption that any code that isn&#x2019;t hand-written can&#x2019;t be robust enough to scale. This assumption isn&#x2019;t true&#x2014;low code apps can scale to enterprise proportions&#x2014;but the nugget of truth is that many low code platforms aren&#x2019;t built with scale in mind.</p><p>OutSystems, for instance, in a surprising moment of <a href="https://www.outsystems.com/blog/posts/what-is-low-code/">vendor honesty</a>, notes that &#x201C;When it&#x2019;s time to scale, integrate with existing systems, or perform under extreme conditions like a mobile banking app on Black Friday, the [low code] application could buckle under the weight of functional and nonfunctional requirements. If an application built with low-code needs updating or if the underlying technology needs changing, good luck.&#x201D;</p><p>The solution here tends to be picking a low code platform that <em>can </em>develop apps that can scale. And scalability tends to come from leaning into low code&#x2019;s advantages. No code apps are much more likely to suffer from scalability problems because they aren&#x2019;t customized. Use low code to build your foundation but hand-code your way to scalability.</p><h2 id="how-low-code-will-shape-the-future-of-software-development"><strong>How low code will shape the future of software development</strong></h2><p>Low code development will not replace traditional software development. Full stop. But it will change software development&#x2014;and in some areas, the change will be dramatic.</p><h3 id="low-code-will-add-more-abstraction"><strong>Low code will add (more) abstraction</strong></h3><p>Low code, understood historically, is another layer of abstraction between developer and code.</p><p>You can trace the roots of low code back to the <a href="https://www.techopedia.com/definition/24308/fourth-generation-programming-language-4gl">fourth-generation programming languages</a> (think Visual Basic and PowerBuilder) and computer-aided software engineering (CASE), rapid application development (RAD), and business process management (BPM) tools from the 1990s. These early tools and platforms tried to fulfill the same promise modern low code does: build real apps in less time and with less code.</p><p>It took another couple of decades for the brand name to form, however. The first popular instance of the phrase &#x201C;low code&#x201D; occurred in a <a href="https://www.forrester.com/report/New+Development+Platforms+Emerge+For+CustomerFacing+Applications/-/E-RES113411">2014 Forrester report</a> and has been on a steady rise since.</p><figure class="kg-card kg-image-card"><img src="https://lh6.googleusercontent.com/wK6K8ADGrKPs6bWBlDUaxJvIOLSJFrmXpTGmUlJlEShboZzgpvZgbF1Cj5Sk-iIV2NgFEtBZO-0vDQ_IhAp1cYKBBAPt2FSEJ6oJz0-mA0R22C1UstsVY-VrrbJQF8_-H1n__zqN" class="kg-image" alt="What is low code? A comprehensive guide" loading="lazy"></figure><p><em>Searches for &#x201C;low-code app development platform&#x201D; on Google Trends</em></p><p>If you want to get technical, you can trace low code back through the history of code, too. The history of code is itself a history of abstraction: every programming language is a more human-readable version of binary code. What&#x2019;s unreadable to us now, like FORTRAN, was a big step toward readability back in the day. As Nacho Iacovino, developer advocate at Clerk, wrote in a <a href="https://retool.com/blog/nacho-iacovino-on-the-future-of-internal-tools/">guest post</a> for us, even modern options like React are &#x201C;a low(er)-code option, compared with the alternative of vanilla JavaScript which would take many more lines of code to achieve the same results.&#x201D;</p><p>In the same way, low code is another step toward readability and up the ladder of abstraction. Viewed this way, low code isn&#x2019;t a departure from history so much as it is a continuation.</p><h3 id="low-code-will-add-not-disrupt"><strong>Low code will add, not disrupt</strong></h3><p>A major reason developers are skeptical of low code is the hype. A simple Google search reveals the scale of the hype. &#x201C;Is low code the future&#x201D; returns over 2 million results, and articles on the topic include titles like:</p><ul><li>Why Low-Code Automation Is The Tech Of The Future</li><li>Why low-code and no-code are the future of enterprise applications</li><li>The Future of Software is No Code and Low Code Programming</li><li>Low Code Is The Future Of Application Development</li><li>Low-code programming &#x2013; the next frontier in app development</li></ul><figure class="kg-card kg-image-card"><img src="https://retool.com/blog/content/images/2021/06/Low-collage.png" class="kg-image" alt="What is low code? A comprehensive guide" loading="lazy" width="806" height="423" srcset="https://retool.com/blog/content/images/size/w600/2021/06/Low-collage.png 600w, https://retool.com/blog/content/images/2021/06/Low-collage.png 806w" sizes="(min-width: 720px) 720px"></figure><p>Realistically, low code isn&#x2019;t <em>the</em> future; it&#x2019;s part of the future. Internal tool development, our specialty, provides a perfect example.</p><p>Internal tool development (which developers spend 30% of their time doing) is an ideal use for low code. Though two out of three developers <a href="https://retool.com/blog/state-of-internal-tools-2021/">default to building from scratch</a> (instead of using a spreadsheet or a SaaS tool), 88% of developers that <em>do </em>build internal apps using low code plan to keep building that way in the future. In other words, most developers have a need that low code solves for but aren&#x2019;t using low code&#x2014;but once they try low code, they keep using it.</p><p>More than likely, low code won&#x2019;t disrupt, displace, or destroy software development. Instead, developers will try particular low code tools, especially ones specialized for specific use cases, and replace hand-coding development when it benefits them to do so.</p><h3 id="low-code-will-expand-the-circle-of-software-development"><strong>Low code will expand the circle of software development</strong></h3><p>According to <a href="https://chiefmartec.com/2021/03/marketing-superpowers-ai-code-transform-every-marketer-maker/">Scott Brinker, VP of Platform Ecosystem at HubSpot</a>, the best way to think of low code is to think of it as a way to expand the circle of people who can develop software.</p><p>Low code, as well as no code, enables more people to build software. This bears out in the research so far. According to <a href="https://resources.kintone.com/citizen-developer-business-application-report-2017">Kintone research</a>, many non-IT low code developers are power users &#x201C;embedded within line-of-business departments building the applications.&#x201D;</p><p>Power users are becoming more powerful, so powerful that they can now develop software. According to <a href="https://searchsoftwarequality.techtarget.com/news/252469924/Low-code-goes-mainstream-to-ease-app-dev-woes">John Rymer, an analyst at Forrester</a>, he can &#x201C;see maybe 100 million people&#x2014;business people&#x2014;engaged in producing software.&#x201D;</p><figure class="kg-card kg-image-card"><img src="https://retool.com/blog/content/images/2021/06/Low-code.svg" class="kg-image" alt="What is low code? A comprehensive guide" loading="lazy" width="1000" height="563"></figure><p>That means that companies don&#x2019;t need to hire software developers for every software need. That doesn&#x2019;t mean that developer hiring will slow, but that companies can reallocate developer hiring away from some projects (say, internal tool development) and toward customer-facing features as well as complex and unique software development problems.</p><h2 id="the-impact-of-low-code-on-startups-and-enterprises"><strong>The impact of low code on startups and enterprises</strong></h2><p>Often lost in the discussion of low code and its effects is context: low code looks very different to startups and enterprises.</p><h3 id="low-code-and-startups"><strong>Low code and startups</strong></h3><p>Startups are time- and resource-strapped, which is the primary reason they adopt low code tools. With low code, their existing engineers can move faster and make a greater impact in three primary ways.</p><p><strong>Internal tools will be easier to make</strong></p><p>With low code tools, developers can re-focus from internal tool development toward customer-facing features. For startups, who may only have a couple of developers, this time and effort are precious. With product-market fit still on the horizon, early-stage startups need as many engineering resources as possible dedicated to iteration.<br></p><p><strong>Back-end developers will be able to develop better services</strong></p><p>Back-end developers are well-versed in systems and functionality but not in UX design. With low code, even back-end developers can create pretty, intuitive apps and tools. The ever-elusive 10x full-stack developer becomes more attainable if you can enable back-end developers to create things only a front-end developer would normally be able to make.<br></p><p><strong>Validation will come sooner in a startup&#x2019;s life</strong></p><p>As we covered above, low code enables companies to rapidly build MVPs and prototypes. This is especially useful for startups, who may still be settling on a product and pursuing product-market fit. The right low code tool will also enable rapid iteration, such that startups can debut and improve products before dedicating much in the way of hand-coding.</p><p>Curtis Cummings, a Senior Software Engineer at On Deck, said in an <a href="https://retool.com/blog/new-developments-curtis-cummings-on-deck/">interview he did with Retool</a>, &#x201C;I&#x2019;ve been on a couple of different projects in my consulting career where we had this perfect spec, we built it perfectly to spec, went out to users and it fell flat on its face because all the assumptions that backed up that spec weren&#x2019;t validated or grounded in user data.&#x201D;</p><p>With low code, startups are less likely to fall on their faces.</p><h3 id="low-code-and-enterprises"><strong>Low code and enterprises</strong></h3><p>Enterprises are not, generally, in want of resources like startups are, but they are often stuck with technical debt. </p><p>Enterprise technical debt, driven by prior investments in now legacy technologies, is encouraging many enterprises to adopt low code and pursue modernization. There are three primary use cases for enterprises and low code.<br></p><p><strong>Improved agility</strong></p><p>Low code tools, especially those from the RPA and workflow automation fields, will enable enterprises to move more nimbly. Enterprise technology stacks are often overly complex, old, and slow. Low code automation tools can reduce the negative effects of that complexity. These tools can automate the steps involved in the processes these legacy tools run.</p><p>Software robots, offered by low code RPA tools, for instance, can <a href="https://www.uipath.com/blog/rpa-use-cases-part-one-unattended-robots">run unattended</a>, meaning they can operate in the background, 24/7, handling all the agonizingly manual processes legacy tools typically require.<br></p><p><strong>Modernize and connect legacy technology</strong></p><p>Enterprises are not only stuck with legacy technology; those legacy technologies are themselves often stuck in disparate silos. Connecting your ERPs to your CRMs and back again, for instance, can be a nightmare. Enterprises often face the choice of either living with it and being inefficient or hiring armies of consultants to fix it all, which is expensive.</p><p>With low code, enterprises can modernize their legacy technology stacks without ripping them out and replacing them. Low code tools can layer on top of these tools and create a much more usable, intuitive interface. Business users can then access and use systems they previously would have had to request help from developers to use.<br></p><p><strong>Digital transformation</strong></p><p>Forgive the buzzword, but for enterprises, digital transformation is a serious pursuit. Many enterprises are still operating on paper and, if not paper, so-called &#x201C;digital paper&#x201D; systems &#x2014; technologies that weren&#x2019;t designed with the internet and native digital capabilities in mind.</p><p>In clinical research, for example, as product manager Stephanie Morillo points out in this <a href="https://twitter.com/radiomorillo/status/1405707879810748416">Twitter thread</a>, many organizations still use Excel. Rather than use a modern database tool, enterprises (and their employees) use a tool that lacks version control and can&#x2019;t handle the thousands of rows necessary for their purposes.<br></p><figure class="kg-card kg-embed-card"><blockquote class="twitter-tweet"><p lang="en" dir="ltr">I know we techies joke about ppl using Excel spreadsheets when they need databases but the real-life implications of this are *painful* for employees. It makes work untenable in many cases.<br><br>Enterprises in industries that don&#x2019;t know what we do are suffering like it&#x2019;s 1995.</p>&#x2014; Stephanie Morillo (@radiomorillo) <a href="https://twitter.com/radiomorillo/status/1405708757649301505?ref_src=twsrc%5Etfw">June 18, 2021</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</figure><p>If ever there was a need for low code, this is it.</p><h2 id="low-code-is-in-your-future-even-if-it-isn%E2%80%99t-the-future"><strong>Low code is in your future (even if it isn&#x2019;t </strong><em><strong>the</strong></em><strong> future)</strong></h2><p>Big brain, hot take &#x201C;thought leadership&#x201D; on low code often relies on the phrase &#x201C;the future of,&#x201D; as if software development &#x2014; an already complex and diverse field of technologies and methodologies &#x2014; will somehow evolve into one, simple thing. Well, it won&#x2019;t. That doesn&#x2019;t mean, however, that low code won&#x2019;t create incredible change.</p><p>Low code will transform the field of software development by empowering developers to choose when and where they want to spend time hand-coding. With low code, developers can build less and architect more. As more developers adopt low code, the industry will shift in big, unpredictable ways.</p><p>Full-time developers, armed with low code (or arming business users with low code), can re-focus from solving simple problems to solving complex problems. The effect of this reallocation is hard to understate and hard to predict. Developers<a href="https://www.forbes.com/sites/glennsolomon/2020/06/23/why-developers-are-fueling-the-next-1-trillion-software-wave/?sh=1b904d451a31"> run the world these days</a> (see Stripe, Twilio, Atlassian, Datadog, MongoDB, etc.), so imagine if these <a href="https://www.amazon.com/New-Kingmakers-Developers-Conquered-World-ebook/dp/B0097E4MEU">kingmakers</a> shifted their internal tool development efforts (30% of their time) toward changing the world. And that&#x2019;s only one use case for low code!</p>]]></content:encoded></item><item><title><![CDATA[The best MongoDB GUIs in 2021 (Updated)]]></title><description><![CDATA[This post walks through the best available GUIs for querying and working with your MongoDB data.]]></description><link>https://retool.com/blog/the-best-mongodb-guis-in-2020/</link><guid isPermaLink="false">5edfee19212ec66509ca4f14</guid><dc:creator><![CDATA[Allie Dyer Bluemel]]></dc:creator><pubDate>Thu, 24 Jun 2021 13:38:00 GMT</pubDate><media:content url="https://retool.com/blog/content/images/2020/06/Screen-Shot-2020-06-24-at-9.40-1.png" medium="image"/><content:encoded><![CDATA[<!--kg-card-begin: markdown--><img src="https://retool.com/blog/content/images/2020/06/Screen-Shot-2020-06-24-at-9.40-1.png" alt="The best MongoDB GUIs in 2021 (Updated)"><p><a href="https://www.mongodb.com/">MongoDB</a> is a NoSQL database that <a href="https://insights.stackoverflow.com/survey/2019">more than a quarter of developers</a> use in some capacity. What makes MongoDB and other NoSQL DBs attractive is flexibility; instead of being held to a rigid schema that scales vertically, you can evolve your schema as you grow and scale horizontally. MongoDB went public in 2017 and is worth more than $17 billion today.</p>
<p>Document DBs work through nested key-value pairs instead of relational tables and columns. You&#x2019;re going to need to parse data for your front-end eventually, and with document DBs, your data is already stored in the right format (give or take a .map or .reduce). Working with MongoDB through the command line isn&#x2019;t exactly a cakewalk: This post will walk through the best MongoDB GUIs available for reading from and writing to your MongoDB clusters.</p>
<h2 id="themongoshellversusamongodbgui">The Mongo Shell Versus a MongoDB GUI</h2>
<p>The most basic way to access MongoDB is through <a href="https://docs.mongodb.com/manual/mongo/">the <code>mongo</code> shell</a>; you can use it to query, update data, and complete admin tasks.</p>
<p>It&#x2019;s included in the MongoDB Server installation, so you&#x2019;re all set as long as you&#x2019;re comfortable with shell commands. Traversing objects and writing long queries in the command line can get annoying fast, so using the shell is usually best for quick peeks or admin tasks.</p>
<pre><code>&gt; use sample_analytics
    switched to db sample_analytics
&gt; db.transactions.find({})
   {
   &quot;_id&quot;: &quot;5ca4bbc7a2dd94ee581625eb&quot;,
   &quot;account_id&quot;: 50948,
   &quot;limit&quot;: 10000,
   &quot;products&quot;: [
     &quot;InvestmentStock&quot;,
     &quot;Commodity&quot;,
     &quot;Brokerage&quot;
   ],
   &quot;transaction_info&quot;: [
     {
       &quot;_id&quot;: &quot;5ca4bbc1a2dd94ee58161e14&quot;,
       &quot;account_id&quot;: 50948,
       &quot;transaction_count&quot;: 6,
       &quot;bucket_start_date&quot;: &quot;1991-05-08T00:00:00.000Z&quot;,
       &quot;bucket_end_date&quot;: &quot;2015-10-13T00:00:00.000Z&quot;,
       &quot;transactions&quot;: [
         {
           &quot;date&quot;: &quot;2015-10-08T00:00:00.000Z&quot;,
           &quot;amount&quot;: 2311,
           &quot;transaction_code&quot;: &quot;sell&quot;,
           &quot;symbol&quot;: &quot;nflx&quot;,
           &quot;price&quot;: &quot;104.9154457571513461289214319549500942230224609375&quot;,
           &quot;total&quot;: &quot;242459.5951447767609039374292&quot;
         },
         {
           &quot;date&quot;: &quot;1995-12-15T00:00:00.000Z&quot;,
           &quot;amount&quot;: 4828,
           &quot;transaction_code&quot;: &quot;buy&quot;,
           &quot;symbol&quot;: &quot;aapl&quot;,
           &quot;price&quot;: &quot;1.102632231847472166208490307326428592205047607421875&quot;,
           &quot;total&quot;: &quot;5323.508415359595618454591204&quot;
         },
         ...
       ]
     }
   ]
 },
</code></pre>
<p>It&#x2019;s definitely possible to query your Mongo data exclusively from the command line, but if you&#x2019;re working with even medium-sized datasets, GUIs offer a helpful alternative.</p>
<p>MongoDB GUIs provide a user interface for your MongoDB database that gives you the ability to visualize data and edit queries without the use of shell commands (or with them &#x2014; more on that later).</p>
<p>The best MongoDB GUIs share similar features:</p>
<ul>
<li><strong>A visual query editor</strong>: Click or drag-and-drop elements to create queries.</li>
<li><strong>Query autocomplete</strong>: Auto-suggestions for collections, fields, methods, and operators.</li>
<li><strong>An aggregation framework</strong>: Build queries out step-by-step, test along the way, then export into usable code.</li>
<li><strong>Server and query analytics</strong>: Insights into query and server performance.</li>
<li><strong>Relational database to MongoDB data transfer</strong>: Automate tedious and error-prone data transfers between database types.</li>
</ul>
<p>Below is a list of the best MongoDB GUIs that 2021 has to offer. Each one has features that set it apart from the rest. The best one for you will depend on the scope of your project, the features you need, and your budget.</p>
<h2 id="mongodbcompass">MongoDB Compass</h2>
<p><img src="https://retool.com/blog/content/images/2020/06/image-1-.png" alt="The best MongoDB GUIs in 2021 (Updated)" loading="lazy"><br>
<em>(Image courtesy of MongoDB Compass <a href="https://github.com/mongodb-js/compass/">GitHub</a> Repository)</em></p>
<p><strong>Overview</strong></p>
<p>The creators of MongoDB (Mongo) have their own GUI called <a href="https://www.mongodb.com/products/compass">Compass</a>. It&#x2019;s platform-agnostic and provides a graphical view of your database without the need to use a query language. MongoDB <a href="https://www.mongodb.com/blog/post/compass-now-free-for-all">recently announced</a> that the fully featured Compass GUI is completely free for everyone to use. Plus, the repo is now open-source on <a href="https://github.com/mongodb-js/compass">GitHub</a>.</p>
<p>Some notable MongoDB Compass features include:</p>
<ul>
<li><strong>Schema visualization</strong>: Compass visually displays your collections to help you better understand your datasets.</li>
<li><strong>CRUD visual editor</strong>: Perform CRUD operations within the UI, no need to type queries.</li>
<li><strong>Geospatial data</strong>: Create queries on map data using an intuitive UI with generated results in both graph and JSON document form.</li>
<li><strong>Validation</strong>: Write JSON Schema validation rules using an editor that suggests BSON data types and validation keywords as you write</li>
</ul>
<p><strong>Winning feature: Compass Plugins</strong></p>
<p>One of the best features of the MongoDB Compass GUI is that it has an API for adding plugins. The Compass community has built tons of cool plugins that can generate data for testing, inspect database users, and even check the shard status of the database. If there&#x2019;s a feature you want but a plugin isn&#x2019;t available yet, you can build your own using their <a href="https://github.com/mongodb-js/compass-plugin">plugin template</a>.</p>
<h2 id="tableplus">TablePlus</h2>
<p><img src="https://retool.com/blog/content/images/2021/05/image6.png" alt="The best MongoDB GUIs in 2021 (Updated)" loading="lazy"><br>
<em>(Image courtesy of TablePlus)</em></p>
<p><strong>Overview</strong></p>
<p><a href="https://tableplus.com/">TablePlus</a> is a modern, native GUI tool for relational databases like MySQL, PostgreSQL, SQLite, and NoSQL databases like MongoDB. The TablePlus team consists of founder Henry Pham and Windows developer Raccoon Thai. The team, as well as the community, is also <a href="https://github.com/TablePlus/TablePlus/issues">fairly active on GitHub</a>.</p>
<p>Some notable TablePlus features include:</p>
<ul>
<li><strong>Customizable UI</strong>: There&#x2019;s no need to turn to Mojave. With TablePlus, you can customize your configurations and their appearance</li>
<li><strong>In-line edits</strong>: Edit data rows and table structure with a single click</li>
</ul>
<p><strong>Winning feature: database security</strong></p>
<p>TablePlus promises secure connections. The connection between you and your database is end-to-end encrypted &#x2013;&#x2013; no data is sent to a TablePlus server. Additionally, TablePlus ensures database credentials are stored securely in your device&#x2019;s keychain and comes with built-in SSH. TablePlus also supports multi-step authentication and native libssh.</p>
<h2 id="robo3t">Robo 3T</h2>
<p><img src="https://retool.com/blog/content/images/2020/06/robo3t.png" alt="The best MongoDB GUIs in 2021 (Updated)" loading="lazy"><br>
<em>(Photo courtesy of Robo 3T <a href="https://blog.robomongo.org/robo-3t-1-3/">blog</a>)</em></p>
<p><strong>Overview</strong></p>
<p><a href="https://robomongo.org/">Robo 3T</a> is an open-source, platform-agnostic, lightweight GUI for MongoDB. Formerly known as Robomongo, the company was bought in 2017 by 3T Software Labs and rebranded (Robo 3T also made it open source).</p>
<p>The <a href="https://github.com/Studio3T/robomongo">project</a> continues to be developed and has 8K stars on Github. In that vein, one of the best parts of using this GUI is the large community of users. Loads of tutorials, guides, and forums are available if you get stuck &#x2013; just search.</p>
<p>Some notable Robo 3T features include:</p>
<ul>
<li><strong>Code autocomplete</strong>: While Robo 3T doesn&#x2019;t have the autocompleting prowess of IntelliShell (see Studio 3T below), it does have a useful runtime autocomplete feature that works through an internal virtual machine.</li>
<li><strong>Fast UI</strong>: All operations are done asynchronously, which means the application will never block you from working by freezing up.</li>
</ul>
<p><strong>Winning feature: embedded Mongodb shell</strong></p>
<p>Many of the MongoDB GUIs have <em>emulated</em> <code>mongo</code> shells, but this GUI has an <em>embedded</em> <code>mongo</code> shell. The embedded shell provides increased functionality over an emulated shell because emulators generally run on top of a provided API, whereas an embedded shell works directly with MongoDB.</p>
<br>
<div class="inline-newsletter-form">
    <p><b>Subscribe to the Retool monthly newsletter</b><br>Once a month, we send out top stories (like this one) along with Retool tutorials, templates, and product releases.</p>
    <!--[if lte IE 8]>
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>
<![endif]-->
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
  hbspt.forms.create({
	region: "na1",
	portalId: "7660877",
	formId: "483b2cd8-808f-4b2f-80be-f4b3f3a78d83"
});
</script>
</div>
<br>
<h2 id="studio3t">Studio 3T</h2>
<p><img src="https://retool.com/blog/content/images/2020/06/Screen-Shot-2020-05-22-at-5.56.18-PM.png" alt="The best MongoDB GUIs in 2021 (Updated)" loading="lazy"><br>
<em>(Photo courtesy of<a href="https://studio3t.com/"> Studio 3T</a>)</em></p>
<p><strong>Overview</strong></p>
<p><a href="https://studio3t.com/">Studio 3T</a>, formerly MongoChef, is the robust, professional version of Robo 3T owned by the same parent company, 3T Software Labs. Studio 3T is more than just a MongoDB GUI: it&#x2019;s also an IDE and client. There is no free version of this software (unless you count Robo 3T), and the Core pricing level starts at $149/year per user. Even then, the Core level lacks features that pricier ones have, like SQL import/export, SQL queries, and the schema explorer.</p>
<p>Some notable Studio 3T features include:</p>
<ul>
<li><strong>IntelliShell</strong>: A smart, built-in <code>mongo</code> shell with autocomplete that supports Javascript standard library functions, collection and field names, operators, and methods.</li>
<li><strong>Three ways to view data</strong>: Once you have retrieved your data from the database, you can view it in three different formats:
<ul>
<li><strong>Table View</strong> formats the data into rows and columns.</li>
<li><strong>Tree View</strong> formats the data into expandable hierarchies.</li>
<li><strong>JSON View</strong> formats your data as JSON documents.</li>
</ul>
</li>
<li><strong>Code generation</strong>: Export queries into Node.js, Python, Java, C#, PHP, Ruby, or the <code>mongo</code> shell language.</li>
<li><strong>Data import</strong>: Support for data imports from SQL databases, Oracle, and Sybase.</li>
</ul>
<p><strong>Winning feature: four ways to query MongoDB and view data</strong></p>
<p>Out of all MongoDB GUIs, Studio 3T provides the most ways to query your database. You can query using:</p>
<ol>
<li><strong>SQL queries</strong>: Query MongoDB using the SQL query language (super cool!)</li>
<li><strong>The <code>mongo</code> shell</strong>: Built-in IntelliShell technology that provides robust autocomplete features</li>
<li><strong>The Aggregation Editor</strong>: For building up complicated queries</li>
<li><strong>The Visual Query Builder</strong>: A drag-and-drop editor for building out queries (fun fact: can be used side-by-side with IntelliShell)</li>
</ol>
<p>Given this volume of query methods (including less &#x201C;technical&#x201D; ones), Studio 3T is usable for anyone, no matter their familiarity with document-based databases, query languages, or command lines.</p>
<h2 id="nosqlbooster">NoSQLBooster</h2>
<p><img src="https://retool.com/blog/content/images/2020/06/Screen-Shot-2020-05-22-at-6.00.30-PM.png" alt="The best MongoDB GUIs in 2021 (Updated)" loading="lazy"></p>
<p><strong>Overview</strong></p>
<p><a href="https://nosqlbooster.com/">NoSQLBooster</a> is a shell-centric GUI with a broad range of features that come with a paid license. The free tier is missing many of the features that make this GUI so great, like code completion and the visual query builder. NoSQLBooster does not work through a subscription model, so once you pay for a license, it&#x2019;s yours forever (or until you want to update your version).</p>
<p>Some notable NoSQLBooster features include:</p>
<ul>
<li><strong>IntelliSense</strong>: Similar to Studio 3T&#x2019;s IntelliShell, this language service appears as a tooltip while you type to suggest completions, methods, properties, variables, keywords, collection names, field names, and operators.</li>
<li><strong>Interactive samples</strong>: In-app tutorials with prewritten queries and descriptions for learning how to use MongoDB.</li>
</ul>
<p>A notable part of IntelliSense is the <a href="https://nosqlbooster.com/codeEditing#TonsofSnippets">built-in snippets</a> that offer code completion for operations like SQL to MongoDB data conversions and date ranges. You can also create your own snippets to save time.</p>
<p><strong>Winning feature: NPM packages in the MongoDB shell script</strong></p>
<p>The best feature of NoSQLBooster is the unique ability to add any NPM package into the MongoDB shell script. In fact, this GUI already comes with a number of useful and popular utility modules &#x2014; like <a href="https://lodash.com/">lodash</a>, <a href="https://momentjs.com/">moment</a>, <a href="http://bluebirdjs.com/docs/getting-started.html">bluebird</a>, <a href="https://www.google.com/search?client=firefox-b-1-d&amp;q=ShellJS">ShellJS</a>, and <a href="https://mathjs.org/">math.js</a> &#x2014; in the global scope, ready to use.</p>
<h2 id="humongousio">HumongouS.io</h2>
<p><img src="https://retool.com/blog/content/images/2021/05/image4-1.png" alt="The best MongoDB GUIs in 2021 (Updated)" loading="lazy"><br>
<em>(Image courtesy of <a href="https://www.humongous.io/">HumongouS.io</a>)</em></p>
<p><strong>Overview</strong></p>
<p><a href="https://www.humongous.io/">HumongouS.io</a> is a fully online MongoDB GUI. Since it&#x2019;s online, HumongouS.io allows users to collaborate pretty seamlessly. Instead of using it as just a GUI, you can set it up as a more fully-featured internal admin tool. You then don&#x2019;t need to share database credentials but can instead invite people to collaborate with you from the app. You can even access your data on a mobile device.</p>
<p>Some notable features include:</p>
<ul>
<li><strong>Smart filters</strong>: Create filters that you can use to display your collections as chips, which enables quick access</li>
<li><strong>Charts and dashboards</strong>: Easily create charts and dashboards to track the metrics that are important to you</li>
</ul>
<p><strong>Winning feature: widgets for customization</strong></p>
<p>With HumongouS.io widgets, you can customize how your data displays and use those widgets to pull data from specific reference collections as needed. There are viewer, form, and layout widgets. Viewer widgets let you represent data in more meaningful ways than default string values.</p>
<p>Form widgets are, according to HumongouS.io&#x2019;s documentation, &#x201C;<a href="https://www.humongous.io/docs/widgets/form-widgets">the building blocks of forms</a>.&#x201D; They&#x2019;re also customizable, meaning you can match them to any data type in your database.</p>
<p>Layout widgets give you an alternative to the default table view, allowing you to display specialized data.</p>
<h2 id="nosqlmanager">NoSQL Manager</h2>
<p><img src="https://retool.com/blog/content/images/2021/05/image2.png" alt="The best MongoDB GUIs in 2021 (Updated)" loading="lazy"><br>
<em>(Image courtesy of <a href="https://www.mongodbmanager.com/">NoSQL Manager</a>)</em></p>
<p><strong>Overview</strong></p>
<p><a href="https://www.mongodbmanager.com/">NoSQL Manager</a> is a shell-based MongoDB GUI tool. NoSQL Manager makes it easy to navigate, view, and edit documents, as well as set limits to maximize performance. You can manage, as the name implies, a lot of things, including collections and their indices as well as users, roles, and functions. It offers support for MongoDB Enterprise, MongoDB on Azure Cosmos DB, and Amazon DocumentDB.</p>
<p>Some notable features include:</p>
<ul>
<li><strong>Wide support</strong>: NoSQL Manager supports replica sets, sharded clusters connections, and standalone hosts</li>
<li><strong>Document viewer</strong>: The NoSQL Manager document viewer and editor offer Tree, Table, and JSON view modes</li>
<li><strong>SSH tunneling</strong>: NoSQL Manager offers SSH tunneling for MongoDB connections</li>
<li><strong>Imports</strong>: Import tables from your MySQL and SQL Server databases</li>
</ul>
<p><strong>Winning feature: autocompletion</strong></p>
<p>NoSQL Manager comes with a MongoDB UI Shell that offers code autocompletion, syntax highlighting, and hints. Autocompletion takes much of the guesswork out of MongoDB management, helping you by autocompleting things like the collection names and methods in MongoDB Shell commands. As you type into the Shell, NoSQL Manager uses context clues to provide collection or method completion.</p>
<h2 id="bonusretool">Bonus: Retool</h2>
<p><img src="https://retool.com/blog/content/images/2021/05/image3.png" alt="The best MongoDB GUIs in 2021 (Updated)" loading="lazy"></p>
<p><strong>Overview</strong></p>
<p><a href="http://www.retool.com/">Retool</a> is a <a href="https://retool.com/blog/what-is-low-code/">low code app builder</a> where you can build any GUI for MongoDB (see template). Retool makes it possible to drag-and-drop visual components to avoid boilerplate code and connect to anything with a REST or GraphQL API, meaning you can build a full-featured MongoDB GUI&#x2014;and include any CRUD operations&#x2014;in just a few hours.</p>
<p>Some notable Retool features include:</p>
<ul>
<li><strong>Speed</strong>: Connecting Retool to MongoDB takes just a few minutes</li>
<li><strong>Schema inspection</strong>: Visually view your data.</li>
<li><strong>Save and share queries</strong>: Keep your queries handy for multiple uses.</li>
<li><strong>Turn your queries into useful tools</strong>: go from query to table, search, and button without writing frontend code.</li>
</ul>
<p><strong>Winning feature: Customizable front end for visualizing data</strong></p>
<p>You can use Retool&#x2019;s pre-built components&#x2014;including tables, buttons, text inputs, and search bars&#x2014;to not only view your data but do any CRUD operations you need to keep your business going. Once you connect your data sources, you design your frontend with their drag-and-drop component tool.</p>
<h2 id="thebestmongodbguiforyourproject">The Best MongoDB GUI for Your Project</h2>
<p>As with any tool, the best MongoDB GUI for you depends on what you&#x2019;re trying to accomplish.</p>
<p>If you want to completely avoid the command line, MongoDB&#x2019;s Compass is probably the most fully featured and natively integrated GUI out there. If you want a simple application that has a well-supported community, Robo 3T is the best GUI. If you&#x2019;re familiar with SQL and want to keep writing queries in everyone&#x2019;s favorite query language&#x2122;, NoSQLBooster is going to feel slick. If you&#x2019;re looking to easily share queries or turn your queries into tools, check out Retool.</p>
<!--kg-card-end: markdown-->]]></content:encoded></item><item><title><![CDATA[How Retool issues and manages user licenses using Retool]]></title><description><![CDATA[An inside look at why and how we built a custom app for account managers to generate user license keys, manage trials, map account data with Salesforce, and manage feature flags.]]></description><link>https://retool.com/blog/retool-user-license-app/</link><guid isPermaLink="false">60d0bb9717ec827590febe91</guid><category><![CDATA[guide]]></category><dc:creator><![CDATA[Kevin Garcia]]></dc:creator><pubDate>Mon, 21 Jun 2021 18:08:59 GMT</pubDate><media:content url="https://retool.com/blog/content/images/2021/06/Frame-15--1--1.png" medium="image"/><content:encoded><![CDATA[<img src="https://retool.com/blog/content/images/2021/06/Frame-15--1--1.png" alt="How Retool issues and manages user licenses using Retool"><p></p><p>Processing sensitive data using SaaS products, especially in regulated spaces, can be a challenge. Data is often moved or stored through the vendor&#x2019;s cloud, which can be a non-starter or lead to endless security reviews.<br><br>To help developers build business apps safely, we offer a variety of <a href="https://retool.com/self-hosted/" rel="noreferrer nofollow noopener">self-hosted Retool plans</a>. But selling self-hosted software means our team needs a way to create, issue, manage, renew, and deactivate license keys for every customer.<br><br>In the early days, our engineers would run a simple script to manage self-hosted licenses. With fewer customers and features, it was an easy MVP. But as the number of self-hosted customers grew and our product became more complex, we needed a way to make this more scalable.<br><br>It started with giving account teams more control over user licensing. To do this, we needed to move away from our error-prone scripts to a more complete app that business users could own. <strong>This is the story behind our Account Team Dashboard and how Retool now manages user licenses.</strong><br></p><h2 id="introducing-the-account-team-dashboard"><strong>Introducing the Account Team Dashboard</strong></h2><p>Over the last 9 months, we&#x2019;ve added thousands of new customers and have grown the team from 15 to over 80. Even with a lot of new engineering teammates, our go-to-market team (i.e. success, support, sales, etc.) is expanding fast and is starting to outgrow a lot of our early processes.</p><p>The account teams want to deliver a winning user experience, but that can be difficult to ensure when they don&#x2019;t control the entire user setup flow. No matter how fast our engineers could move, we wanted to move away from any dependencies to make the account team self-sufficient.<br><br>So we built the <strong>Account Team Dashboard </strong>as a central system for account teams to manage customer licenses.<br></p><figure class="kg-card kg-image-card"><img src="https://paper-attachments.dropbox.com/s_5E0085D4F20360F343D9CB7AD7F183A598C58650FD25A72610C41AA7BFE268B6_1623950888826_Overview.gif" class="kg-image" alt="How Retool issues and manages user licenses using Retool" loading="lazy"></figure><p><br><strong>Our dashboard has 4 key use cases:</strong></p><ol><li>Generating license keys for new and trial accounts</li><li>Extending trials and renewing licenses</li><li>Mapping Salesforce accounts to license keys</li><li>Enabling custom feature flags for customers</li></ol><h3 id="generating-license-keys"><br>Generating license keys</h3><p>First and foremost, we need a quick way to generate license keys for new accounts and self-hosted trials. Our dashboard has a simple two-step process generate a license key and manage everything from expiration date to license type (reminder: we have several <a href="https://retool.com/self-hosted/" rel="noreferrer nofollow noopener">self-hosted plan options</a>).<br></p><figure class="kg-card kg-image-card"><img src="https://paper-attachments.dropbox.com/s_5E0085D4F20360F343D9CB7AD7F183A598C58650FD25A72610C41AA7BFE268B6_1623951217179_Generating.png" class="kg-image" alt="How Retool issues and manages user licenses using Retool" loading="lazy"></figure><h3 id="extending-trials-and-renewing-licenses"><br>Extending trials and renewing licenses<br></h3><p>At the same time, we also wanted account teams to have 1-click options to renew customer licenses and extend licenses to custom dates. With all of these functions in the same dashboard, we created one place to manage trials, new accounts, and renewals.<br></p><figure class="kg-card kg-image-card"><img src="https://paper-attachments.dropbox.com/s_5E0085D4F20360F343D9CB7AD7F183A598C58650FD25A72610C41AA7BFE268B6_1623951416763_Extending.png" class="kg-image" alt="How Retool issues and manages user licenses using Retool" loading="lazy"></figure><h3 id="mapping-salesforce-accounts-to-license-keys"><br>Mapping Salesforce accounts to license keys<br></h3><p>We also wanted to ensure this dashboard and Salesforce (our source of truth for account info) were able to read and write data to each other. One critical detail was ensuring there was a 1:1 mapping between the license keys in our database with Salesforce accounts. </p><p>By building this visibility and editing into our dashboard, we&#x2019;ve empowered account teams to discover data discrepancies and solve them in seconds.<br></p><figure class="kg-card kg-image-card"><img src="https://paper-attachments.dropbox.com/s_5E0085D4F20360F343D9CB7AD7F183A598C58650FD25A72610C41AA7BFE268B6_1623951435541_Salesforce.png" class="kg-image" alt="How Retool issues and manages user licenses using Retool" loading="lazy"></figure><h3 id="enabling-custom-feature-flags-for-customers"><br>Enabling custom feature flags for customers<br></h3><p>Finally, we&#x2019;re making updates to Retool on a daily basis, but not every feature is relevant or ready for every customer. </p><p>When features are in early development or beta, we want account teams to be able to communicate and align with customers on whether they want or need the feature. Once they have more information, account teams can quickly toggle any feature flag on or off for the customer.<br></p><figure class="kg-card kg-image-card"><img src="https://paper-attachments.dropbox.com/s_67C3F3E3F23FA56E3AE6D5A12E059810032DBDC2BDA610DCF7F02F036D4BCDA2_1623881413589_Screenshot+2021-06-17+at+3.39.56+AM.png" class="kg-image" alt="How Retool issues and manages user licenses using Retool" loading="lazy"></figure><p><br></p><h2 id="how-we-built-the-dashboard"><strong>How we built the dashboard</strong></h2><p>This app needs to communicate with a few key data sources: </p><ul><li>Salesforce</li><li>Our management database</li><li>Our separate licensing database</li><li>Our licensing API</li></ul><p>In terms of actually building the dashboard, the first step was pulling new accounts or trial accounts from Salesforce into our management database. We achieved this by creating a simple search bar. </p><p>Once you find the company in the table below, you can click a button to add the company to our management database. The button triggers a Postgres query, which does an insert into our companies table.<br></p><figure class="kg-card kg-image-card"><img src="https://paper-attachments.dropbox.com/s_5E0085D4F20360F343D9CB7AD7F183A598C58650FD25A72610C41AA7BFE268B6_1623955175041_Kent+1.png" class="kg-image" alt="How Retool issues and manages user licenses using Retool" loading="lazy"></figure><p><br>Once a company has been added to our management database, we can generate a &#x201C;deployment&#x201D; for them. To generate a deployment, need a few things: a unique license key, an expiration date, a type, and a domain. </p><p>The tool handles the creation of a unique license key by triggering a Javascript query off of a button click. The other inputs for this deployment are a date picker, dropdown, and text input. These are all contained within a form (see below). Submitting the form runs a Postgres query which inserts a new record into a deployments table. <br></p><figure class="kg-card kg-image-card"><img src="https://paper-attachments.dropbox.com/s_6226B0E41B53A3E4A94D7A576F8C48F2F2D795C7EEF169C463C9FCF37F10BFE1_1619827252867_Screen+Shot+2021-04-30+at+5.00.48+PM.png" class="kg-image" alt="How Retool issues and manages user licenses using Retool" loading="lazy"></figure><p>Once a license key has been created, the app offers a few quick actions: setting a custom expiration date, deleting the key, and adding a week to the expiration date of the key. These buttons all trigger Postgres queries which update the deployment based on the selected row of the table displaying these keys. </p><p>We also provide functionality to copy the key to the clipboard, as well as copy the key as base64. When deploying via Kubernetes, license keys needed to be base64 encoded. We were seeing a lot of errors with people encoding these keys with whitespace, so we added a button that base64 encodes the key correctly and copies it to the clipboard.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://paper-attachments.dropbox.com/s_6226B0E41B53A3E4A94D7A576F8C48F2F2D795C7EEF169C463C9FCF37F10BFE1_1619827538003_Screen+Shot+2021-04-30+at+5.05.33+PM.png" class="kg-image" alt="How Retool issues and manages user licenses using Retool" loading="lazy"><figcaption>Preventing errors by base64 encoding license keys</figcaption></figure><h2 id="results"><br>Results</h2><p>Our Account Team Dashboard has reduced dependencies between engineering and our account teams but, more importantly, the tool has become a core part of our workflow.</p><blockquote>With our Account Team Dashboard, I can create a smooth customer experience without waiting on engineers or double-checking whether a script ran the way it was supposed to. I can&#x2019;t imagine managing customer deployments without this dashboard.<br><em>Kent Walters, AE</em></blockquote><p>The alternative of running scripts and editing the database directly couldn&#x2019;t scale and slowed down the entire team. This new process gives the account teams total control over the customer experience and engineers more time to focus on core product updates.</p><p>When evaluating just the impact of just our Kubernetes base64 encoding feature, the team found we saved <strong>4 hours per week</strong> on debugging and customer calls&#x2014;and that&#x2019;s one tiny feature of the dashboard!</p><p>When you add up all of the different dependencies we&#x2019;ve removed and processes we&#x2019;ve sped up, we&#x2019;re saving <strong>dozens of hours a month</strong> and giving customers a blazing fast onboarding and renewal experience. </p><p>If you&#x2019;re interested in building your own dashboard, <a href="https://login.retool.com/auth/signup" rel="noreferrer nofollow noopener">get started with Retool today</a>.</p>]]></content:encoded></item><item><title><![CDATA[Choose one of these as the React map library for your next project]]></title><description><![CDATA[We're breaking down the strengths and drawbacks of the top React map libraries, as well as highlight the types of projects each library excels at so you can determine what's best for you.]]></description><link>https://retool.com/blog/react-map-library/</link><guid isPermaLink="false">60cbc81717ec827590febe73</guid><category><![CDATA[guide]]></category><dc:creator><![CDATA[Kevin Garcia]]></dc:creator><pubDate>Mon, 21 Jun 2021 16:00:00 GMT</pubDate><media:content url="https://retool.com/blog/content/images/2021/06/Map.jpg" medium="image"/><content:encoded><![CDATA[<img src="https://retool.com/blog/content/images/2021/06/Map.jpg" alt="Choose one of these as the React map library for your next project"><p></p><p>Let&#x2019;s face it: most modern applications and websites feature a map in some form. This could be as simple as displaying a company&#x2019;s address or as complex as identifying stock levels by store location. </p><p>While simple maps don&#x2019;t require a library to include in your React application (a simple iFrame or widget embed will do the trick there!), it&apos;s vital to understand what options exist for building more complex mapping applications.<br></p><p>This article wades through the myriad of mapping libraries out there and narrows the best options to two contenders. We break down the strengths and drawbacks of the top React map libraries, as well as highlight the types of projects each library excels at so you can determine which React mapping library is best for you and your needs.</p><h2 id="why-google-map-react-and-react-leaflet-are-our-top-choices-for-react-map-libraries"><strong>Why Google-map-react and react-leaflet are our top choices for React map libraries</strong></h2><p>A great place to start when considering a React library is<a href="https://www.npmtrends.com/"> npm trends</a>. This site allows you to quickly compare important statistics on each library, such as the number of downloads, stars, last-updated date, and file size.<br></p><p>We used npm trends to compare five of the most popular React mapping libraries, and the top ones are:</p><ul><li>Google-map-react</li><li>Pigeon-maps</li><li>React-leaflet</li><li>React-map-gl</li><li>React-mapbox-gl</li></ul><p>Looking at the<a href="https://www.npmtrends.com/google-map-react-vs-pigeon-maps-vs-react-leaflet-vs-react-map-gl-vs-react-mapbox-gl"> npm trends of these five libraries</a>, we see that google-map-react and react-leaflet have steadily had more downloads per month for the past six months than any of the other libraries.<br></p><p>While the number of downloads is a great initial indicator, that alone is hardly a good reason to choose a library. In fact, as we look at the rest of the information on npm trends, we see that react-map-gl actually ranks higher than react-leaflet in stars. This is a good general indicator of popularity since developers can &#x201C;star&#x201D; a package to show they have interest in it.<br></p><p>So, how did we use this information to determine that google-map-react and react-leaflet were the two best mapping libraries? The simple answer is we didn&#x2019;t use this information alone. </p><p>To really know which library is going to best meet our needs, we have to go beyond a simple comparison website like npm trends and dive a bit deeper into what these libraries can do for us. We took the time to learn more about each library so we could determine which was best. </p><p>We recommend<a href="https://github.com/google-map-react/google-map-react"> google-map-react</a> and<a href="https://github.com/PaulLeCam/react-leaflet"> react-leaflet</a> because, between the two of them, they cover a broad range of use-cases, and they are both easy to use and well-documented.</p><h3 id="google-map-react-easily-gets-marker-based-mapping-apps-up-and-running"><strong>Google-map-react easily gets marker-based mapping apps up and running</strong></h3><p>If your project allows you to use the Google Maps API, then google-map-react provides easy access to many of the common features you already know from that API while giving you the flexibility to implement custom markers with all the benefits of React. With just a few lines of code, you&#x2019;re up and running!<br></p><p>The<a href="https://github.com/google-map-react/google-map-react"> google-map-react</a> documentation supplements the regular<a href="https://developers.google.com/maps"> Google Maps API documentation</a> nicely. One especially great feature of the google-map-react documentation is the included<a href="https://jsbin.com/ruwogapuke/1/edit?js,output"> editable JSbin</a>. This makes it easy to start experimenting with what is possible.<br></p><p>When you&#x2019;re ready to check out a more complex example, we recommend<a href="https://google-map-react.github.io/google-map-react/map/main"> this sample app</a> from their documentation that covers a lot of functionality. To see the code behind that application, simply click on the &#x201C;source&#x201D; link at the top of the page.</p><figure class="kg-card kg-image-card"><img src="https://lh6.googleusercontent.com/ktsegufyPt_OGN2Yykx5AIpjGFLxrvltUyIeB0u_m_uerfTHcyx-7CzvGqY1YYP4JzGgVn1vEyIPngfAKD23w4mYb7PQNVi-WoVbFKYJhPL_pQRZ8uP_YmOV9LZOulQ2v_FujS7p" class="kg-image" alt="Choose one of these as the React map library for your next project" loading="lazy"></figure><p><br></p><p>Since google-map-react utilizes the Google Maps API, you will eventually need to get an API key. If you&#x2019;re just looking to test out google-map-react, you&#x2019;re able to get started without one. You can learn more about Google&#x2019;s API as well as the pricing structure on<a href="https://cloud.google.com/maps-platform/pricing/"> Google Cloud</a>. Google has a generous free tier for API usage, though if your site gets a lot of traffic, you might wind up needing to pay.</p><h3 id="react-leaflet-is-the-most-versatile-mapping-library-available"><strong>react-leaflet is the most versatile mapping library available</strong></h3><p>While google-map-react is good if you want to use the Google Maps API, one of the great things about react-leaflet is that you aren&#x2019;t bound to any particular mapping service. If you want to use an open-source solution like<a href="https://www.openstreetmap.org/#map=5/38.007/-95.844"> OpenStreetMap</a> it integrates seamlessly. Or if a full-featured proprietary solution like<a href="https://www.mapbox.com/"> Mapbox</a> is what you&#x2019;re looking for, that works just as well.<br></p><p>React-leaflet is extremely versatile, which is a clear strength of the library, but it can also be a little intimidating to get started with. This is where react-leaflet&#x2019;s<a href="https://react-leaflet.js.org/docs/start-introduction/"> excellent documentation</a> comes in. It walks you step-by-step through how to get started and then provides well-organized examples of the variety of things you can do with the library. The examples come with a live editor, so you can easily start playing with code right in your browser. For example, if you want to know how to add vector layers to your map, simply check out the live<a href="https://react-leaflet.js.org/docs/example-vector-layers"> vector layer example</a>.<br></p><p>The possibilities of what you can build with react-leaflet are endless, and the react-leaflet documentation makes it easy to explore them. Rendering markers, adding geoJSON, and interacting with tooltips are just a few examples of what&#x2019;s possible with react-leaflet!</p><h2 id="other-effective-options-for-react-map-libraries"><strong>Other effective options for React map libraries</strong></h2><p>While react-leaflet and google-map-react are by far our favorite React libraries, there are a couple of others worth mentioning:</p><ul><li><a href="https://github.com/visgl/react-map-gl">React-map-gl</a> provides a library of React components that work with mapbox GL libraries. Their documentation isn&#x2019;t as strong as react-leaflet&#x2019;s, but if you want to use mapbox GL, it could be a great way to go.</li><li><a href="https://github.com/mariusandra/pigeon-maps">Pigeon-maps</a> is a small library that caught our eye because it doesn&#x2019;t have any external dependencies, which is always nice. It has a lot of stars on NPM trends, but the number of downloads was quite small, which we consider a bit of a warning sign. That said, it&#x2019;s definitely a library worth keeping your eye on, and if a small dependency-free library is what you&#x2019;re looking for, it might be worth trying out.</li></ul><h2 id="lean-on-the-right-react-map-library-to-make-your-next-project-simple"><strong>Lean on the right React map library to make your next project simple</strong></h2><p>Rather than sifting through the wealth of React map library alternatives to experiment and find the best option yourself for your next project, we&#x2019;ve done the legwork for you.<br></p><p>Leveraging quality React map libraries like react-leaflet and google-map-react makes it easier to add a wide range of mapping functionality into your React application. React map libraries make it easy to incorporate maps into React&#x2019;s virtual DOM. You can&#x2019;t go wrong with a robust, well-documented solution like react-leaflet. Or, if you want to take advantage of Google&#x2019;s mapping expertise and excellent API google-map-react makes it easy to do so.</p>]]></content:encoded></item></channel></rss>