Table view change the colour of the current date row in a csv or google sheet table

Hi,

I am coming from MIT App inventor
Please have a look to the pictures attached as well as the aia file to finalise the challenge

I aim to create 3 columns (lables) along with the day lable (brk stands for breakfast, lun stands for lunch, din stands for dinner)
I uploaded a csv file that feeds that information(I will fill the meals later)
and then highlight (change the colours) for the whole row according to
the current date

Any Advice by any chance?
Thank you in advance :pray:

diet.csv (686 Bytes)

I would do that with formulas in Google Sheets.

More explanation on this will be highly appreciated
I am after an app and I don’t want the app to require any connection to the Internet
Local csv file or db to feed the table

You said you would use a Google Sheet. I guess it would have to be offline but I don’t think you can connect to an offline Google Sheet in Thunkable.

I can’t give you an example without knowing more about what you’re wanting to do. For example, “all cells in a row are yellow if it’s the current day (based on cell A1 being the date format) and all cells in all other cells are blue.”

Thanks for taking the time to reply
However
I’ve attached csv file
I am trying to create an app to organise a diet in a table
Head row is as follows
Date, what to eat for breakfast, what… For lunch, for dinner

October for instance
I want the to highlight the row that belongs to the current date
The data will be feeding from a csv file (or offline sheet)

So it should work offline no Internet connection needed

I hope it’s clear enough now what I exactly need to do

Check out this tread (JSON-Bound List Demonstration), it has an example project that creates a list (much like you have described) based on a JSON list. You will need to convert your spreadsheet to JSON. To do that, check out this thread Data Source Performance Workaround FOUND!.

The great thing about JSON is you can save it as a stored variable.

I hope that get you started.

2 Likes

Here’s a demo I made that shows how to do this with the data entered manually (since there’s no csv import feature… we need one!). I only put in the first 12 rows. The design consists of one row component and one label component and relies on the Any Component blocks.

https://x.thunkable.com/copy/29582d834b69991c3a70982ca85fb063

2 Likes

That’s fantastic job… Greatly appreciated
Wow…
Perfect, comprehensive and professional

The only issue now is the data source is filled manually
I wonder if the table of the whole year is already ready to feed the app in a format of csv, excel sheet or Google sheet
Is there any way to get the data from those preprepared files without need to connect to the Internet so that it can work offline?

Currently there is no way to import a local file. But a Text Input Box can accept VERY long strings (thousands of characters. You can cut and past your CSV file into a text box and parse it into a list. Try a 2 step approach. First use the convert text to list block with the separator of a NEWLINE block. Loop thorough the resulting list and convert each list entry into another list using the CONVERT TEXT TO LIST block again, but this time, use a comma as the delimiter.

Good Luck!

3 Likes

Thank you so much for the very professional reply
However for a beginner like me and for the sake of any viewer to this discussion, it will be always more beneficial if you can send me the implementation of the above perfect explanation in a form of demo file to go from there
Many of the terms mentioned are not easy enough for a person like me to understand yet :slightly_smiling_face:

3 Likes

:thinking: :thinking: :thinking:

When the form loads, cut and paste the CSV into the text input box. Click the button. Then the loop will give you the contents. You will have to do a lot more work to get it into the grid you displayed.

Unfortunately, what you are trying to do is pretty tough in Thunkable. Perhaps you should consider the built in controls thunkable has and change your UI to match what Thunkable can do.

1 Like

https://x.thunkable.com/copy/73ad26dd1b820b65fd6166dc5a583f36

I followed the above proposal and I copied the csv file and did paste it into input_box as suggested but got nothing
Where shall I see the data ?
I assumed that it will feed the data source and/or displayed in the webview component but nothing happened

Any advice?

I shared the link also I attached the csv filediet.csv (686 Bytes)

@samdar Your code is not correct. You used set list of rows twice but if you look at @drted’s screenshot, you need to use set list of columns inside the for each item loop.

1 Like

I modified your project a bit, @samdar.

https://x.thunkable.com/copy/838adef765b462e49c82446f87eb0741

Just preview the project and click the button.

I think with the data you have, you can just use a text string. So I copied the csv data from a text file on my computer and pasted it in. It does not work if I copy and paste from a spreadsheet (Excel, Google Sheets). The text has to have actual commas visible for it to work.

@drted, this is a very clever way to import the data. When I test this, though, it doesn’t quite work. It could be the way my csv is formatted. It joins the first column data with the fourth column. So instead of ev(6-8)•1•brk1 it’s displaying it as ev(6-8) 1•brk1. I think the newline character isn’t getting included when I copy and paste:

2 Likes

Nice work guys!

:clap: :clap: :clap:
That’s mastering in this platform
And a very thought out indeed
3 quick points

  • In MIT app Inventor we can split data at specific string can we do something similar here?
  • Also I don’t think we need input_box any longer?
  • where’s the code of highlighting of the current date row ?

Thank you so much for your comprehensive reply

You might also neet to set the text input to multi-line. I’m not sure, I didn’t have time to work it all out. THanks for picking up my slack!

2 Likes
  • where’s the code of highlighting of the current date row ?

I’m not going to build the whole project for you. The point of the forums is to get help with specific issues you’re having coding something. You now have the pieces you need to make this whole. Put everything together and then if something doesn’t work, provide details and screenshots if possible and we can help you more.

2 Likes