Templates Template Arrangement and Reference Reference page for the various templates used in the Sadj project, especially the `sadjcore` application.

Using Sadj Templates

There are an array of templates in Sadj and sadjcore, for you to use to build your own applications. They are deployed in particular arrangements as detailed below. However, there is no requirement for you to follow these arrangements, you can use take individual templates and refactor them to fit your own Django pattern(s) as you wish.

Template Categories

The templates within each of the applications in the Sadj distribution follow a similar pattern, and are grouped into the following categories:

Template Categories/Folders

content - The actual main content of pages
controls - templates rendering into HTML controls, such as a button
forms - templates to render Django forms
fragments - templates whose content does not form HTML corresponding to a single element or object
frame - application frame, into which pages are loaded (SPA) or included (MPA)
pages - top-level templates for individual pages within the application
smartadmin - factored-out sections of the smartadmin demo frame. It is unlikely you will use these 'as-is' in your application, they are a start-point for editing into your own versions
widgets - templates rendering into larger controls, such as the save-settings dialog

Pages, Frames and Content

The 'content' folders contain the actual content of pages, which are then included differently into MPA and SPA solutions. Content templates have three sections: header info, main element, and page-specific scripts, as shown.

{% if pagehead %}
<!-- header content for this page, if any -->
{% endif %}
{% if pagecontent %}
<main id="js-page-content" role="main" class="page-content">
  <!-- content of the page's 'main' element -->
</main>
{% endif %}
{% if pagescripts  %}
<!-- additional scripts for this page, if any -->
{% endif %}

The template 'if' statements allow the MPA and SPA frames to include and load new pages differently.

The 'pages' folder contains the top-level access point to each page, which then includes the content: these are alost entirely small auto-generated wrappers for the mpa, spa and sadjdemo applications.

Again, there is no requirement to follow this pattern, if you have no need of the MPA/SPA flexibility or frame refactoring, you can simply write pages containing all content, such as the login screen at sadjdemo/pages/login.html

Selected Sadjcore Templates

Template	Description
sadjcore/controls/alert.html	SmartAdmin alert box, see Controls
sadjcore/controls/button.html	SmartAdmin button control, see Controls
sadjcore/controls/infobar.html	Sadj control referenced by the Sadj js code if available on a page
sadjcore/controls/input.html	SmartAdmin input control, see Controls
sadjcore/forms/field_errors.html	Helper template for formatting Django form errors
sadjcore/forms/login.html	Standard Django login form, as included into the login page accessed from the Login page
sadjcore/forms/non_field_errors.html	Helper template for formatting Django form errors
sadjcore/forms/register.html	Django new-user form, as displayed at Create account
sadjcore/fragments/bodyscript.html	Javascript to load Smartadmin formatting and initialise helper functions. This should be included as the first element within the `body` element for Sadj functionality to run reliably.
sadjcore/fragments/hiddencontrols.html	Hidden form to wrap a Django CSRF token and make POST access to Django easier, see Ajax Access
sadjcore/fragments/html_js_bundle.html	`script` elements to load the core SmartAdmin and Sadj js code.
sadjcore/fragments/menuscript.html	Sets the active menu item. This should be placed immediately after the `menu` element.
sadjcore/fragments/pagecontrols.html	Hidden element used to identify details of the current page within the application.
sadjcore/fragments/pageheader.html	Default contents of a Sadj `head` element
sadjcore/controls/panelheader.html	Helper template to construct the opening of a SmartAdmin panel element.
sadjcore/smartadmin/appshortcuts.html	The 'Quick Shortcut' dialog of the SmartAdmin demo.
sadjcore/smartadmin/colourprofile.html	Hidden element, only used for CSS color reference for JS.
sadjcore/smartadmin/messenger.html	The 'Messenger' dialog of the SmartAdmin demo.
sadjcore/smartadmin/notifications.html	The 'User Notifications' dialog of the SmartAdmin demo.
sadjcore/smartadmin/quickmenu.html	The shortcut actions menu from the bottom-right of the SmartAdmin demo
sadjcore/smartadmin/shortcuts.html	The shortcuts menu which drops down from the top of the SmartAdmin frame.
sadjcore/smartadmin/smartadmin_footer.html	Sadj page footer
sadjcore/smartadmin/usermenu.html	The menu which drops down from the avatar on the top right of the SmartAdmin demo.
sadjcore/widgets/logoutpopup.html	The 'confirm logout' dialog
sadjcore/widgets/pagesettings.html	SmartAdmin application settings dialog

Overview of Other Templates