Genie Discord forum

Author AvatarLusca
6/27/2023, 9:55:53 PM

Hi everyone!

I'm not that into web development and frontend, so I need some help with the proper way to display Tab Panels.

I have the following ui function rendering the pictured attached here:

    row(style="text-align: left;", class="st-title", [
        cell(h1("Dashboard Gerencial"))
        cell(separator(vertical=true, color="orange", spaced=true))
            style="height: 100px; width: 170px"
            tabgroup(:tab_m, class="bg-primary text-white shadow-1", [
                tab(name="resultados", label="Resultados"),
                tab(name="pesquisas", label="Pesquisas")
        tabpanelgroup(:tab_g, class="bg-purple text-white shadow-2", [
            tabpanel("Resultados", name="resultados", [
                Html.div("Resultados", class="text-h6")
            tabpanel("Pesquisas", name="pesquisas", [
                Html.div("Pesquisas", class="text-h6")

The point I want to know is why the Tab Panels are not showing up in the page. It's not a 100% essential to the project I'm working on but it would be a welcome feature.

Any ideas on how to display the panels?

Author AvatarPere
6/28/2023, 12:25:03 PM

I haven't personally worked with tabs in the low-code API. We have a demo with tabs in HTML, so perhaps it could help you find out what's wrong

The low-code API generates the UI in HTML. You could print the output of the ui() function and compare it to the demo

Author AvatarGenerallyClueless
6/28/2023, 1:11:24 PM

Tabs would be an incredible addition to the low-code builder ๐Ÿ† and I was going to ask about them as soon as I got my GB up and running properly.

Author AvatarPere
6/28/2023, 1:53:02 PM

@GenerallyClueless we actually have tabs in the nocode editor. @abhimanyuaryan added them while he was working on this demo ๐Ÿ˜„

Author AvatarGenerallyClueless
6/28/2023, 1:53:34 PM

Genie Builder team is L33T

Author AvatarLusca
6/29/2023, 8:04:13 PM

I may have lost something along the way because I can't visualize the panels in both "raw" ui function and in the low-code GB. Tabs are working fine, but even using the exact same HTML structure of the example, I can't show the tab panels in my usecase... ๐Ÿ˜•

Author AvatarLusca
6/29/2023, 8:05:31 PM

Anyway, I'm working my way around with lists in a menu, and it's OK so far. Thanks for the help, anyway!

Author AvatarLusca
6/29/2023, 8:25:25 PM

There's something though I can't fully understand... How could I bind variables (the @in on the app section) in the UI function I have? I'm trying to find on the HTML examples something that covers this part, but I haven't found it yet.

Author AvatarGenerallyClueless
6/29/2023, 8:28:40 PM

@Lusca are you asking about binding in specifically with tabs?

Author AvatarGenerallyClueless
6/29/2023, 8:32:59 PM

Would it help if I posted pictures of variable(s) that I have bound?

Author AvatarGenerallyClueless
6/29/2023, 8:33:40 PM

I have not worked with tabs yet

Author AvatarLusca
6/29/2023, 8:35:48 PM

No, I mean binding in other elements in general. I'm trying to write some code which only make an item in a list clickable if other field isn't zero. For example, I have this variable "ano" (that is also on the app macro) that I want to bind with this other item, so it only becomes clickable if the "ano" is not zero. I know there's the "Data Binding" on the GB editor, but I can't figure out what I should do to have the same working on my UI function.

Author AvatarGenerallyClueless
6/29/2023, 8:38:14 PM

I think your objective is a bit more complicated than mine because I have no constraint on my button object... but I did notice a "disable" feature on the button. Maybe the object that you are using has something similar?

Author AvatarGenerallyClueless
6/29/2023, 8:39:29 PM

***reset_all is my variable that I have bound ***

Author AvatarGenerallyClueless
6/29/2023, 8:40:23 PM

and in code I have reset_all initialized and bound using @in and then I have an event handler watching for changes using @onchange

Author AvatarGenerallyClueless
6/29/2023, 8:44:17 PM

@handlers begin ..... other handlers @in reset_all = false end

  @onchange my, other, bound vars here begin


@onchange reset_all begin

..... my code for resetting my super important stuff ๐Ÿคฃ '# โœ… DO NOT CALL reset_all=false HERE OR IT WILL INFINITE LOOP '# because I did it.. and @pere had to show me the error of my ways end end

Author AvatarGenerallyClueless
6/29/2023, 8:53:18 PM

sorry @Lusca, I hope it helps. I am still very new to Julia ๐Ÿ‘ถ and I am still trying to find out how to work without causing myself a lot of errors.

Author AvatarLusca
6/29/2023, 9:20:52 PM

No problem, I think we're all trying to figure out the framework's complexities (and Julia's too lol), but thanks for the effort ๐Ÿ™‚

Author AvatarPere
7/3/2023, 9:19:23 AM

@Lusca a to enable click events you can use the @click macro in the low-code API, or the v-on:click parameter in the HTML

`btn("",icon="menu", @click("drawer = !drawer"))


The expressions that you pass to @click or v-on:click need to be valid Javascript, as they are executed in the browser. Any simple variable modification as in the example will work

Author AvatarGenerallyClueless
7/6/2023, 7:38:43 PM

@lusca Have you been able to add tabs and tab panels using the drag-and-drop builder, or have you added them manually like in this code snippet?

Author AvatarLusca
7/7/2023, 9:48:21 PM

Hey @GenerallyClueless! Sorry, but I couldn't make it work (GB and raw Genie), but I figured out that a more suitable solution for what I'm doing - and it's virtually the same thing Genie does - is using Dash.jl... Now I'm almost finishing the layout of my project and it's simple to the tabs to work with Dash Plotly, check their tutorial and see if it fits your needs:

Author AvatarGenerallyClueless
7/7/2023, 9:51:14 PM

Thanks @Lusca, I do have a workaround that I'm exploring at the moment.

Author AvatarGenerallyClueless
7/7/2023, 9:52:52 PM

My neighbor is a website admin for a large university and he suggested just using HTML/CSS to make tabs. I copied code from an example online and I have something up and running already.

Author AvatarGenerallyClueless
7/7/2023, 9:56:00 PM

Now I can basically copy/paste tabs to add different functions for this educational tool I have been developing to learn julia

Author AvatarGenerallyClueless
7/7/2023, 10:00:08 PM

if you are ever curious about the method... I used this example

Author AvatarPere
7/10/2023, 6:18:58 PM

@Lusca @GenerallyClueless I'm sorry for not being more helpful before. Can I as what is it exactly that is not working with the tabs demo? I have added a new simple example to the docs, hope it helps

Author AvatarGenerallyClueless
7/10/2023, 6:24:37 PM

Thanks @Pere! I had run into two different challenges, depending what I had modified in my code:

  1. The tabs would be visible, but when I select a tab, no additional content would be displayed... although the tab would be underlined.
  2. If I would make other changes, then I would see both tabs display all content, simultaneously, each filling half of the window.

I can try your new example later today or tomorrow to find out if I can repeat what you did.๐Ÿ‘

Author AvatarPere
7/10/2023, 6:29:26 PM

ok that's very weird, would need to look at the code to see what's wrong. Yes please let me know if it works

Author AvatarGenerallyClueless
7/10/2023, 6:32:22 PM

Thanks, give me a day or two to work on it. I have a couple of other things going on right now. ๐Ÿ‘

Author AvatarGenerallyClueless
7/14/2023, 2:14:39 PM

Hi @Pere, I took a moment this morning to load up the tabs example that we had spoken of. Unfortunately, I see identical behavior as when I tried to build tabs/tab panels in GB. Here is a quick video:

Author AvatarGenerallyClueless
7/14/2023, 2:17:56 PM

I'm not sure if it would cause any problems, but I am receiving an error 404 in regards to quasar.min.css

I thought this error was benign as I had received it each time I worked with GB and was still able to produce reactive apps.

Author AvatarPere
7/14/2023, 3:55:59 PM

I just tried in Genie Builder (tested from the REPL before) and it works. Perhaps it could be a browser issue? I'll ask someone else to give it a try, thanks for checking @GenerallyClueless !

Author AvatarGenerallyClueless
7/14/2023, 4:03:25 PM

Yes, it's very interesting. The build matched some of the things that I had tried to do and it was reassuring to see your code did match how I approached tabs. Unfortunately, no matter what I did, I ended up with this same result.

Author AvatarGenerallyClueless
7/14/2023, 4:06:42 PM

I have the same result with both Chromium and Firefox on Linux... as well as Chrome when connecting to the server from a Windows PC โœ… There has to be some small mistake that I am making ๐Ÿค”

Author AvatarGenerallyClueless
7/14/2023, 4:33:00 PM

@Pere Your code works. I confirmed it by pasting html to overwrite the form that I recreated using the Genie Builder. I populated the "label", "name", and "content-class" attributes using the GB gui which seems to add ":attributes". The ":" preceding the attribute was causing the content not to be displayed.

Author AvatarGenerallyClueless
7/14/2023, 4:34:48 PM

Thanks again @Pere ๐Ÿ†

Author AvatarPere
7/14/2023, 4:39:14 PM

uhmm I tried dragging some tabs around and I see no ":" either ๐Ÿ˜“ . Anyay, thanks for confirming it works. I'll check the ":" thing again next week

Author AvatarGenerallyClueless
7/14/2023, 4:40:12 PM

Try and populate an attribute using the fields available in the builder... just to see if I'm crazy. I did not write any ":" so I'm not sure how else they would be written.

Author AvatarPere
7/14/2023, 4:42:41 PM

I did but this is what I got

Author AvatarPere
7/14/2023, 4:43:26 PM

oh wait you meant the name fields n stuff...yea I havent touched those

Author AvatarGenerallyClueless
7/14/2023, 4:43:46 PM

I just populated the name attributes using the form in GB and it did rename them ":name"

Author AvatarGenerallyClueless
7/14/2023, 4:44:37 PM

I only changed the name attribute of the tab panels "name" and it added the attribute as ":name"

Author AvatarGenerallyClueless
7/14/2023, 4:46:34 PM

Okay, so now it makes total sense. I am sure this caused me a lot of headache learning tabs, because it looks like I did understand them the right way.

Author AvatarPere
7/14/2023, 4:47:14 PM

Ok I get what's going on. In Quasar components (which come from Vuejs), the ":" before a parameter's name indicates that the parameter's value comes from a Javascript variable. In this case, there's no home, explorer or analysis variables so the component cannot be rendered. I'll report this to the devs!

Author AvatarGenerallyClueless
7/14/2023, 4:47:15 PM

I tried to only populate the attributes using the form for the UI elements rather than just changing them in code ๐Ÿ˜ณ