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 -->
{% 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.htmlSmartAdmin alert box, see Controls
sadjcore/controls/button.htmlSmartAdmin button control, see Controls
sadjcore/controls/infobar.htmlSadj control referenced by the Sadj js code if available on a page
sadjcore/controls/input.htmlSmartAdmin input control, see Controls
sadjcore/forms/field_errors.htmlHelper template for formatting Django form errors
sadjcore/forms/login.htmlStandard Django login form, as included into the login page accessed from the Login page
sadjcore/forms/non_field_errors.htmlHelper template for formatting Django form errors
sadjcore/forms/register.htmlDjango new-user form, as displayed at Create account
sadjcore/fragments/bodyscript.htmlJavascript 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.htmlHidden form to wrap a Django CSRF token and make POST access to Django easier, see Ajax Access
sadjcore/fragments/html_js_bundle.htmlscript elements to load the core SmartAdmin and Sadj js code.
sadjcore/fragments/menuscript.htmlSets the active menu item. This should be placed immediately after the menu element.
sadjcore/fragments/pagecontrols.htmlHidden element used to identify details of the current page within the application.
sadjcore/fragments/pageheader.htmlDefault contents of a Sadj head element
sadjcore/controls/panelheader.htmlHelper template to construct the opening of a SmartAdmin panel element.
sadjcore/smartadmin/appshortcuts.htmlThe 'Quick Shortcut' dialog of the SmartAdmin demo.
sadjcore/smartadmin/colourprofile.htmlHidden element, only used for CSS color reference for JS.
sadjcore/smartadmin/messenger.htmlThe 'Messenger' dialog of the SmartAdmin demo.
sadjcore/smartadmin/notifications.htmlThe 'User Notifications' dialog of the SmartAdmin demo.
sadjcore/smartadmin/quickmenu.htmlThe shortcut actions menu from the bottom-right of the SmartAdmin demo
sadjcore/smartadmin/shortcuts.htmlThe shortcuts menu which drops down from the top of the SmartAdmin frame.
sadjcore/smartadmin/smartadmin_footer.htmlSadj page footer
sadjcore/smartadmin/usermenu.htmlThe menu which drops down from the avatar on the top right of the SmartAdmin demo.
sadjcore/widgets/logoutpopup.htmlThe 'confirm logout' dialog
sadjcore/widgets/pagesettings.htmlSmartAdmin application settings dialog

Overview of Other Templates

Template Description
mpa/frame/demoframe.htmlApplication frame which the page templates extend from
mpa/pages/*.html170+ wrapper templates to include content from sabase and sadjdemo
spa/frame/demoframe.htmlApplication frame which the pages are loaded into in the browser
spa/pages/*.html170+ wrapper templates to include content from sabase and sadjdemo
sabase/content/*.htmlContent of the SmartAdmin demo pages
sabase/fragments/fullmenu.htmlMenu structure combining the SmartAdmin demo with Sadj demo pages
sadjdemo/content/*.htmlContent of the Sadj demo pages
sadjdemo/fragments/menu.htmlMenu structure of the Sadj demo pages
sadjdemo/frame/demoframe.htmlCut-down frame for the Sadj-only application
sadjdemo/pages/*.htmlWrapper templates to include content templates