Course Content
Customize Web View Template
COMPLETED
Faris Ansari
May 19, 2021

The default web view that is generated is pretty barebones and serves only as a starting point for us to customize it. When we made Article a web view, two HTML files were created namely: article.html and article_row.html

Let's edit article.html first. Frappe uses Bootstrap 4 by default for it's web views. So, you can use any valid Bootstrap 4 markup to style your pages. Add the following HTML to article.html.

{% raw %}

{%  extends "templates/web.html" %}

{% block page_content %}
<div class="py-20 row">
    <div class="col-sm-2">
        <img alt="{{ title }}" src="{{ image }}">
    </div>
    <div class="col">
        <h1>{{ title }}</h1>
        <p class="lead">By {{ author }}</p>
        <div>
            {%- if status == 'Available' -%}
            <span class="badge badge-success">Available</span>
            {%- elif status == 'Issued' -%}
            <span class="badge badge-primary">Issued</span>
            {%- endif -%}
        </div>
        <div class="mt-4">
            <div>Publisher: <strong>{{ publisher }}</strong></div>
            <div>ISBN: <strong>{{ isbn }}</strong></div>
        </div>
        <p>{{ description }}</p>
    </div>
</div>
{% endblock %}

{% endraw %}

Now, go to any Article and click on See on Website. If you have filled in all fields of your Article, you should see a page like this:

Article Portal Page

Now, open http://library.test:8000/articles. This should show the list of articles, but it is also pretty barebones. Let's customize the HTML.

Edit the article_row.html and add the following HTML:

{% raw %}

<div class="py-8 row">
    <div class="col-sm-1">
        <img alt="{{ doc.name }}" src="{{ doc.image }}">
    </div>
    <div class="col">
        <a class="font-size-lg" href="{{ doc.route }}">{{ doc.name }}</a>
        <p class="text-muted">By {{ doc.author }}</p>
    </div>
</div>

{% endraw %}

Now, the articles list should look prettier. You can click on any article to view it's details.

Articles Portal Page

Good job on following the tutorial so far.

Have a doubt?
Post it here, our mentors will help you out.