Not pulling in app variable data into composite component

Hey guys,

I’ve created my composite component and set up the properties with 2-way binding for 3 properties. I’ve bound the properties to the specific fields in my composite component and outside the composite component I’ve done the binding of the properties back to the app variable, but when I test this in the Appgyver preview app, nothing is showing. There is no data and essentially the component isn’t on the page.

My composite component is essentially a table and I’ve used a composite component as I believe that is what I need to use to get all of the complexities of the table into 1 element. All the data for the table is coming in via 1 API call with Xano as all the data is stored in 1 table in Xano.

Any help would be much appreciated.

Thanks,
Eoin

@Steve_Stava as the resident Appgyver and Xano expert would you know why my Xano data isn’t appearing in the preview app.

BTW thanks for the youtube videos - they have been a great help.

Thanks,
Eoin

Thanks! It is great to hear that they are helpful.

For your Xano data issue, can you share screenshots of the Data Resource setup you have in AppGyver and the API setup in Xano?

If you haven’t, can you run the Test in AppGyver for your api and share the return code you get?

This will be a good start to get me an understanding of what’s up :slight_smile:

Thanks!

Thanks for coming back to me Steve,

Screenshots below.

API base in Appgyver

Data Variable in Appgyver

API in Xano

Test in Appyver

The test does work and it brings in the data ok but it just doesn’t show in the Appgyver preview app. So I’ve included some more context and screenshots below.

This is the layout that I’m trying to replicate for my habit tracker app.

There are 3 pieces of info from the API call that need to be displayed.
Habit name - which is down the left column
Day and Date - which is across the top row - this will be incremental as in Monday, Tuesday, Wednesday, in case the user completes a habit on Monday and not on Tuesday this should still display in the UI.
If the habit was completed or not - which should be displayed in the cells corresponding to the habit and day/date.

Composite properties

Composite view

Outside the composite view

In the Appgyver preview app the page is blank.

As the API call is working I think I’m either missing a binding step or the API call in Xano is structured incorrectly. Not sure where the issue lies.

Many thanks in advance for your assistance with this,
Eoin

I hope you don’t mind the back-and-forth of my debugging questions :grinning:

I typically add an Alert flow function coming out of the Get Record Collection item that calls the API. Add any dialog title you want and then under Optional Inputs select the “Output value of another node” binding type and then the record returned from the API call

When you run the screen and it calls the api you should see an Alert screen that shows the whole JSON response from the Xano call. I use this simple approach to make sure the api is working in the context of the screen and not just the Data Resource Test call.

You can also hook an Alert up to the 2nd output node on the Get Record Collection flow function to see any error that might come back if the api is failing instead of succeeding.

If all of this looks good then knowing what your data variable binding looks like to your component would be of interest. After your Get Record Collection flow function, I am assuming you have connected a Set Data Variable function that assigns the Get results to the data variable you are using to bind data to the Component fields?

No problem with the debugging questions Steve - this is all good learning for me. FYI I’m fairly new to no-coding so this is great to see how to do proper debugging.

So from what I can tell I didn’t do any of the logic that is required for this. I hadn’t come across any support material on composite components so i’m shooting in the dark on this 1.

I ran the test out of the Get Record you asked for and it worked grand. Screenshot below.

However, there is still no table being displayed on the page but that will be someting to do with the logic that i’m missing no doubt.

I’ve added the Set App Variable flow function to the end of the Get Record Collection node but not sure where to take the logic from here.

So for my data variable binding i’ve set up the internal properties and bound them to the fields in the component.

Then bound the properties ‘outside’ the composite to the data variable

Apologies for being such a noob about this. Perhaps it is the logic that I need to finish off to get it all to work? Are you able to tell me what the logic is that I’m missing.

Thanks,
Eoin

No apologies needed! I am going to be on a meeting for the next hour. I will give you a detailed answer after, but the short version is that you want to put a Set Data Variable after your Get flow function. It will allow you to directly bind the results from the api to the Data Variable (not page variable).

Here is a screenshot of an example from my app:

1 Like

Okay, I decided to take the lazy route. If you watch my existing video (link below) from about 6:30 minutes in to about 11:00 minutes you will see how to build out the get collection and data variable aspect of the get call.

Go through that and make sure you are setup the same way.

Also, instead of trying to get the custom component working right now, lets try to do a simple list and populate it with the Repeating data coming back from the Get flow function (same as what is done in the video)

This will make sure that all the “mechanics” are working correctly. You can just have the habit_id or habit_name or something displayed to confirm that the api not only worked (which is does) but that the data variable is populated and is able to populate a simple list with the repeating data in the data variable.

