How do I create a 2 column view?

Hi,

I want to display content in 2 columns on repeated data.
At this point I can only get it to repeat in 1 column.

This is what I am trying to create. Not having success in AppGyver. I built this one in Adalo.

2 Likes

Hey Kelcy, I’m assuming when you say ‘column’ you’re referring to the section under “Recent in Kids”.
If so, to create something similar to that, this would typically be called Row.

Drag a row into your canvas from the components area then drop a card into each row and style the cards to match.

Hi Zachary,

I did try that but it only repeats data going down and not across the columns. Think I am missing something.

Screen Shot 2020-09-21 at 8.10.16 pm

Drag the second one into the box next to it after you copy and paste it

It just repeats the first column again

Kelcy, I truly mean this in the nicest way possible, but maybe building apps isn’t your thing, I hope you stick with it but honestly this is a very basic element to struggle with. Again, I truly truly don’t mean this to be rude. Your design work is really good if you created the original mockup, so maybe dive deeper into that and partner with someone that can develop for you?

If you wish to keep trying that, just double click on that text and change it to whatever you need

I understand all of that. I need it to read the data from Firebase and not be changing it manually each time.

I know how to copy and paste, change the title and style a card. That’s very easy. That’s not my problem. It’s the repeated data of how it’s structured on AppGyver that isn’t making sense to me. Repeating a row, repeats a row. That doesn’t help me. Each ‘card’ needs to read a different line of data.

1 Like

OH! That makes far more sense now to be having problems with. Let me have a look and get back to you

Hi,

This can be done, but it needs a little trick with the layout. Rows won’t actually work in this case as the content won’t change from column to another (as seen in Kelcy’s screenshot)

The structure should look like this:

Container 1
   Container 2
      Component content

Here Container 1 should have Layout Horizontal selected from style tab and Wrap children checked. Container 2 should have its Width set to 50%.

Then set Container 2 to repeat your data. You should be able to add any content you want inside the Container 2 after that and use the repeated values then.

1 Like

Hi @kelcy,

If i understand correctly, this is what you are trying to achieve:

Here, i set the ‘Container 2’ to be repeated with my variable (a list of objects, with id & text as properties, in this case).
Then i set the layout as you can see here, ‘Container 2’ width = 48%, along with margins all around.
And then i set the content in the Container 2 (Title 2) to the content of the repeated item of my variable.

The result is on the right side of the screen. Hope this helps.

1 Like

@Tomi_Laakso & @S_MittalM you are the best!!!

That worked perfectly, thank you so much :slight_smile: :slight_smile: :slight_smile:

Rude, Dude :grinning: Better not jump into conclusion before knowing the whole context :grin:

3 Likes

Shock! I thought Appgyver is a place for no-coder? I am a foreigner with limited knowledge on software development. Don’t hit me. Be kind. Be nice.

AppGyver is one of the complex No Code solutions. Work through the tutorials and if they all make sense then its a good solution for you, but if you find the concepts tricky then there are likely to be options that suit you better. AppGyver´s strength is its amazing flexibility. This is also its downfall as there are so many things to configure.

You need to be quite good at working with partial instructions and solving issues when something doesn´t work quite how you want it.

Also, story board your app before starting.