Creating and Customizing Server-Rendered WebView Pages in Empress

Developers
1

Introduction

Welcome to this developer-centered guide where we will deep dive into Web View Pages, a significant feature in Empress that allows you to render server-side pages for your website visitors. Using this feature, we can provide a seamless, user-friendly interface for your customers, while simultaneously maintaining the robustness and security of the backend.

Setting Up Web View Pages

Suppose we want Library Members to view available Articles that they can issue from our website. Here’s how we can achieve this with Web View Pages.

First, navigate to the Article doctype, and scroll down to the Web View section. Then, follow these steps:

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

The Published field is used to filter out documents not intended for web view, preventing potential errors.

Web views for the Article doctype are now enabled. This means you can view details of an Article on your website without logging into Desk. When creating a new Article, you’ll see See on Website at the top left of your form. Click it to view the web view of the Article.

Customizing Web View Templates

By default, the generated web view is basic and serves as a starting point for customization. Upon making Article a web view, two HTML files are created: article.html and article_row.html.

To customize these, let’s edit article.html first. Empress uses Bootstrap 4 by default for web views, so any valid Bootstrap 4 markup can be used 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 %}

To customize the HTML of the articles list, edit article_row.html and add the following HTML:

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

Now, the articles list should look more aesthetically pleasing, and you can click on any article to view its details.

Conclusion

Web View Pages contribute significantly to the development and customization of business solutions in Empress. By leveraging this feature, developers can provide a user-friendly interface for customers while maintaining backend functionality and security. It also provides flexibility for customization, allowing developers to tailor the look and feel of the pages according to business needs.