How do I create links within a page on my app? Like html anchor

[Cheryl_Rainfield]

Hi all,
I am new to Appgyver and to programming (though I know html).

In my app I created a page of crisisline links and resources that people can just tap on and it will open up the crisis line for their country and issue.

But how do I create links for within that one page on the app itself, like by country (Canada going to Canada section on the page)? The way in HTML we can create an anchor link so that a link goes to another area on the page.

I have attached the screenshot so that you can see what I mean.

Thank you,
Cheryl

[Mevi]

Hmm. There’s nothing like this that we would have at the moment available as far as I know, but you could do it so that if one of the USA / CANADA / UK / Worldwide texts are selected, you would hide everything other than the info for that area. It would basically be like soft tabs, except you might want to modify it so that if a region(tab) is not selected, all are shown.

[Cheryl_Rainfield]

Thank you so much for responding, Mevi, and for your thoughts; I really appreciate it! That might work (I just have to figure out how), but it would mean, if I understand you correctly, that there are big gaps of nothing? Since some of the resource lists, like for the US and Canada, have a number of resources.

I know we can use some javascript, so would something like scrollIntoView work? (I don’t know Javascript yet but am trying to learn pieces.) I saw this post here on using ScrollIntoView instead of anchor links: Replacing anchor links with JavaScript < JavaScript | The Art of Web

[Mevi]

No, it wouldn’t mean gaps! If you put each country section in a tab, and display one at a time (or all at once before any tab is selected), there will be no blank space to scroll. Try it out!

JavaScript can be used, but not all JavaScript works to command the native platform we have (React Native). As such the scrollIntoView might not work. Naturally, you can try it out if you prefer, but I do recommend giving the soft tabs a try.

[Cheryl_Rainfield]

Thank you so much, Mevi! I will try it, then. I might need help with a step; I’ll ask if i can’t figure it out.

[Cheryl_Rainfield]

I’m a little bit stuck in a few places. I apologize! I know html, but not other coding; I am new to this.

-I wasn’t sure where to assign the colour for each bottom of the cell, so i did in in the style, cell border, color. But should i assign the colour in the formula itself? If so, how exactly? Do I paste the number for the colour next to theme.$colorNotice and put an equals sign? Or what?

• I don’t know where to put " IF(pageVars.selectedTab === “info”, theme.$colorNotice, theme.$colorContentSubdued) "mentioned in the soft tab tutorial. I think I add the logic utility “if condition” to the component tap? And then for the If condition, i selected “true,” and then bound it to formula? That’s what I did, (deleting the “true” that was there) and added “usa” instead of info for the first tab, but i got some errors: “text type validation is not assignable to true/false” and about colours. I’ve attached a screenshot.

-I’m also not sure if I put the values in the right place; under “selected tab” for the variable. The tutorial just said “give it a default value” but i don’t see anything that says “default value.” So i tried different things, and then found that adding each word to “example value” separated them out, which I think is good.

-For the Set Page Variable for each cell’s tap event, I dragged the “set page variable” from the logic, connected it to the “if condition” … " And then for the “assigned value” under properties i typed the name of the button, like “usa.” (If that’s right, I think it would help new users like me to explain that step. Each of these steps.)

-for showing/hiding tab content, this made more sense to me because i’m used to html, so I put each container directly below where I want the user to go to/see on button click, like below my actual place for USA or Canada info. Bu i wasn’t sure where to put the title like “usa” i just put it as the component display name? And where to put the formula. I linked it to “visible” on the right sidebar under properties.

But I either got a step wrong, or many steps wrong, because it’s not working on my app.

Please could you tell me what to fix? I would so appreciate any help.

Thank you,
Cheryl

[Mevi]

Hi!

The formula in the image is correct, but you have bound it to a IF node, which should only return true or false. The first output is triggered if true and the second if false. More on the workings of logic nodes e.g. here.

However for the soft tab tutorial, this needs to be on the Style tab, bound with a formula to the text/background/whatever property you want to change the color of. Do this by clicking on the blue/gray paperclip icon next to the property you want bound, and select “Formula”.

I think you might benefit a lot from our App Programming 101 course that we just released last week! Please check it out and see if it answers your questions.

Here’s a video of a quick example I whipped up which shows where the page variable setting and visibility things are.

[Cheryl_Rainfield]

Thank you, thank you, thank you Mevi, for explaining this and for the incredible example you gave me! That was so kind of you. I will go over all of this today. I didn’t know I could bind things using the paperclip!

And I just started the App Programming 101 course last night (since I got an email about it from Appgyver yesterday). That helped me understand variables more, and I’ll keep going through the videos.

Thank you,
Cheryl

[Cheryl_Rainfield]

Hi Mevi (smiling at you),
Your video and explanation helped a lot! But…I am still doing something wrong because now the tabs, although clickable, do not move to the area, and there is a solid line beneath them all until one is pressed and then the one that is pressed fades. Also they’re not separate colours.

AND I just moved all of the info for each country into their own separate container that is marked pageVars.selectedTab === “worldwide” thinking that would solve things - and now on the app it only shows the tab titles but NONE of the info! I don’t understand what I’m doing wrong.

I bound the IF(pageVars.selectedTab === “info”, theme.$colorNotice, theme.$colorContentSubdued) to the border color using the paperclip in Style tab, with Formula. I specified the colour because it seemed to disappear otherwise. Maybe that was wrong?

