Google App Maker integration with DataTables To Export data in Excel, PDF and CSV

-

The App Maker editor and user apps will be shut down on January 19, 2021. New application creation will be disabled starting April 15, 2020. Learn moreMore Details 



I am woking on Google App Maker from last 2 years, I observe that App maker default table widgets is good for 100 or 200 records, but if you have more than 1000 records then default table widgets performance is not upto mark. It is very difficult to Export in CSV, PDF or Excel...
I am using DataTable as alternative to load data quick and export in Excel, PDF or CSV.

Then let's start to implement DataTable in Google app maker.

  • Create New Page in App Maker Project 

  • Add HTML table tag
    • Open Newly created App Maker Page 
    • Select HTML from widgets panel
    • Give Name to HTML tage 
    • Add HTML <table id="DataTableID" class="display" width="100%"></table> in HTML Text
  • Add DataTable framework in your App Maker Project 
    • Click on Gear Box
    • Go to "External resources" section 
    • Copy DataTable JavaScript CDN URL and Paste in "JavaScript URLs" section 
    • Click on "ADD LIBRARY"

    • Then Copy CSS CDN URL & Paste in "CSS URLs"
    • Click on "ADD CSS"
       
  • Create Client Side Coding to Generate DataTable
    • App Maker Click on "SCRIPTS" Select Client
    • Click on Create button
    • See Code in section "ClientSideScript" 
    • Update HTML Tag ID as you set previously ie DataTableID
    • On Page Attached call "printDataTable()"  function 
    • See Preview if you have Database it will show below output 
    • You Can Print, download, and Export in excel as well.
  • Ref Links
Happy Coding.....


Please let me know if you have any question on app maker




Comments

Post a Comment

Popular posts from this blog

Google Apps Script Exception Handling

-
Image
Errors In Computer Programming There are three types of common errors in programming: Syntax Errors Runtime Errors Logical Errors i) Syntax Errors Syntax errors, also called parsing errors , occur at compile time in traditional programming languages and at interpret time in Google Apps Script. For example, the following line causes a syntax error because we used Variable name V caps. function errorTest(){ Var num1=100; } Try to Save ( Ctrl+S ) Error log:  Missing ; before statement. (line 47, file "RegEx") When a syntax error occurs in Google Apps Script, IDE don't allow to save the last changes. ii) Runtime Errors Runtime errors, also called exceptions , occur during execution (after compilation/interpretation). For example, the following line causes a runtime error because here the syntax is correct, but at runtime, it is trying to call a function that does not exist. function errorTest2(){ var test=method(); Logger.log(t
Read more

Google Apps Script Regular Expressions

-
Image
RegEx A regular expression, also called a regex , is a method for matching text with patterns. For example, a regular expression can describe the pattern of email addresses, URLs, telephone numbers, employee identification numbers, social security numbers, or credit card numbers. What Is a Regular Expression? A sequence of symbols and characters expressing a string or pattern to be searched for within a longer piece of text. When you search for data in a text, you can use this search pattern to describe what you are searching for. A regular expression can be a single character or a more complicated pattern. Regular expressions can be used to perform all types of text search and text replace operations. Ref Google: For additional instructions and guidelines, see also Guidelines for using regular expressions and RE2 Syntax . Syntax /pattern/modifiers; var patt = /googleAppsScript/i; / googleAppsScript /i  is a regular expression. googleAppsScript   is
Read more

Responsive Web Apps using Google Apps Script

-
Image
Hi Apps Script developer's, Google apps Script allows to develop Dynamic and Static Web applications like fetch data from Google Sheet and create dynamic cards, intelligent data entry form, Workflows, Help Desk, etc. When you create Web apps using Google Apps Script, it will  not be responsive . You can make applications responsive using third party framework like Bootstrap , Material design or other HTML responsive framework. In this post I am explaining how to create responsive(Using Bootstrap 4.0) Google Apps Script Web application from scratch *Required Basic HTML & responsive framework knowledge  Go to your Google Drive Open Google Apps Script Editor   Create new blank apps script Project & save it Add 3 more Html files Index.html, JavaScript.html & Stylesheet.html with given code For any Web application it requires 4 main components(I am explaining best practise here, you can add HTML, JS & Stylesheet in to two files if you want) For code files
Read more