Automatic download link for non-Google Workspace files in Google Drive

Ever wanted your users to simply click a button on your webpage and,💥, a file you saved on Google Drive is automatically downloaded for them?

Here have a look at two examples:

NOTE! Clicking the links above will automatically download the file described.

This quick tool allows you to do just that. It works with any file like:

  • Images e.g. *.png *.jpg.
  • Documents e.g. *.pdf *.doc.
  • Zip files e.g. *.zip *.7z.
  • Pretty much anything that isn’t a Google Workspace file like a Google Sheet, Google Doc, Google Slide.

Grab and set up the file

    1. Find the file you need to set up for auto-download.
    2. Righ-click the file.
    3. Select Get link.
    4. Ensure the settings says, Anyone with link can view.
    5. Select Copy link.
Google Drive get link example
Click to expand!

Create the link

*Wait for the converter to load.

Do no harm!

Yes, I guess this could be used for downloading some nefarious content. This little tool is designed to provide a convenience for you and the people you want to share your files with. Please consider other people when preparing a tool for them. Even a quick heads up in your own content might be a good idea:

  • Note! File will download automatically from Google Drive.
  • Note! Clicking this file will download it automatically.

What about my Google Workspace Files?

Not directly with this tool, I’m afraid. The simple answer is Google Workspace files are designed to be in Google Drive and online. Much better for you to share the file publically and then provide a link to the file.

However…

If you are intending on providing your Google Workspace files or folders for your users to download and use offline anyway then you could download the in advance. This will cause the Google Workspace files to be exported into an offline format. Then you can drag that converted file and put it back in your drive and share it. You will be able to complete the steps above then.

Also, if you are downloading an entire folder it will export it files into usually Microsoft formats for you automatically and save the entire document in a zip file. Then you can drag that zip file back into your Google Drive and convert with the above too.

Neat huh?

~Yagi

 

Create Removable Item Buttons Generated From Select or Comma-separated Input elements with HTML, CSS and JS

I am currently working on a larger project at the moment that requires a lot of front-end wrangling. As a part of this project, I needed to create Button Items that are generated by the user from both an HTML select element for one section and, a comma-separated text input in another section.

When a user selects an item from a select menu, a button appears in a desired area with the name of the selection and a small “X” that can be clicked to remove the item. Likewise, if a user wishes to create a bunch of items separated by commas in an input element and either hit the “Enter” or the “Add” button, then those items will be transformed as a bunch of individual buttons that the user can remove and change.

The buttons essentially become the user’s selection of items.

I also needed to be able to get a list of those item buttons for when I submit a form server-side or for some other task.

As a result, I created a small library called itemButton().

Note: If you have a bit of experience with front-end, then all you may need is to grab the CSS code and input.js file. If you need some further explanation you can find the information below.

What it does

The itemButton() library:

  1. Creates a button named by the selection or the user’s input, This is removable should the user wish to change their choices.
  2. Allows you to select the max number of items you want your users to be able to choose.
  3. Easily extracts a list of buttons by ID and value.

An example

Take a look at an example:

Watch this video on YouTube.

My inability to consistently fail to place an ‘e’ at the end of giraffe notwithstanding, you can see that the user can select items from a select element and they will be displayed in a chosen area below. Further, when the user types some words and separates them by a comma they are displayed as buttons in a div below it.

Limit the number of displayed Item Buttons

You might have also noted that the select element will only display two-item buttons, while the comma-separated list will display up to 10. You are able to create a maximum limit of any of your text input or select elements you are running itemButton() on.

Validation

When the user submits their items, itemButton() will:

  • Check for duplicates. If it already exists, it won’t be displayed again.
  • Remove any empty comma-separated elements.
  • Remove any non-alphanumeric characters.
  • Cut any text input items between commas to less than or equal to 25 characters (You can change this if you want).
  • Exchange any spaces between words with a dash for the button ID.
  • Any item starting with a number gets and “a” at the start of the button ID so it can be used in the HTML.

Getting a list if item buttons

As you can see in the video above, when the user clicks the Log Items button, an object of ids and values for each item is listed in the browser console using the list() method in itemButton(). This is most useful for when you are submitting data to the server.

Let’s have a gander at the code:

The Code

I have chosen to put the Javascript itemButton() library in an input.js file. In my project,  I have other small classes or libraries in that file too. It is up to you how you want to add the code.

The CSS for the buttons is separate, and I have added it to my universal style.css file. Again you can put it anywhere you think works for you.

input.js

stlye.css

Add this to your main CSS file.

Quick use guide

Create the select button or input button

First, you will need to create your select or text input elements. Make sure that they have an appropriate ID that we can reference later.  You can have as many select or text input elements as you want to reference the itemButton() class.

Take a look at the example below:

Here we have added a select element with an id of “items”. We also have a text input with an ID of “tags”. The “tags” element also has an “addTag” button that the user can use to add their tags.

Create a div or span for your item buttons to go

Next, we need to create a location to display your item buttons. In the example below, I have used a div directly below the select or input elements.

Importing the itemButton() code

Our next step will be inside the script tags of our HTML file. If you are importing just the input.js file into your HTML file you will need to invoke you script tags as a module :

If you are importing more than one file, like I am in the example, I recommend you import your Javascript files like this:

In the example above, my two files are in the resources folder. The items.js file is just the file I have stored my list of select items.

Add event  listeners

Your next task is to add event listeners for each of your elements. For me, I will add an “input” event for my select element.

For my text input, I will add both a “keypress” (Enter) listener if the user hits enter after typing in their items in the “tags” text input or a “click” if they hit the “Add” button. We will also clear out the tags after each use.

Take a look at the example:

itemButton()

itemButton().add()

Now it’s time to add the button. We do this inside each event listener.

