Templating (index.html) doesn't work - couldn't find layout.html

[d33pjs]

Hello,

I'm having trouble to get some plotly Charts on index.html.

It's a FastAPI application and I created a template in app/templates/index.html

main.py will initialize sqladmin via:

# Initialize admin
init_admin(app, database.engine)
setup_admin_views()

admin_setup.py:

templates = Jinja2Templates(directory="app/templates")

def generate_sample_chart():
    fig = go.Figure(data=go.Bar(y=[2, 3, 1]))
    fig.update_layout(title="Sample Plotly Chart")
    return fig.to_html(full_html=False)

def init_admin(app, engine):
    global admin_instance
    admin_instance = Admin(app, engine)

    @app.get("/admin", response_class=HTMLResponse)
    async def admin_index(request: Request):
        chart_html = generate_sample_chart()
        #html_content = template.render(chart_html=chart_html)
        #return HTMLResponse(content=html_content)
        return templates.TemplateResponse("index.html", {"request": request, "chart_html": chart_html})

    return admin_instance

When I call the admin URL "localhost/admin" it throws an error:

  File ".venv/lib/python3.12/site-packages/jinja2/loaders.py", line 204, in get_source
    raise TemplateNotFound(template)
jinja2.exceptions.TemplateNotFound: sqladmin/layout.html

My index.html looks like this:

{% extends "sqladmin/layout.html" %}

{% block head_css %}
{{ super() }}
<style>
    .chart-container {
        width: 80%;
        margin: 20px auto;
        padding: 20px;
        border: 1px solid #ddd;
        border-radius: 5px;
    }
</style>
{% endblock %}

{% block head_js %}
{{ super() }}
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
{% endblock %}

{% block content %}
<h1>My Dashboard</h1>
<div class="chart-container">
    {{ chart_html | safe }}
</div>
{% endblock %}

I'm probably missing something. I thought, I can overwrite just one template file and he's using everything else, like "sqladmin/layout.html" from sqladmin source. Sadly the docs (https://aminalaee.dev/sqladmin/working_with_templates/) doesn't help that much in my case.

Did I do something wrong or do I need to copy all templates from sqladmin source to my template folder if I start overwriting one default template?

Or are there any other examples / best practices around templating or getting something like charts on the front page of sqladmin?

Thanks for your help.

[aminalaee]

Hi,

I think the docs are not updated yet. Can you follow this?
https://github.com/aminalaee/sqladmin/blob/main/docs/working_with_templates.md

[d33pjs]

I'm sorry, I don't see the difference between https://aminalaee.dev/sqladmin/working_with_templates/ and https://github.com/aminalaee/sqladmin/blob/main/docs/working_with_templates.md

I just want to overwrite index.html and add a plotly chart to it, but I'm getting the error that sqladmin/layout.html is not found. To be precise: the error is not about the index.html which I want to customize, but about the {% extends "sqladmin/layout.html" %} inside the template that I copied from the sourcecode.

[d33pjs]

No Idea, what could be wrong?

[anoop-malav]

probably you are not using latest version of sqladmin.
In older version I used as {% extends "layout.html" %}
When upgrading to latest version I have changed it to {% extends "sqladmin/layout.html" %}