How can we help?

You are here:
< Back

Using table widget to display birthdays of the month 

 

Display data in a simple table format 

In this guide, we will use a Google Sheet, but, as usual, any type of datasource can be used, as long as it has a part that is similar to a table: It needs a list of objects and these objects need to have the same properties. In this case, we have a list of people and they all have properties “name” and “birthday”, as well as some random quotes. 

Add a table widget and double click it to open the data picker. Select our datasource. We need to select a path at least to our table level and mark the small table icon next to the row with the indices.  

Note that if you connected the datasource as type Google Sheet, the structure of the data is already known and you won’t need to select it:  

Next, go to the “Select columns” tab at the bottom of this window. We can also minimize the top part with the up arrow. 

Select some columnssuch as name and birthday. 

Next, go to the “Column level settings” tab either by clicking it or the edit icon next to one of the selected columns. 

We can make the name bold or give it a color if we want to. The birthday field is more interesting. 

If we turn on Special formattingwe can change the display format. Let’s say we don’t want to display the year and want to write the month/day with letters. 

Filter out people not born in the current month 

Open the data picker back upThis timewe will use the “Table level settings” tab and turn on “Hide rows based on filters”. 

Add and set up a new rule. 

columnselect the birthday. 

With these rules, we tell the table which rows to hide, so we need to select everyone who’s birthday we don’t want to display right now. So, set evaluation type to “NOT same month”. It is important choose this one, as “NOT this month” would also exclude anyone who was not born in the current month of the current year (in this case, everyone). 

After saving, and maybe refreshing the datasource, our table will only show the rows it is supposed to. 

Use a content widget for custom layout 

No matter what we do with this tableit would still look like, well, a tableWe can customize the layout of each row by using a content widget 

We use a page from a different content or just add a page in this one. In this tutorialwe will just add a new page here.  

Add some widgets, images, backgrounds, colors here. We will use text widgets, but if you have picture URLs or file names in your datasource, you can also add images. 

Set base data path 

In the content we will use for the one-person layout, we need to set up base data path. Go to the content properties / Data binding section and open this data picker. 

We need to select the same path we used for the table, and mark the level with the indices as pivot point. This time, it is also important to select the correct column (name or some kind of id) as the label. Label is anything selected below the pivot point. 

We also need to turn on “Change data row based on data row bound to screen or content widget” at the top of this window. 

Now go to the layout page, add a text widget and open the data picker (from the Other tab of the widget menu or Shift + double click the widget). Notice that “Depends on base data path” is already checked for us and we only need to select the last two levels in the path.  

Add as many widgets as you needMake sure when you bind a widget to datait “Depends on base data path”. 

Use this page in the table widget 

Let’s quickly go through the steps we need for the table widget again. 

Add a table widgetopen data picker (double click) and select our datasourceMake sure the table icon is next to the level with the indices (unless using Google Sheet). 

This time, we will only need on column in the “Select columns” tab. Select the same one we used as label for “Base data path”. In our case, it was the name. 

On the “Column level settings” tabselect this column and set type to “content”. Select the content and the page where we set up the layout for one person. 

Now save it and refresh datasources on the page if neededYou should see something like this. 

We still need to exclude people whose birthday is in other monthsso open the data picker back up and turn on “Hide rows based on filters” on the “Table level settings” tab. 

Add the same rule we used in the previous exampleColumn is birthday, and evaluation type is “NOT same month”. 

If we save and refreshwe will see fewer cardsbut they still show the same previewIt is because content widgets are not rendered in the editor. Save and open the preview to check if everything works correctly. 

Note: The font colors are different in this example contentbecause it can also be bound to data and we just added some fun rules to make it more colorfulbut its optional. 

We should also hide the header. To achieve this, go back to the table’s data picker and on the “Select columns” tab and delete the label for the selected column. 

Optional – automatic pagination 

If the number of birthdays per month and your card’s aspect ratio doesn’t make it practical to stack all on top of each otheryou can copy and paste the table widget multiple times and use “Limit rowsFor exampleif we need to be able to display up to six cardswe can copy and paste the table two timesset “Only display” to 2 for each table and “Skip first … rows” to 0, 2 and 4 respectively. 

Optional – multiple columns 

If the number of birthdays per month and your card’s aspect ratio doesn’t make it practical to stack all on top of each otheryou can copy and paste the table widget multiple times and use “Limit rowsFor exampleif we need to be able to display up to six cardswe can copy and paste the table two timesset “Only display” to 2 for each table and “Skip first … rows” to 0, 2 and 4 respectively. 

You can download the example content here