The add() method takes three arguments:

  • items – A string containing a single item or comma-separated list of items.
  • selectionsLoc – This is a string containing the ID reference of the location you want to display your buttons, usually in a div or span.
  • >numSelections – The maximum total number of items you wish to have the user select.

itemButton().add(items, selectionsLoc, numSelections)

Back to our example for our select element, our item is the value of the current selection. The location that we want to display our item buttons is theitems-selection div and the maximum number of items that our user can add is 2.

For our text input, the value is the comma-separated string of values that the user enters. The location the button items will be displayed in will be the tags-selection div and we will allow the user to add up to 10 items.

itemButton().list()

To get a list of item buttons from any of your assigned areas that display them, you can use the list() method.

This method takes one argument, the element id that the item buttons are contained in. The list method will return an object of key-value pairs containing:

The example

This example file setup is as follow:

  • index.html
  • main.css
  • resources
    • inputs.js
    • items.js

Here is the sample HTML file below:

And the resources > items.js file for the select element.

The Wrap Up

I hope you found this small library useful for creating your own buttons. You may wish to make style changes to your buttons to match your own colour theme.

You may also wish to extend or reduce the length of characters for each item. You can do this in the input.js file on line 37.

You can download a copy of the example here:

itemButton.zip

I really like hearing how people apply these components to their own projects. Feel free to share in the comments below.

If you found this tool useful, please click the like button so I know that I am making good content. Or if you want to get updates on my latest posts, please subscribe (below the comments).

 

~Yagi

Google Sheets Beginners: Editing Excel and ODS format files in Google Sheets (31)

You can now work on Excel and Open Document Format (ODS) file right in Google Sheets without converting the file to a Google Sheets file. This makes Googles Sheets a power collaboration tool.

In this tutorial, I’ll cover,

  1. How to upload an Excel sheet to your Google Drive 00:16
  2. Adding an Excel file from your email 01:04
  3. Directly editing an Excel sheet from your email 01:25
  4. How do I know if it’s an Excel, ODS, or Google Sheet? 01:34
  5. Differences in Google Sheets from your Excel sheet 02:07
  6. Benefits of editing in Google Sheets to transfer easily. 02:55
  7. Where has my edited/ opened Excel sheet gone? 03:12
  8. Downloading your file from Google Drive 03:47
  9. Comparisons in sheets, from your Drive to Excel 04:17
  10. A different way to download 05:01
  11. Converting Excel to Google Sheets. 05:17

If you enjoy the video and want to learn more about how to use Google Sheets, check out the Youtube Playlist:

Google Sheets Shorts: Beginners

Want a solid step-by-step course to become a pro at Google Sheets? Udemy has some professional courses that will turn you into an admin ninja!

I’m a huge fan of Justin Mares, Mastering Google Sheets course. Sign up today*

 

*The above affiliate links have been carefully researched to get you to what you specifically need. If you decide to click on one of these links it will cost you just the same as going to the site. If you decide to sign up, I just get a little pocket money to help pay for the costs of running this website.

Google Sheets Beginners: You Can Create Custom Page Breaks for Printing and Exporting (30)

Yeap! That’s right. Google Sheets allows you to set custom page breaks for your Google Sheets tabs. So you can print exactly what you want on each page.

  1. What are custom page breaks? 00:00
  2. How custom page breaks work 00:30
  3. Turning custom page breaks off or on 00:58
  4. How to move custom page break lines 01:14
  5. Deleting a page break. 01:33
  6. Resetting all page breaks 02:08
  7. Saving or printing with your custom page breaks 02:28
  8. Removing portions/pages to print or save 03:13
Watch this video on YouTube.

If you enjoy the video and want to learn more about how to use Google Sheets, check out the Youtube Playlist:

Google Sheets Shorts: Beginners

Want a solid step-by-step course to become a pro at Google Sheets? Udemy has some professional courses that will turn you into an admin ninja!

I’m a huge fan of Justin Mares, Mastering Google Sheets course. Sign up today*

 

*The above affiliate links have been carefully researched to get you to what you specifically need. If you decide to click on one of these links it will cost you just the same as going to the site. If you decide to sign up, I just get a little pocket money to help pay for the costs of running this website.

Google Sheets Beginners: Printing your Google Sheet (29)

All the options available to you when printing your Google Sheet can be quite overwhelming. Find out everything you need to know about printing your Google Sheets documents, tabs and selected ranges.

In this tutorial, I’ll cover,

  1. Ways to access the print button 00:05
  2. Choosing your paper size and orientation 00:30
  3. Using the scale function to resize your sheets to print 00:48
  4. Using margins to effectively print better 01:38
  5. Altering custom page breaks 02:02
  6. Formatting your sheet 02:28 
  7. Formatting – Gridlines 02:29
  8. Formatting – Notes 02:45
  9. Formatting – Page Order 03:15
  10. Formatting – Alignment 03:29
  11. Adding/ Creating Headers and Footers 04:15
  12. Customizing your Header and Footers 04:42
  13. What are Repeat Frozen Rows? 05:32
  14. Printing your Entire Workbook 06:12
  15. electing parts of your Workbook to print 06:26
  16. The Final Print 07:30
Watch this video on YouTube.

If you enjoy the video and want to learn more about how to use Google Sheets, check out the Youtube Playlist:

Google Sheets Shorts: Beginners

Want a solid step-by-step course to become a pro at Google Sheets? Udemy has some professional courses that will turn you into an admin ninja!

I’m a huge fan of Justin Mares, Mastering Google Sheets course. Sign up today*

 

*The above affiliate links have been carefully researched to get you to what you specifically need. If you decide to click on one of these links it will cost you just the same as going to the site. If you decide to sign up, I just get a little pocket money to help pay for the costs of running this website.