Genie Discord forum

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))
        cell(imageview(
            src="https://www.ceadis.org.br/site/bundles/ceadissite/img/logoseconci.png", 
            style="height: 100px; width: 170px"
        ))
    ])
    col([
        row([
            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?

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

https://github.com/BuiltWithGenie/BostonDataExplorer

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

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.

great question @Lusca

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

🤩

Genie Builder team is L33T

🎉

thank you @abhimanyuaryan

You can see it live here https://dataexplorer-pere.geniecloud.app/

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... 😕

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

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.

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

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

I have not worked with tabs yet

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.

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?

html code......

html config screenshot...

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

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

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

  @onchange my, other, bound vars here begin

end

@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

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.

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 🙂

@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

@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?

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: https://dash.plotly.com/julia/dash-core-components/tabs

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

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.

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

if you are ever curious about the method... I used this example https://codepen.io/z007/pen/gwyRLQ

@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

https://learn.geniecloud.io/examples/reactive-ui/tabs

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.👍

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

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

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:

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.

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 !

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.

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 🤔

@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.

Thanks again @Pere 🏆

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

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.

I did but this is what I got

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

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

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

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.

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!

I tried to only populate the attributes using the form for the UI elements rather than just changing them in code 😳

Thank you kind sir!!