Web View Pages

Web View Pages are server rendered pages for your website visitors.

We have been exclusively working with the Desk which is the admin interface accessible by System Users. Usually you will want to give limited access to your customers. In our case, we want Library Members to be able to view available Articles that they can issue from our website. Web View Pages can help us achieve that.

Go to Article doctype, and scroll down to the Web View section.

1. Enable Has Web View and Allow Guest to View
2. Enter articles in the Route field
3. Add fields named Route and Published in the fields table
4. Click on Save

The published field will help filter out those documents which are not supposed to be shown in web view, otherwise you will run into an error.

We have now enabled web views for Article doctype. This means you can now view details of an Article on your website without logging into Desk. Let's test this out by creating a new Article. You should see See on Website at the top left of your form. Click on it to view the web view of the Article.

Customize Web View Template

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.

{%  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 %}

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:

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:

<div class="py-8 row">

    <div class="col-sm-1">

        <img src="{{ doc.image }}" alt="{{ doc.name }}">

    </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>

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

Good job on following the tutorial so far.

Next: What's Next