Let me know what questions you have! (FWIW, this is the process I go through as I build something out. It helps me make sure each portion I add works and then I add another level of complexity :slight_smile:

All good Steve - thanks. I hadn’t picked up that the large list item was a composite when watching the video :man_facepalming:t2:

That is working now then. I’m able to populate the habit name and habit description into the large list item.

I guess that just leaves doing the same thing but with your composite component. Is it safe to assume that your composite component still doesn’t display any data?

Yes its not displaying any data at the minute. I probably built it out wrong though.

So I’m looking to days the day/date along a top row, the habits.name and habits.icon in the left hand column and the cells of the table to have a tick icon that correspond to the habit and day if the habit was completed on that day and if not completed then no tick.

Very similar to this except the habits aren’t grouped under a heading. They are just individual habits.
Screenshot 2021-02-16 at 23.17.02

To accomplish the layout I set an overall container > scroll container (for horizontal scrolling) > row (which gives 1 row to be the day/date) > made the left hand cell 50px wide and called it white space > cell 2 to repeat with data.get_habit_tracker1[0].date.

i then dropped in another row for the habits, again made cell 1 50px wide > set a container inside this and set it to repeat with data.get_habit_tracker1[0]._habits.name to make it repeat down instead of across > and set cell 2 to repeat with data.get_habit_tracker1[0].completed.

I hope that makes sense. I’m now thinking that that isn’t the right way to go about it.

Thanks,
Eoin

I think it would be good to take the layout step-by-step. I did an example as just a normal set of controls on a screen. I didn’t worry about the composite component aspect of it yet. It isn’t pretty and it doesn’t do the checkmarks for each date but it is a start.

I also hard-coded a couple of page variable list objects to use as the data for what is shown below. This allowed me to focus on how to lay out the screen before I addressed dealing with the real data returned from the api :+1:

The goal is to eliminate each complex thing one step at a time. It will make it easier to find where the problems are.

If you work at getting the layout right with hard-coded data, then you can take the next step and use the real api data.

After you get the real api data working, you can convert the layout on the screen to a composite component.

You’re awesome Steve. I really appreciate you guiding me through your process for building this stuff out.

I’ve been able to replicate this exactly on my end.

It’s after 1am here in the UK so I’m going to get some sleep and pick this up again in the morning. I don’t suppose you have any ideas about getting the habit.completed element (checkmarks) into the layout.

Many thanks - it is most appreciated,
Eoin

Here is a rough effort for the checkmarks.

I used a checkbox component, but I think you will get a better look and feel if you use icons (after you get this working :slight_smile: ). You will have to use a formula (if statement) that checks the value of the habit status for the day and then specifies the highlighted checkmark icon (checked) or a grey checkmark icon (not checked). Remember to leave this for later. I just wanted to mention the option while I was thinking about it

Here is my initial effort:

Also, I added a list object to the existing habit_list variable. The additional habit_status_list in the habit_list variable will allow you to have a list of statuses per habit. This is used to do a repeat area for the checkmarks.

You will have to setup some formulas to handle the scrolling of the days and at the same time scroll the statuses left and/or right according to how the days are scrolled

I would recommend watching Mevi’s video on creating a custom calendar. You won’t be using exactly what she has done, but she has a great approach to using formulas to manage the moving from one month/year to the next that you should be able to alter and incorporate for what you are trying to do.

1 Like

Hey Steve,

Thanks for the video from @Mevi on setting up scrolling. I’m getting stuck on how to restrict the number of items that appear in the bar at the top though. All the items that i’ve entered as initial values in the page variable are appearing and i’m not sure how to restrict it to only show a certain number.

In Mevi’s videos she is able to restrict the number of columns to 7 based on the width style but when I do the same thing it doesn’t restrict the number of columns in view.

Also Mevi is able to do the scrolling by using “months” and “years” but I don’t have something like that in my variables pre-built that would allow me to use in the formula.

I’m clearing missing something here. Are you ok to show me i’m missing again. Apologies for keep bothering you with this issue.

I also changed the layout around to display the days of the month in the rows and the habits in the top row as this layout will use up the space on the screen better than the other way around.

Thanks,
Eoin

1 Like

You will need to adapt her approach to fit yours. One of the key elements to what she has done is to have a Container set to Horizontal scroll for the list of days. Since it is a calendar, she wants to have a maximum of 7 days shown horizontally. That is where the 14% (100% divided by 7 = 14%) width comes from for the individual days (The individual day container is the container that has the Repeat set).

For your width calculation, you need to decide how much of the screen should be taken up by the horizontal scroll Container (75%? 80%?, 85%?), set the Container with the horizontal scroll to that %, and then divide that amount by the number of Repeated items you will allow in that space.

You might also need to set a specific height for the Horizontal Container that has the repeated elements in it. The reason for this is that you don’t want the height of the Horizontal scroll container to change. On the Calendar example, the height changes to show the full month. Your approach is to show a single row of items limited to the horizontal space you have given them.

I am pretty sure I am missing details, but my goal is to give you enough information that you can work through this one step at a time.

Feel free to keep asking questions as you progress and hit new issues!

Thanks Steve - I appreciate you letting me ask you questions as I work through this and I totally understand you are giving me pointers to the info I need - at the end of the day this is something that I’m keen on learning so this is much appreicated.

I’ll keep plugging away here and let you know how I get on.

Thanks,
Eoin

1 Like

Hey Steve,

I’ve still been struggling with this one. So I figured out why I had too many items appearing in the date_list_row. I had set the % width but because I’m not wrapping children I was getting more values appearing outside the container. So the month (March) is set to 20% with the dates container set to 60% and the repeating date container set to 25% so there are 4 dates appearing in the top row. However unless I use SLICE(pageVars.calendar_days, 0,4) when setting the repeat, then more dates will appear outside the date_list container. I’m not sure if using SLICE is the correct approach for when I need to make it scroll on the tap of the arrow button.
Note that I’m not using the horizontal scroll component as Mevi didn’t use that and I can’t see how to make 2 horizontal scroll components scroll at the same time; to make the check marks scroll with the scroll of the date component. (That would be the preferred way if that exists)

In Mevi’s formula for the assigned value of the calendar_days page variable - I understand that I want to create a new array and assign this to the current_date variable. (I have called this variable current_view as it makes a bit more contextual sense for my use case)

My understanding is if I want to only show 4 days at a time in the view then I create an array with 4 days. So I GENERATE_RANGE(1, 4, 1) to create 4 days. Therefore my formula for the set page variable is
MAP(GENERATE_RANGE(1, 4, 1), index.pageVars.calendar_days.id). As I’m looking to index the page variable calendar days to generate numbers out of it. (I came up against an error when using index:pageVars.calendar_days.id as the system didn’t like the : although the documentation on the function appears to show that is how it should be used)

However this doesn’t appear to be working as I get no data when I preview the app.

I’ve been banging my head off walls on this for the past 3 days and even did some videos on JavaScript to help me understand the formulas function in Appgyver a bit better. (I know the formula’s aren’t exactly JS but they are somewhat similar).

Do you know what is wrong with my formula for the set page variable MAP(GENERATE_RANGE(1, 4, 1), index.pageVars.calendar_days.id) ?

Many thanks in advance,
Eoin

Good day Eoin!

I like your approach of using SLICE with the list of dates in the top row. Since you have a set number of dates to show at a time SLICE works great to get the first 4 dates and then when a user presses the right arrow, you can SLICE the next 4 dates. By using a Page Variable to represent the location in the date list, you can control going forwards (+4) or backward (-4) in the list. You will want to have a confirmation that the date number doesn’t go less than 1.

To have the Habit checkmarks match the dates being shown you might need to use the SELECT_BY_KEY function to get specific Habit items and then a FIND_BY_KEY to get the specific date for that Habit.

You would have this formula in the Text Color style of the Repeating checkmark Icon container.

What happens with this approach is that the formula will be executed each time the system creates the repeated items on the screen. It will evaluate the function based on the “current” item it is rendering to the screen.

If I am thinking through this correctly, it will be similar to how Mevi did her “highlight” current date approach.

I am guessing this sounds a little confusing :upside_down_face:

Feel free to ask questions. Also, it might help to create a more simple test formula for the Text Color to make sure you understand how that is working before you do the nested function with SELECT_BY_INDEX and FIND_BY_KEY.

1 Like

Thanks for all of this Steve,

Apologies for my delayed reply - I’ve been back to the day job this week so have a lot less time to work this through.

I’ve started using the data variable to pull in data from Xano instead of using the test page variables and I’m getting the habit name ok.

The dates aren’t pulling in but this is likely because Xano uses Unix timestamps and so Appgyver isn’t rendering these. To clarify for the current_view page variable (which controls the dates that are currently in view) I just need to assign the date completed column (which contains the date on which the habit was completed or not) from Xano? I would have expected the unix timestamps to appear here if this is the case.

To convert the Unix timestamps in Xano to human-readable values in Appyver, is this best done in the function stack of the API in Xano?

I think these 2 points (confirming the value bound to the current_view page variable and converting the timestamps) are the last 2 things to get this up and running.

Many thanks,
Eoin