Service Worker
I am working on implementing changes with Service Workers. I am following the series of posts from Dan Diebolt, Service Worker Travel Logs, and it is making sense. The one part I am stuck on is in the last one;https://community.quickbase.com/quickbase/topics/service-worker-travel-log-day-13, specifically implementing the cheerio.js library. Do I need to bring over every file in the GitHub page, or is there a way to simply reference them all at once?13Views1like7CommentsAnnouncing new forms beta
New form experience beta All customers will soon benefit from a more intuitive, modern form experience. We’ve started enabling our new form designer for select customers. Read more about the feature and how to get involved below. Over the last few years, we’ve released updated dashboards, table reports, charts, and new ways to build reports. Our journey to improve the Quickbase user interface continues with a reimagined form experience aimed to increase productivity for both app builders and their users. With the new version of forms, you can accelerate the app development process with a drag and drop, WYSIWYG form builder to help your team, see, connect, and control their most complex work. We’ll be enabling this feature in waves as we learn about your experience and gather feedback that will inform our roadmap on the way to General Availability later this year. Customers can join the wait-list by registering in this app. What’s new We want to empower you with the tools you need to make your apps and businesses successful. Though we've retained many of the features that Quickbase users love, our primary focus was on innovating for the future. You'll notice familiar and new patterns in our form designer. While you may not see every setting, toggle, or switch that you've grown accustomed to over the past two decades, we believe that we've incorporated the best of them into this new world. We’re excited to see what you create! Drag-and-drop building We believe that it’s important for you to view your forms from an end-user perspective during the building process. So, we created the drag and drop interface and quick add menu to allow you to see what your form will look like for your end users in real time. You can add elements and rearrange them with immediate results for quicker, more confident form building. Based on customer feedback, we’ve learned that builders want granular control over form layout and element positioning, so we’re introducing more ways to organize elements on the form builder canvas. In addition to pages and sections, builders can now use new columns and groups to separate and structure elements on their forms. Adding columns Use columns to group and arrange similar fields in a visually distinct and easily accessible way to enhance the end-user experience. Column widths are customizable. To shrink or expand a column, hover over the column, click, and drag to your desired width. Add headings and custom color styling to each column, and create form rules to apply specific actions like show, hide, or require all the fields within a column. Grouping elements You can group elements together to display them on the same row within a column for improved data entry and visualization experiences. To group elements, drag-and-drop them on top of one another. Once grouped, the fields can be moved as one object on the canvas. More intuitive ways to add elements to your form We’ll be improving upon many existing patterns to help builders of all experience levels get the most out of Quickbase. One of the first improvements in this area is adding embedded reports to your form. In addition to adding a report link directly to the form, you can choose to add a Report component and build the matching criteria on the fly. Better ways to enter data Displaying pages as steps We’re giving you new tools to simplify workflows that include complex data entry. When a form has multiple pages, you can customize the navigation experience for your users. Choose Steps from the navigation settings to turn your form into a series of steps that users proceed through as they enter data. Steps can be conditionally shown or hidden using form rules for more control over the end user experience. Note: while in beta, forms are limited to 10 pages/steps New pop-up form experience We want to make entering data into related tables as seamless as possible. To begin, we’ll start with a new in-window option for adding parent records directly from a child. When you click the (+)Create a new record button inside of the record picker, and the two tables both use a new form, a pop-up form will appear over the current record allowing you to create a record in context. This is a pattern we look forward to implementing in other areas of the product in the future. Improvements to form rules We’re excited to give our builders an entirely new form rule engine that will help them create sophisticated forms that dynamically change based on their business processes. New ways to build conditions In beta, you can write a boolean formula expression to define a rule’s condition. As we get closer to GA, we’ll release a more intuitive condition builder. In both cases, you’ll benefit from the ability to create complex expressions using nested conditions, and - when using a formula - create conditions that previously required building a separate field in the table to leverage. In this example, the builder is showing a set of fields when expense amount plus the current project costs would push the project over budget. New action types Now, you have more options to dynamically change the display of your form. To start, you can update the color of a column to draw a users attention to important fields. Later on, we’ll release new ways to display messages on a form and change the label displayed on a field, column, section, or page. Simpler, modern UI To help you create apps your end users love, we’re releasing improvements to our fields to make entering data easier than ever before. Date picker Use intuitive controls to find a specific date. Jump between months, years, and decades. Timezone helper Working across time zones can be a challenge, but we’ve made it simpler to reconcile app time, your local time, and your team's time. Now users can search for a timezone in our timezone helper to automatically fill the correct time. File attachment Take advantage of a large drop area to drag files directly into Quickbase and upload them to a record. A note on accessibility Ensuring that all users are able to get their jobs done in Quickbase is an important aspect of the work we do on the product team. We strive to meet WCAG 2.1 AA accessibility standards for end users. You can read more about our approach to accessibility on Quickbase Community. About Beta In beta, we’ll be looking for customers willing to partner with us to uncover issues and provide feedback on the overall experience. While in beta, expect to uncover bugs and gaps in functionality. We’ll use this opportunity to learn from our customers what works well and what needs improvement. Joining the beta We’ll be activating the feature for customers in waves over the next several months on our way to General Availability. Interested customers can join the wait-list in our beta registration app. Giving feedback We’ll be looking for your feedback to help provide direction on where you feel we can improve the new experience. You can log this feedback directly in the form designer by clicking the Give Feedback button in the page bar. Here you can give general feedback, report issues, and submit feature requests. We can’t wait to see what you build! What’s next We’re focused on delivering more features over the next few months, and beyond! Our goal is to create a foundation for customer innovation that will last for the next twenty years. We’ll be using your feedback to help inform us on our way to General Availability. Be on the lookout for news regarding: Additional capabilities in our form rules engine, like data changes and the ability to create conditions using a WYSIWYG expression builder. Backup and restore of forms Copying forms when apps and tables are copied, and allowing users to copy individual forms Making changes to new forms in a sandbox Adding more step customization options Adding multiple embedded reports of any type Supporting a table’s auto-save setting Showing new form activity in the Field Usage page5Views0likes0CommentsCreating a Survey to Collect Data from Non-users
At the end of each coursein Quick Base University, ourtrainingteam uses a Quick Base app that I created to collect feedback from our learners. Some of our leaners are users in our app and some are not.We want to collect feedback from everyonewhether they are users in our realm, our app, or non-users(people who do not have permission on our realm or in our app). To do this,I created a formand a role for the group ÒEveryone on the InternetÓ (EOTI). The team then createsa customURL and embeds it on the web page in the last lesson of each course. 1. Create a survey form with a submit button You need a table to house survey questions.I create different tables for each type of survey because it makes reporting easier.I suggest using short field names. For example, if thequestion is,ÒHowwould you rate your overall experience on Quick Base University?Ó, agood field name might be ÒOverall ExperienceÓ. Then whenyoucreate theform,youcan add the full text as analternate label. Be sure to add a Submitbutton.Create itusing a Formula-Rich Text field type. The formula for thebutton is: "<a class='Vibrant Success' onclick='DoSaveAdd()'href='#'>Submit</a>" You can edit the default form orcreate a second form. Iuse 2 separate forms,a formfor myteamÕsrole anda formfor my EOTI view,because I have fields thatour teamusesto add comments and assign feedbackforteam membersto address. 2. CreatearedirectHTML page I created a simple thank you page.You can usecode pages to create an html page. You will need this page to load after a user submits feedback. You may want toincludesome text or images on this pageto notifythe user that the survey has beensubmitted. 3. Createarole with permissions to see only the necessary fields I create an EOTI role.I do this so that whenever I see the role I know that it is open to everyone and I need to be cautious about the permissions that I set.I usually set the role permissions on a survey table to only be able to add a record. I add custom rules for fields, so users assigned this role can see and modify only the fields on the form.You can createanEOTI roleand assign itto the ÒEveryone on the InternetÓ group. This will allow non-users to respond to your survey. 4.InvitetheÒEveryone on the InternetÓgroupto yourapp To allow non-users to access the survey,Isharedthe app with theÒEveryone on the InternetÓ group.When you aresharing with a new user,if you typeEveryone,the group will populate for you. Set the role for this group to the EOTI role that you just created. 5. CreatetheURL The team createsa uniqueURL for each course that they develop.Youcanedit the URL and theneither add it as a link or use an iframe to embed it on another page. Copy the form URL from your browser.It will look something like this: https://team.quickbase.com/db/bneukue8v?a=nwr You can hidethe Quick Base interface by adding&ifv=1to the end of yourURL. It will look something like: https://team.quickbase.com/db/bneukue8v?a=nwr&ifv=1 Our teamwantsto know which coursethefeedback came from,so we create a slightly different link for each course. We set the Course Number field in the URL.Youcan use&_fid=to set the text in the field. The Course Number field is field number22inourapp.We add the course number after the=. In this example the course number is ZZZZ. https://team.quickbase.com/db/bneukue8v?a=nwr&ifv=1&_fid_22=ZZZZ Our team wantsour end users to know that their feedback has been received,so we usearedirect pagewhich loads after the survey has been submitted. You can use&nextURL=toredirectthe iframeor page.You can find the URL for the page by going to the Pages page in your app, previewingthe page, and copyingthe URL from your browser. The URL will look something like this: https://team.quickbase.com/db/bneuj8f7m?a=dbpage&pageID=2 Youneed to encode anythingin the URLthat is not a number or letter.HereÕstheencoding you will need: Your finalURLwill look something like this: 6. Link or embed the URL On our team, we embed the survey using an iframe. You canembed the link with an iframeoruse the URL to create a link on a webpage or in an email.If you are embedding theform into another web page,wrap theURLin an iframe tag, like this: <iframe src="https://team.quickbase.com/db/bneukue8v?a=nwr&ifv=1&_fid_22=ZZZZ&nextURL=https%3A%2F%2Fteam.quickbase.com%2Fdb%2Fbneuj8f7m%3Fa%3Ddbpage%26pageID%3D2"></iframe> You are now on your way to gathering feedback using a Quick Base app. What do you want to learn next?Go toQuickBase Universityor leave a comment below.3Views0likes3CommentsSnapshotting a sales pipeline using Quick Base Automations
[The Quick Base Knowledge Base is your library of frequently-asked questions that help you better customize your apps to solve your business problems.] Introduction People manage many kinds of business processes through Quick Base, and customers often ask us how they can follow changes in their data over time. Seeing long-term trendscan give you insight into how your business is performing and can help you identify any issues for you to improve on. Traditionally,this has been accomplished by creating a child table which includes snapshot fields. However, itÕs now easier than ever to do trend reporting using Quick Base Automations! Have you even wanted quick access to trend data like you see below? This guide will show you how to set it up. The problem Before you begin, youÕll want to decide what your end goal is. Is there a specific report or chart your manager needs to see? What data would that need to include? For this example, weÕre going to snapshot opportunities in a sales pipeline. WeÕll want the snapshots to include: -What week the opportunity was snapshotted (week start date) -A $ estimate of what the opportunity is worth -What company the opportunity is for -Who is working the opportunity -What pipeline stage the opportunity is currently in Setting It Up 1.Create a Formula Ð Date field in the Opportunities table, called ÒWeek start formula (for snapshots)Ó. You can use this formula: FirstDayOfWeek(Today()) 2. Create a new table, called ÒPipeline SnapshotsÓ. 3. Add a field for each of the items above. ItÕs helpful to use the same field names as you have in your Opportunities table when possible, to keep things simple. 4. Create a table-to-table import, set to copy records from your Opportunities table to your Pipeline Snapshots table,and filtered to open opportunities. (To learn how to create a table-to-table import, please see our Copy Records in a Report to Another Quick Base Table help article.) It will look something like this: 5. Click Save to save your import without running it. 6. Create a new automation by going to the home page of your app and clicking Settings,then clicking + New next to Automations. 7. For the trigger, choose On a schedule. 8. Choose when you'd like the automation to run. You can choose daily, weekly, or monthly. If you choose weekly or monthly, you can choose specific days for the automation to run. For snapshotting a sales pipeline, it might be helpful to run the automation weekly on Saturdays so you have up-to-date trend data waiting for you when you get to work on Monday. 9. Click Add an action. 10. In the Add an Action window, click Run table import, then click Finish. 11.For the Destination Table, choose Pipeline Snapshots. 12.Next,choose the table import you just created. 13.Give your automation a name and comment on the left side of the page so itÕs easy for you to look back at the automation later and understand what you built it for. 14.ClickSave & close to finish. Now you can build whatever kind of reports and charts you need on the Pipeline Snapshots table, and even put them on your appÕs home page for easy access. For example,I took the bar chart from above, which is filtered to include only snapshots from the past 4 weeks, and put it on my app home page: TIP: Automations run sometime during the morning, US Eastern time, depending on the overall traffic for automations on that day. So, while the process above is a great way to do trend reporting, if you do need to take your snapshots at a specific time of day you might want to trigger your table import manually. Please see the How do I baseline a project or snapshot a sales pipeline? knowledgebase articlefor more information on that method. Learn More áAbout Quick Base Automationshelp article áAutomation Limitshelp article áWorking with Automations coursein Quick Base University. áCopy Records in a Report to Another Quick Base Table help article áCreating a Chart help article3Views0likes1CommentService Worker to the Rescue
There has been a lot of traffic opining about the new release that changed various aspects of the GUI. To be honestI didn't read most of the posts in detail nor do I have any problem overcoming any of the undesirable changes. That is because I can modify any aspect of QuickBase usingService Workers. You can to. As an example, here is a grid edit viewof an application that shows the current greenNew Recordbutton which I want to remove using a Service Worker: Here is a screenshot of the same page where a Service Worker has removed the green button: Now you may be wondering what the left hand panel is and why the URL is showing the domainhttps://cloudflareworkers.com/. In a nutshell, cloudflare has implemented a jsfiddle like service where you can demonstrate and share the implementation of a Service Worker as applied to any URL. It just turns out that this is an easier way for me to publiclly share a Service Worker demo rather than implement it wholly within QuickBase. Here is full source of the Service Worker used above: addEventListener("fetch", event => { event.respondWith(fetchAndModify(event.request)); }); async function fetchAndModify(request) { console.log("got a request:", request); // Send the request on to the origin server. const response = await fetch(request); // Read response body. const text = await response.text(); // Modify it. const modified = text.replace( '<a onclick="GE_embMenu_newRec(this)" id="GE_NewRecordPick">New Record</a>', ""); // Return modified response. return new Response(modified, { status: response.status, statusText: response.statusText, headers: response.headers }); } Basically the Service Worker looks for the <a> element associated with the New Record button and removes it - BEFORE THE BROWSER EVEN STARTS TO RENDER THE PAGE. Now the important thing to notice is that this very same Service Worker implemented as a part of the CloudFlareWorker demo can be used as a client side Service Worker. (wholly within QuickBase) Now I could write a hundred pages extolling the virtues of using Service Workers with QuickBase but the bottom line is there is nothing Service Workers can't do. Service Workersis god mode for QuickBase. UPDATE: I forgot to post the link: https://cloudflareworkers.com/#28a28d6d0a693d85a38d856f44a8de37:https://haversineconsulting.quickbas...~ Similar to a jsfiddle, you can modify the Service Worker code in the left panel and create your own version for experimentation before porting the code to your own application.3Views1like20CommentsService Worker Travel Log - Day 13
Day 13 - Hip Hip Cheerio! Let's continue our previous post which dealt with our new Service Workerbuddysw8.js. Code Page sw8.js https://haversineconsulting.quickbase.com/db/bmtpmup9q?a=dbpage&pagename=sw8.js You will notice that our new Service Worker had a line at the top that imported the cheerio.js library: importScripts("https://haversineconsulting.quickbase.com/db/bmss68i2j?a=dbpage&pagename=cheerio.js"); The reason that we are including this library is because we need to parse the XML response from API_DoQuery and convert it to a JSON response without having access to the DOM orjQuery. Cheerio.jsis just a light weightjQuery replacement library that is often used server side (typically with Node) but equally useful within a Service Worker. Here are some docs about Cheerio.js: Cheerio.js https://cheerio.js.org/ Cheerio.js Github Page https://github.com/cheeriojs/cheerio The usage of Cheerio.js within our Service Worker is pretty straightforward and basically is exactly the same as the jQuery solution that used the helper functionXMLFlatToObj. $ = cheerio.load(body); var data = []; var record = {}; $("record").each(function() { record = {}; $(this).children().each(function () { record[$(this).prop("tagName")] = $(this).text(); }); data.push(record); }) The first statement loaded the XML response into theCheerioobject and the rest of the code is exactly the same as the orignaljQuery solution. The only other thing worth remarking on is how we package up the JSON response. In a nutshell we take the data array obtained from the above script format it as JSON and set the headers of the new Response to indicate we are sending back JSON instead of XML and to not cache the new response: var newBody = JSON.stringify({records: data}, null, " "); return new Response(newBody, { headers: { 'Content-Type': 'application/json', 'Cache-Control': 'max-age=0' } }); It is really that simple! In summary, we created a new parameter value &fmt=json for API_DoQueryand included the conversion code within our Service Worker which will convert the XML response to JSON whenever this API method is used in Table #8. Your are really going to like our next post as we are going to create a new API from scratch! To make it even more exciting I will take suggestions for what this new API will be named and what it will do. I am going to be out of the office for a few days so if there is some API you want let me know and if it is simple enough I that can make a demo out of it I will. Next Up: Day 14 - Where No API Has Gone Before3Views2likes20CommentsIOL Technique Officially Approved By QuickBase
I missed this the other day when I posted about the form used by QuickBase on thier Quick Base Customer Awards nominations. In my post I mentioned that QuickBase had created a custom Save button that saved and redirected to a unique page and I also presented the code they used. What I forgot to mention (I missed seeing it) is that QuickBase itself is using a version of the IOL technique to hide the native Save button so as to make the custom Save button the only functioning button. The Forum post has been removed: https://community.quickbase.com/quickbase/topics/quick-base-customer-awards-nominations-are-open But the new record pages are still accessible: The Quick Base Hero Award ~ Add New Record https://team.quickbase.com/db/bneu8emfj?a=nwr If you watch very carefully upon page reload you can see the Save button momentarily appear and is then rapidly hidden. The HTML code QuickBase is using to achieve this is as follows: <table id="sect_s8" class="formSection LabelsAbove"> <tr class="formRow "> <td id="tdl_23" class="label lc RichTextField" colspan=100> <label class="fieldLabel " for='_fid_21'><b >Hide Green Buttons</b></label> <div id="tdf_23" class="cell dc RichTextField" > <img src='/i/clear2x2.gif' onload="javascript:$(document).ready(function(){$('.IconOnly').hide();$('#saveButton').hide();})"> </span> </div> </td> </tr> </table> Here is a screenshot of the relevant HTML in the inspector (which helpfully points out an unbalanced </span> element) The code above basically uses the image onload technique I created almost a decade ago but simply doesnot use a code page because the script in question was so short. So we have to conclude that QuickBase sees the value in script as a handy workaround and will be working hard to provide a supported way to introduce script into the product. For reference here is the accompanying post that described how QuickBase formed their custom Save button: This is !important https://community.quickbase.com/quickbase/topics/this-is-important Pastie Database https://haversineconsulting.quickbase.com/db/bgcwm2m4g?a=dr&rid=6333Views4likes7CommentsHow do I track changes users make on my kanban boards?
How do I track changes users make on my kanban boards? You can create an Automation that will allow you to keep track of who is moving the cards on a Kanban board. Here's how: 1.Create two new fields: a Text field called "Change Log", and Formula - Text field called "Last Modified By (Text)". 2.Edit the properties of the two fields. For the Change Log field, check Log the edits to this field For the "Last Modified By (Text)" field, enter this for the formula: UserToName([Last Modified By]) 3. From your app's home page, click Settings. 4.Next to Automations, click + New. 5.Choose When data changes as the trigger type. 6.Set up the automation to trigger when a record is updated on the table where your kanban board is located, only when the field used for your kanban columns is changed. 7.Click Add an action. 8.Choose Modify record(s) as the action type, then click Finish. NOTE:If after clicking Finish, you get a message saying, "here are some potential child records you could modify", click *OR modify record(s) from a different table*. 9.In this case, the record which triggered the automation and the record we want to modify are the same. So again, under Table, choose the table your kanban board is on. 10.Under Which Records, set up the filter to match the Record ID# in the action to the Record ID# of the triggering record. This tells Quickbase that the triggering record should update itself, as seen here: 11.Under Add Fields, click Select fields, select the Change Log field, then click Add. 12.After you click Add, a box will appear to fill in the value you want to write to the Change Log field. You can use the menuto select values from the record to build a log message like this: 13.Click Save & close. Now, any time one of your users moves a card between columns on the kanban board you'll have a log of those changes. To learn more, check out these resources: Simplicity &Power: Is the Best of Both Worlds Possible?on our blog, discusses why kanban reports is such a powerful collaboration tool About Kanban Reports on our help site About Quickbase Automations on our help site2Views0likes3Comments