Portal Module¶

Portal Module is a module for displaying arbitrary data templates. The Portal module displays the design of different information using Markdown and HTML markup languages.

Structure¶

View layer - is responsible for displaying data:

Adapter Provider - provides connection between the data and their display on the portal (configuration in the ‘deploy.json’ file).
File Adapter - returns the resources of “File” type (remains in the memory of the application).
Class Adapter - designed to display data from the database through the data repository (updates each time).

The logic of displaying data on the portal¶

Portal styles¶

CSS (cascading style sheets) are used to describe/design the portal pages. An example of the portal page design in Dnt - /develop-and-test/portal/view/static/css/style.css

Possible options for applying styles are set in this folder - portal/view/static/style.css.

.navbar {
  border-radius: 0;
  margin-bottom: 0;
}

.navbar .navbar-brand {
  padding: 5px;
}
...

Portal pages¶

Portal page templates are configured in the portal/view/templates folder.

The location of objects on the page is described in HTML markup language:

<html>
<head>
  <title><%= portal %></title>
  <link href="/<%= module %>/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  <link href="/<%= module %>/dnt/css/style.css" rel="stylesheet">
</head>
<body>
  <%- partial('../parts/menu', { menu }) %>
  <%- body -%>
  <script src="/<%= module %>/vendor/jquery/jquery.min.js"></script>
  <script src="/<%= module %>/vendor/bootstrap/js/bootstrap.min.js"></script>
  <script src="/<%= module %>/js/scripts.js"></script>
</body>
</html>

The <head> tag contains styles for the appearance of the portal.
The <body> tag contains information about the objects displayed on the portal page.
The <script> tag contains information in the form of a link to a program or its text in a specific language. Scripts can be placed in an external file and linked to any HTML document, which allows you to use the same functions on several web pages, thereby speeding up their loading. In this case, the <script> tag is used with the srcattribute, which points to the address of the script from an external file to import into the current document.

Portal navigation¶

A portal navigation meta is a set of navigation nodes, and each has a resource type specified.

Example of the navigation section creating:

{
  "code": "main",
  "caption": "Главное меню",
  "itemType": "section",
  "subNodes":["classes", "texts"]
}

code - system object name
caption - logical object name
itemType - object display type
subNodes - an array of navigation nodes of this section

An example of creating a navigation node:

{
  "code": "texts",
  "caption": "Публикация текстов",
  "resources": "texts",
  "PageSize": 5,
  "itemType": "node"
}

code - system object name
caption - logical object name
resources - turning data into a portal content
PageSize - page size
itemType - object display type

Data styling¶

The format of paging information

<% layout('./layout/content') %>
<%
if (Array.isArray(resources) && resources.length) {
 resources.forEach(function(resource){
%>
<div>
<h3 id="<%= node.code %>_<%= resource.getId() %>">
  <a href="/<%= module %>/<%= node.code %>/<%= resource.getId() %>">
    <%= resource.getTitle() %>
  </a>
  <%
    var formatedDate = null;
    var date = resource.getDate();
    if (date) {
       formatedDate = date.toLocaleString('ru',{year: 'numeric', month: 'numeric', day: 'numeric'});
    }
    %>
  <% if (formatedDate) { %><small><%= formatedDate %></small><% } %>
</h3>
<p><%- resource.getContent() %></p>
</div>
<%
 })
}
%>
<%- partial('./parts/pagination', { resources }) %>

The format of the correct displaying of the text of errors

<% layout('./layout/layout') %>
<div class="container">
  <h1>404</h1>
  <h2>Страница не найдена</h2>
</div>

The format of converting data to portal content

<% layout('./layout/layout') %>

<div class="container">

  <div class="row">
    <div class="col-md-12">
      <div class="page-header">
        <h2><%= resource.getTitle() %></h2>
      </div>
      <div>
        <%
        var formatedDate = null;
        var date = resource.getDate();
        if (date) {
          formatedDate = date.toLocaleString('ru',{year: 'numeric', month: 'numeric', day: 'numeric'});
        }
        %>
        <% if (formatedDate) { %><h1><small><%= formatedDate %></small></h1><% } %>
      </div>
      <div>
        <%- resource.getContent() %>
      </div>
    </div>
  </div>

</div>

The format of the text display

<% layout('./layout/layout') %>

<div class="container">

  <div class="row">
    <div class="col-md-12">
      <div>
        <%
        var formatedDate = null;
        var date = resource.getDate();
        if (date) {
          formatedDate = date.toLocaleString('ru',{year: 'numeric', month: 'numeric', day: 'numeric'});
        }
        %>
        <% if (formatedDate) { %><h1><small><%= formatedDate %></small></h1><% } %>
      </div>
      <div>
        <%- resource.getContent() %>
      </div>
    </div>
  </div>

</div>