mirror of
https://github.com/noodlapp/noodl-docs.git
synced 2026-01-12 07:12:53 +01:00
Initial commit
Co-Authored-By: kotte <14197736+mrtamagotchi@users.noreply.github.com> Co-Authored-By: mikaeltellhed <2311083+mikaeltellhed@users.noreply.github.com> Co-Authored-By: Tore Knudsen <18231882+torekndsn@users.noreply.github.com> Co-Authored-By: Michael Cartner <32543275+michaelcartner@users.noreply.github.com>
This commit is contained in:
Eric Tuvesson
539
library/modules/gsheets/guides/filtering/README.mdx
Normal file
539
library/modules/gsheets/guides/filtering/README.mdx
Normal file
@@ -0,0 +1,539 @@
|
||||
---
|
||||
title: Google Sheets Filtering
|
||||
hide_title: true
|
||||
---
|
||||
# Google Sheets Filtering
|
||||
|
||||
## What you will learn in this guide
|
||||
|
||||
This guide will look at how we can apply filters to our Google Sheets data and use that in our example app.
|
||||
|
||||
## Overview
|
||||
|
||||
If you haven't already followed the previous guides for the Google Sheets Module, it's recommended to do that before starting this guide. You can find them [part 1 here](library/modules/gsheets/guides/setting-up/ and [part 2 here](/library/modules/gsheets/guides/park-details).
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
We will go though the following steps:
|
||||
|
||||
- Creating a visual filter component.
|
||||
- Using the Query Sheet Aggregate node to pull out specific data from different columns in the Google Sheet and then ause that data to populate a Dropdown node and Slider that will be used for filtering.
|
||||
- Creating filters on the Query Sheet node.
|
||||
|
||||
## Creating the visual Filters component and adding it to the App component
|
||||
|
||||
Let's first create a new visual component that we will call Filters.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
To begin with we will style the Group node in the Filters component like this:
|
||||
|
||||
<div className="ndl-image-with-background s">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
<div className="ndl-image-with-background s">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
We will soon get back to building out this component, but before we do that, let's add some functionality and visuals in the App component so that we can bring up our Filter component. The first thing we will do is to add a Button. Let's call it Filter Button.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
Then let's style the button. We will remove the label and use an icon for the button just like in the images below. It's important that the Button's Position property is set to Absolute. That way we get it to float on top of our Park Details view.
|
||||
|
||||
<div className="ndl-image-with-background s">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
Now that we have a button, let's add an area for our Filters component. Let's add a Group like this:
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
This Group has a bit of styling, and again it's important that the Position is set to Absolute so that it will be on top of our Park Details. Here's the actual styling for the Group.
|
||||
|
||||
<div className="ndl-image-with-background ">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
Let's add our Filters component as a child to the Group. The visual node tree in the App component should now look like the first image below, and your preview should look something like the second image.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
## Hiding and Showing the Filters component
|
||||
|
||||
We don't want the Filters component to always be visible, it should only show when you click the Filter Button, and then if you click the Filter Button again, it should hide. We can easily add this functionality by using a Switch node, and hook it up like below:
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
Now, when you click on the Filter Button you should alternately hide and show the Filters component.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
## Finishing the visuals for the Filters component
|
||||
|
||||
Let's select the Filters component again and finish building the visuals. The idea is that we should be able to filter the list of national parks based on which state they are in and/or what size they have. A Dropdown node would be a good pick for a UI element to select a state from, and to choose a size, a Slider node would be good to use. Add nodes to the Filters component so that you have a visual tree that looks like the image below. We will go through each node and it's properties next.
|
||||
|
||||
<div className="ndl-image-with-background ">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
The Dropdown node that we will use to select which state to filter on has been styled as below:
|
||||
|
||||
<div className="ndl-image-with-background ">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
Next we have a Group node that holds two text nodes. The Group has been named Slider Info and it has the following styling:
|
||||
|
||||
<div className="ndl-image-with-background ">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
The two text nodes that follow have slightly different styling from each other. The first one is a Label for the Slider and it has the following styling:
|
||||
|
||||
<div className="ndl-image-with-background ">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
The second Text node that will hold the Current Slider Value looks like this:
|
||||
|
||||
<div className="ndl-image-with-background ">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
Lastly we have the Slider node where we have only changed the padding a bit:
|
||||
|
||||
<div className="ndl-image-with-background ">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
## Using Query Sheet Aggregate nodes to set the min and max value of the Slider
|
||||
|
||||
The Slider component will be used to set a number that we want to be between the smallest sized national park and the largest sized national park. In our Google Sheet we have a column for size so it would be cool if we could figure what the smallest and largest number is in this column. This is where the [Query Sheet Aggregate](/library/modules/gsheets/node-docs/query-sheet-aggregate) node comes in. This node is used to do aggregate data queries on a column from a public Google Sheet which is exactly what we are after here.
|
||||
|
||||
Let's first add a Query Sheet Aggregate node to our Filters component, and fill in the following properties:
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
As you can see we need to tell the node which Google Sheet document it should look at (Document Id: 1gjttBIT4bHGFS8ynF31DoYw143ZY3UAiwopAW0N97KQ) and which sheet in that document we are interested in. Once the node has that information it will present a list of all the columns that the specific sheet has. Here we want to pick the Size (km2) column, and then we can choose how we want to aggregate the data of that column. We want to set up a Slider with a minimum and maximum value, so let's select Max to get the maximum value of the Size (km2) column.
|
||||
|
||||
<div className="ndl-image-with-background ">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
Then we connect it to the Slider like this:
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
Now we need another Query Sheet Aggregate node to get the minimum value so let's add one and set it's properties as follows, and also hook it up as in the second image:
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
Now the Slider has it's min and max value set, so let's now make sure that we show the current value of the slider in our Current Slider Value Text node. It would also be nice to show that the number is in km<sup>2</sup> so we will add a String Format node and set it up like this:
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
Then let's connect everything like this:
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
The reason we hook up the result from the Query Sheet Aggregate - Min Size, is so that we show the initial slider value when we first open up the Filters component. The Value output from the Slider only updates as we interact with the Slider so the initial value needs to be set from the Query Sheet Aggregate - Min Size.
|
||||
|
||||
## Getting a list of all states
|
||||
|
||||
Now that we know how to use the Query Sheet Aggregate node, let's use it again, to get a list of all states that are in our Google Sheet for US national parks. This time we will set the Aggregare property to unique which means the node will return an array of all the unique values from the states column.
|
||||
|
||||
?> Note that some parks span two states, e.g. the Great Smoky Mountains are in both North Carolina and Tennessee. We have chosen to treat North Carolina, Tennessee as it's own option in the states list. A different solution would be to have two entries for Great Smoky Mountains, one for each state it's in.
|
||||
|
||||
<div className="ndl-image-with-background ">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
Let's connect it to our Dropdown node, and then click on the Dropdown list in the preview.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
This looks pretty good, but there is one problem. There is no option for selecting All states which is the initial state of our list. To solve this, we need to add another option to the array of states.
|
||||
|
||||
## Adding All option to states Dropdown
|
||||
|
||||
The result we get from the Query Sheet Aggregate - States is an array of items, so let's create a new Array and call it AllStates and then connect the result from Query Sheet Aggregate - States to the Items input of the Array:
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
Next we want to use a Create New Object node to create a new object that we can then insert into the Array. Set up the Create New Object node like below and then we connect it like in the second image.
|
||||
|
||||
<div className="ndl-image-with-background">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
Now that we have a new Object, we want to insert it into our Array and we do that with an Insert Object Into Array node. Connect everything like below:
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
Our AllStates Array contains one extra option, the All option. Before we connect it to our Dropdown, let's make sure that the Array is sorted alphabetically, so we will connect an Array Filter node like in the image below. Here it's important that we use the Done signal from the Insert Object Into Array node, to tell the Array Filter to do the sorting, as that ensures that the All option is in the Array before we do the sorting.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
The Array Filter node should sort on the Value property of the items in the array, and we can do that by setting it up like this:
|
||||
|
||||
<div className="ndl-image-with-background ">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
We could now make a connection from the Array Filter to the Dropdown, but as you can see the Filters component is getting quite big in terms of nodes.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
Let's turn the selected nodes below into it's own Logic Component.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
## Creating Add All Option component
|
||||
|
||||
From the Component Actions button, select Logic Component and name it Add All Option.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
Then from the Filters node, cut out the marked nodes and paste them into the Add All Option component (use standard keyboard shortcuts for cutting and pasting). It should now look like below.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
Let's add a port to the Component Inputs node that we call Items:
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
We also want to send out the sorted array, so let's add a port on the Component Outputs node called Sorted Items.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
Now we just make the following connections.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
Back in the Filters component let's add out newly create Add All Options node, and hook it up like this:
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
Now we have a nice Dropdown with our All option as well.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
Only problem is there is no initial value set in the Dropdown.
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
We can easily fix that but adding a String node and giving it the value "A" and then connecting it like the image below:
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
## Adding filters.
|
||||
|
||||
All of our visuals are now set up. All that is missing are the actual filters. Let's work on those now.
|
||||
|
||||
First let's add a new Logic Component that we call State and Size Filter.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
Add two ports to the Component Inputs node called Selected State and Size. You can also delete the Component Outputs node, we won't need that.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
Jump back to the Filters component and add the State and Size Filter component and hook it up like this:
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
Now, we head back to the State and Size Filter component. Let's first make a filter for Size. We will add a Query Sheet node, and set it up like this.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
The Query Sheet node has a very nice visual filter builder so click here to add a filter:
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
Then let's build out our filter using the visual builder. The following images show you each step. T
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
In this final step it's important to change the Value to Input, and then you can change the MyInput to a better name, like Size for instance.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
We are going to add one more Query Sheet node, and this one we will call Query Sheet State and Size Filter. Then add two filters to it so the final properties for it looks like this:
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
Next, we want to take the output from our Query Sheet nodes and hook them up to the Array node with the id Parks. If you remember from the previous guides, we are using this Array to feed the Repeater node that creates our list. If the Array is updated or changed, the Repeater node will automatically rerender, so everytime we get a new result from our filter nodes the list will update.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
So why did we create two Query Sheet nodes with two different filters. It's so that we can handle the case when we choose All as the option in the Dropdown list. All is not a state that exists in our sheet, so the filter that is looking at both state and size will fail everytime we feed A into it. So to handle this we will use an expression in combination with a condition node to check if we are looking at all states, in which case we will just filter on size, or if we have selected a specific state, then we can filter on both state and size. The images below first show the expression in the Expression node, and the second image shows how everything should be connected.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
## Summary
|
||||
|
||||
In this guide we added filters to our National Parks and used the Query Sheets Aggregate nodes. Hope you enjoyed it, and you can import the final project by clicking the "Import" button below and follow the instructions.
|
||||
|
||||
import ImportButton from '/src/components/importbutton'
|
||||
import useBaseUrl from '@docusaurus/useBaseUrl'
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
<img
|
||||
src={useBaseUrl(
|
||||
'/modues/gsheets/guides/filtering/filter-final-preview.gif'
|
||||
)}
|
||||
className="ndl-image small"
|
||||
></img>
|
||||
<ImportButton
|
||||
zip="gsheets-part3-1.zip"
|
||||
name="Google Sheets National Parks"
|
||||
thumb="filter-view.png"
|
||||
/>
|
||||
</div>
|
||||
217
library/modules/gsheets/guides/park-details/README.mdx
Normal file
217
library/modules/gsheets/guides/park-details/README.mdx
Normal file
@@ -0,0 +1,217 @@
|
||||
---
|
||||
title: Park Details View
|
||||
hide_title: true
|
||||
---
|
||||
# Park Details View
|
||||
|
||||
## What you will learn in this guide
|
||||
|
||||
This guide will continue to explore how we can build front ends to data from Google Sheets.
|
||||
|
||||
## Overview
|
||||
|
||||
If you haven't already looked at the guide for setting up the Google Sheets Module, it's recommended to do that before starting this guide. You can find it [here](/library/modules/gsheets/guides/setting-up).
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
We will go though the following steps:
|
||||
|
||||
- Using the Sheet Row node.
|
||||
- Building a simple details view for data from a Google Sheet
|
||||
|
||||
## Creating the Park Details component
|
||||
|
||||
First let's create a new visual component that we will call Park Details.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
Then, build out the following visual tree and then we will look at the properties for each node.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
First the properties for the top group, and the only thing that is different from the defaults is the white background:
|
||||
|
||||
<div className="ndl-image-with-background ">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
Next we have the Image node which is setup like this:
|
||||
|
||||
<div className="ndl-image-with-background ">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
The Group that we have called Text Content, only has some padding set:
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
We will be displaying the park name in the Text node that we call just Park Name, and the properties for that node are as follows:
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
There is another group in our tree, the Horizontal Group, that we use to lay out some of the other information, and the properties for this group are:
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
All three of the Text nodes that are inside of the Horizontal Group have the same styling which is the default styling of a Text node so there is no need to change any properties for these nodes.
|
||||
|
||||
Finally the Text node that we have named Description has the following styling:
|
||||
|
||||
<div className="ndl-image-with-background ">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
## Adding the Park Details to the App component
|
||||
|
||||
Now that we have built out and styled the visuals for our Park Details, let's add them to our App component. In the App component we will first add another group that we can call Details Container and then we add the Park Details as a child to that Group. It should look like this:
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
You should also see something like this in the preview window:
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
This is great, but it would be even nicer with some actual content!
|
||||
|
||||
## Using the Sheet Row node to get the correct details data
|
||||
|
||||
To get the correct content in the Park Details component, we will again use a [Sheet Row](/library/modules/gsheets/node-docs/sheet-row) node, so let's place it next to our visual tree.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
We need to tell the Sheet Row node which row we want to look at, and if you remember from the previous [guide](/library/modules/gsheets/guides/setting-up/), we already have a Variable named SelectedRowId. We set this everytime we click on an item in the list. Below you can see where in the List Item component the Variable is being set.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
Since Variables are global we can use that same Variable in our Park Details component and connect it to the Row Id input of the Sheet Row node.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
Now we can start to connect all the outputs from the Sheet Row node to our visual tree. Go ahead and make the following connections first, and then we will handle the remaining two.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
You still don't see anything in the preview window, unless you go ahead and click on an item in the list. In the image below I clicked on the Arches park.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
As you can see we haven't filled in the size information or the date for when the park was established so let's tackle that now.
|
||||
|
||||
The size that we are getting out from the Sheet Row is in km<sup>2</sup>, so it would be nice to add that at the end of the number. To do that we will use a String Format node, with the following set up, and then connected like in the second image.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
The Established date that we get from the Sheet Row is a Date type and it looks a bit strange if we connect it directly to our text node, so let's put a [Date To String](/nodes/utilities/date-to-string) node in between. After it's connected it will look like the image below.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
The last thing we will do in this guide is to make sure we set the SelectedRowId Variable to the first item in the list. We can do that in the App component like this:
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
Now everytime we reload the first item in the list will always be selected and we will always show something in the Park Details section.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
## Summary
|
||||
|
||||
In this guide we added a details view to our National Parks example using data from a Google Sheet. If you want to import the final project, click the "Import" button below and follow the instructions.
|
||||
|
||||
import ImportButton from '/src/components/importbutton'
|
||||
import useBaseUrl from '@docusaurus/useBaseUrl'
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
<img
|
||||
src={useBaseUrl(
|
||||
'/library/modules/gsheets/guides/park-details/first-item-selected-preview.png'
|
||||
)}
|
||||
className="ndl-image small"
|
||||
></img>
|
||||
<ImportButton
|
||||
zip="gsheets-part2-1.zip"
|
||||
name="Google Sheets Park Details"
|
||||
thumb="arches.png"
|
||||
/>
|
||||
</div>
|
||||
|
||||
In the next guide we will look at how we can apply filters to our Google Sheet data.
|
||||
364
library/modules/gsheets/guides/setting-up/README.mdx
Normal file
364
library/modules/gsheets/guides/setting-up/README.mdx
Normal file
@@ -0,0 +1,364 @@
|
||||
---
|
||||
title: Setting up the Google Sheets Module
|
||||
hide_title: true
|
||||
---
|
||||
# Setting up the Google Sheets Module
|
||||
|
||||
## What you will learn in this guide
|
||||
|
||||
This guide will show you how to include the Google Sheets module in a project and how to get data from a Google Sheet into your Noodl project.
|
||||
|
||||
## Overview
|
||||
|
||||
In this guide we will build a small application where we display a list of US National Parks. We will get the data for the parks from a public Google Sheet.
|
||||
|
||||
<div className="ndl-image-with-background s">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
We will go though the following steps:
|
||||
|
||||
- Install the Google Sheets Module in a Noodl Project.
|
||||
- Set up a Query Sheets node to pull data from a public Google Sheet
|
||||
- Create a small list based on the data from the Google Sheet
|
||||
|
||||
## Install the Google Sheets Module
|
||||
|
||||
The easiest way to get started with the Google Sheets Module is to use the "GSheets" template when creating a new project in Noodl. In that template, the Google Sheets module is already included.
|
||||
|
||||
However, if you have an existing project, or want to start from a different template, it's easy to get started as well. Just follow these instructions.
|
||||
|
||||
When in the project, open the "Library" tab to the left. Find the "GSheet" module and click "Add".
|
||||
|
||||
<div className="ndl-image-with-background s">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
After the module is imported, you should now be able to find the [Query Sheet](/library/modules/gsheets/node-docs/query-sheet), [Query Sheet Aggregate](/library/modules/gsheets/node-docs/query-sheet-aggregate) and [Sheet Row](/library/modules/gsheets/node-docs/sheet-row) nodes in the node picker. Right click in the node editor area to bring up the node picker. Look under "External libraries" to find the **Google Sheets** nodes.
|
||||
|
||||
<div className="ndl-image-with-background s">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
## Getting data from a Query Sheet
|
||||
|
||||
In this guide we will start building from the Hello World template.
|
||||
|
||||
<div className="ndl-image-with-background s">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
Go ahead and delete the text node and you should end up just having a Group node as in the image below:
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
Then style your group like this:
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
Before we build out our simple list UI, let's have a look at the Google Sheet that contains our data. You will find the document [here.](https://docs.google.com/spreadsheets/d/1gjttBIT4bHGFS8ynF31DoYw143ZY3UAiwopAW0N97KQ/)
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
The document contains three different sheets, but we are only interested in the sheet named Parks.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
To get all the data from the Parks sheet into our Noodl project we will use a Query Sheets node, so let's add that and have a look at the properties.
|
||||
|
||||
<div className="ndl-image-with-background ">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
The Document Id property takes the id of the Google Sheet document, and we get that from this part of the Google Sheet URL (1gjttBIT4bHGFS8ynF31DoYw143ZY3UAiwopAW0N97KQ):
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
Let's also fill in the name of the sheet we are interested wich is Parks. After you have done this, the properies of the Google Sheet node should look like this:
|
||||
|
||||
<div className="ndl-image-with-background ">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
We will leave the Use Column For Id property set to Unique id, but you can select a column that will become the Id of the Noodl Objects that will represent each row. It's important that the values in this column are unique. Since we have chosen Unique Id, Noodl will generate it's own id's for us.
|
||||
|
||||
We can now get the data from the Query Sheet on the Items output, so let's create an Array node and give it the Id Parks and connect it like this:
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
Now that we have all of the parks in an Array node, let's build out our list.
|
||||
|
||||
## Creating the Park List component
|
||||
|
||||
First let's create a new visual component that we will call Park List.
|
||||
|
||||
<div className="ndl-image-with-background ">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
The Park List component will be pretty simple. First let's enable scroll on the Group, by setting the following property.
|
||||
|
||||
<div className="ndl-image-with-background ">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
Next we will add a [Repeater](/nodes/ui-controls/repeater) node as a child to our Group. The [Repeater](/nodes/ui-controls/repeater) node is used to generate one component for each row in the Parks Array so let's also add an Array node and give it the Parks id.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
Then we connect it to the Repeater node like this.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
Now let's jump back to our App component and add a Group that we will call List Container.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
Let's set this List Container to be 400 px in width and then let's add the Park List component as a child.
|
||||
|
||||
<div className="ndl-image-with-background s">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
Now let's jump back to the Park List component and look at the Repeater properties. We need to tell the Repeater node which component it should generate, so before we fill this in, let's create our list items.
|
||||
|
||||
<div className="ndl-image-with-background ">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
## Building the list items
|
||||
|
||||
Let's create the visuals for our list items first by creating a new Visual Component that we call List Item.
|
||||
|
||||
<div className="ndl-image-with-background ">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div className="ndl-image-with-background ">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
The list items shouldn't be too tall so let's set an explicit height to 100 pixels and let's add some padding and change the Layout to Horizontal. We also want a nice bottom border.
|
||||
|
||||
<div className="ndl-image-with-background ">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div className="ndl-image-with-background ">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
The items should all show an image as well as the park name and which state the park is located, so let's add nodes so that we get the following node tree:
|
||||
|
||||
<div className="ndl-image-with-background ">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
Now set the Image properties like in the image below.
|
||||
|
||||
<div className="ndl-image-with-background ">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
The Group that holds the two Text nodes is using all the default settings so we don't need to change anything there, but set the properties of the Park Name Text node to:
|
||||
|
||||
<div className="ndl-image-with-background ">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div className="ndl-image-with-background ">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
The State Text node should have the following properties:
|
||||
|
||||
<div className="ndl-image-with-background ">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
Now that we have visuals for our list items, we can tell the Repeater node in the Park List component to use this as the template so let's do that:
|
||||
|
||||
<div className="ndl-image-with-background ">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
If you reload your project now you should see the following in the preview window.
|
||||
|
||||
<div className="ndl-image-with-background ">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
This is great, now let's make sure each list item displays the correct data.
|
||||
|
||||
## Using the Sheet Row node in our List Items
|
||||
|
||||
Let's go back to our List Item component and add a Sheet Row node.
|
||||
|
||||
<div className="ndl-image-with-background ">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
The Sheet Row node can point to a specific row in the Google Sheet, but we need to tell it which row by providing an Id. That Id we will get from a [Repeater Item](/nodes/ui-controls/repeater-item) node. This all works exactly the same as it does when you are working with the Noodl Query Records and Record nodes, and you can read more about that in this [guide.](/docs/guides/cloud-data/quering-records-from-database)
|
||||
|
||||
Connect the Repeater Item and Sheet row like below
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
Now, the Sheet Row node should have a bunch of new outputs. Let's hook them up like this:
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
You should now see something like this in your preview window, and you should be able to scroll your list.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
Before we finish, let's add a little bit of logic to highlight which List Item is selected. Create a States node and set it up like this:
|
||||
|
||||
<div className="ndl-image-with-background ">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
Let's also add an Expression node and set it up like this:
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
Finally we will add a Variable node with the name SelectedRowId, a Set Variable node, and a Condition node. Then we will hook it all up like this:
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
Now when you click on an item in the list it should become highlighted.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
## Summary
|
||||
|
||||
In this guide we built a list of National Parks using data from a Google Sheet. If you want to import the final project, click the "Import" button below and follow the instructions.
|
||||
|
||||
import ImportButton from '/src/components/importbutton'
|
||||
import useBaseUrl from '@docusaurus/useBaseUrl'
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
<img
|
||||
src={useBaseUrl('/modules/gsheets/guides/setting-up/parks-final.gif')}
|
||||
className="ndl-image small"
|
||||
></img>
|
||||
<ImportButton
|
||||
zip="gsheets-part1-1-2.zip"
|
||||
name="Google Sheets Getting Started"
|
||||
thumb="final-result.png"
|
||||
/>
|
||||
</div>
|
||||
|
||||
In the next guide, we will create a details view for our parks, and in the final guide we will look at how we can filter the data we get in the Query Sheet node.
|
||||
Reference in New Issue
Block a user