I would so appreciate any help.

Also? I love the unicorn you used!

Thank you,
Cheryl

[Mevi]

Hi!

I’m not sure I understand completely what you mean, but I’ll try to help

For the worldwide, there doesn’t need to be a separate tab for that unless you really want: you can change the logic so that if no selected tab is set (IS_EMPTY(pageVars.selectedTab)) then all are shown (so the visibility of each tab container would be IS_EMPTY(pageVars.selectedTab) || pageVars.selectedTab=="USA" etc.). Then you could set pageVars.selectedTab==null from clicking the worldwide tab and all tab containers would show.

As for the colors, what is the end result you want? Only the selected tab having a bottom border? You could just set it to black if the pageVars.selectedTab was the value of that tab and white if not.

[Cheryl_Rainfield]

Hi Mevi (smiling at you)

I went back to the SoftTabs instruction page you sent me to, and saw this new link to Conditional Renderer. I tried it out on another page where I need to do the same thing, and I actually got it WORKING! I am so happy! I even added two more cells in a row below, and got them working, too, adding each of the containers of info to the conditional renderer. Hurray!!!

But I can’t get the colour to work. This time I thought I did it correctly, by binding the formula to the bottom cell, and then choosing the color, but the color doesn’t show up. Do you know how I can fix that?

But thank goodness the tabs are working!!!

[Cheryl_Rainfield]

Also, if I want to add an area to this resources page, at the bottom, where users can create a list of their own person “my supports” contacts, do I add input field for each thing (name, phone number, email)? Do I put each three input fields into one container? And then I create data resource client side storage for the support contacts, and create record? So only they see it…

[Mevi]

Hi!

Glad that you got it working!

Can you show some screenshots of how the color is configured if it isn’t working for you?

As for the support thing… Do it how you like you can test it in a container and decide how it looks, and what fields you would like etc. As for the data… Well, for that client side record will not work, you will have to either use AppGyver hobby database or some other database to create records, and if you want to have security for the data (really no other user than certain users can see the data) you need to configure ACL from either AppGyver Auth or some other auth/backend combination

[Cheryl_Rainfield]

Hi Mevi (smiling at you) I’ve attached a screenshot of where I put the colour for the first tab, which is where I put the colour for each tab, but the colour doesn’t show up in the app.

I don’t understand how to allow users to input their own contacts in the support section; that’s why I was asking. How to make it work. What the steps are. I do know that I want to use Firebase for the database. (But I tried to do login using Firebase and Appgyver and i couldn’t get it working…)

Would I be using the form like this: Power-up: Forms and Form Validation - Composer for people to add their own contacts, but make it user database so it only shows up for them?

[Mevi]

Hi! Looks like you haven’t set a border width! Set it to 3 for example.

So if you want to use Firebase as your database, you need to configure the ACL in Firebase, if that is possible (I don’t know as I haven’t used them). Try googling how to do that in Firebase, I’m sure there’s documentation or at least answers on how that would be possible online, or on their forums.

[Cheryl_Rainfield]

Thank you, Mevi! (smiling at you)

I got the color on the bottom border working! I didn’t realize I had lowercase instead of uppercase for one letter in the name ActiveTab in the formula linked to the bottom border. Now that i’ve fixed it, the bottom border shows up only when active. Yayyyy!

I couldn’t figure out why my Worldwide tab wouldn’t work properly, even though everything looked right, so I deleted the “set page variable” and redid it–and now it’s working, thank goodness!

…If I want users’ support contact info that they input to only be on their own phones/apps, then I don’t need firebase, right? I can just create client-side data here, right? Do I use this to allow them to add their support contacts? Power-up: Forms and Form Validation - Composer

Using the video above, it mentions she’d already created a database but didn’t explain how. I know I need it to be client-side database, so I created client-side database called “MySupports” with Name (value type text), Email (value type email), Phone (value type number). Then on my “Find Support” page I created an input form for name, email, and phone number, with a button to Add MySupport Contact. I then added the data variable “NewMySupports” to the page, data variable type “new data record.” Then tried to bind the name value on the right sidebar to the database NewMySupports. I found it confusing. It doesn’t show my name, email, and phone number from MySupports database. It only has label or number and id, and i don’t think that’s right.

And when I tried to bind my “Add MySupport Contact” button, create record, with resource name my supports, then record properties to data variable “NewMySupports” it said it was all incompatible. “The type object with 2 properties is not assignable to the object with 4 properties.” Please help!

Also I was looking at the support thread for creating a user-side database. Navigation for Newbie - #9 by jamesf It says to “add a Get Record/Get records node for your database after the App launch event.” But where do I find the App Launch event? I know it’s “event” but I don’t see any place to find them? I want to make sure that users can see the “MySupports” contact info that they already inputted into the app, as soon as they open the page where it should be.

Thank you,
Cheryl

[Mevi]

Hi!

Great that you got the tabs working properly!

As for the data, I recommend watching the core lessons for data to help you understand better what is going on.

I’m confused from your description – did you say you created two data resources, MySupport and NewMySupports? For this case you should only have one. That is why the schema doesn’t match, probably.

The app launch part isn’t relevant at this point as you need to sort out the basic creation of data first, but just to let you know, the app launch event is on the Global Canvas page.