09a: Publishing websites and database archiving

Safeguard file - download - a fully internally documented archive package of all the data in the database
Safeguard file - to repository - as above, but uploads the file to a chosen repository (2026 - only Nakala)
Website > Create - sets up a new CMS website. A database can have multiple websites for different audiences
Website > Edit - edit an existing CMS website stored in the database
Website >View - view an existing CMS website in a separate window - use to check results and to obtain the URL

Note : You can also access the website record in the Explore Menu, just like any other record. To find the website record, type 'website' in the searchbox, or filter by Entities in the Explore Tray, and choose 'CMS_Home' as the Record Type. Any websites you have created will appear as records in the Results Pane.
Standalone web page - create or edit a CMS-generated web page for embedding in a third-party website
Statistics - displays access statistics usign the eidely used Matomo Open Source web tracklign system

The CMS : creating a website

Why use the Heurist CMS?

Heurist provides a powerful CMS capability tightly integrated with the database. There are several advantages to this approach:

Functionality: Database search and visualisation widgets can be embedded directly in web pages and have full access to the content of the database, including saved searches;
Sustainability: The CMS pages are stored as standard record types in the database. That means that there is no need to have a separate server and cross-server integration (high sustainability risks); as long as the database is accessible through Heurist, the CMS will remain operational, potentially long after the completion of the project which built it, and at practically no cost.
- - Stability
  - Flexibility
  - Multiple websites from one database
  - Embedded in the database and thus saved as an integral part of the database
  - No dependency on connections between servers, avoids multiple points of failure
  - Backed up in archive track package and in normal backups
  - Has access to the most functions directly available as widgets ( reuses the widgets of the main interface)
  - Has direct access to data in the database and respects permissions and visibility down to the individual value level
  - Flexible configuration of widgets using parameters which can be set via forms in the interface
  - Widgets provide powerful functions without any programming - mapping, facet searches etc
  - All images or files in the database are accessible for embedding without creating special web image directories (eg. WordPress) and are resampled automatically for web resolution allowing high resolution images to be stored in the database without bogging down the website <check this has been enabled>
  - Allows embedding of remote images and streaming EG or videos and sound audio
  - Instant editing of text elements in the website and change of parameters including styling of widgets and other components
  - Creates embeddable pages independent of the Heurist menu structure as well as complete websites with a couple of clicks
  - Easy linking of pages and records within text, generation of bread crumbs and page headings
  - Hierarchical menus and the possibility of multiple menus

Configuring website layout

The initial web page may look somewhat different depending on what template has been set as the default.
The default website is created with a set of commonly used menu entries and web pages with dummy content.

Note: If you are not logged in you will first need to login with the login link at top right of the screen, or in the backend interface.

The website editor can be displayed by clicking on the website editor link on the top left of the screen

At the top of the screen you have some general controls:

The << chevrons can be used to temporarily close up the website editor panel, without exiting the website editor. This may be useful to have extra screen space when editing text blocks on the page (which open in a WYSIWYG editor when yu click on them).

The website URL is the recommended compact URL for the website. Click on it to copy it to your clipboard.

The Website Layout / Properties button

Changes the title, logo, background, languages and other settings of the website as a whole

Opens a standard record edit form for the CMS_Home record which defines the website:

The “Advanced” tab allows you to provide some custom CSS and/or Javascript : see below.
DT_THUMBNAIL (base field 2-39) is used as favicon for the website.

The Site tab (menu management)

Allows you to add, reorder, rename and delete menu entries

The Page tab (widgets)

Edits the currently selected page structure and modify the component styles and widget properties.
The widgets making up the page are shown on the left.

Creating and editing components in a page

The element you are currently working on is highlighted by an animated blue border. If you change the element in any way, the changes are immediately visible in the preview. You can therefore use Heurist’s web editor to experiment and learn by doing.

You don’t need to know very much in advance about what these different settings do — just change them, and see the effect. You can actually learn a lot about web development just by playing with Heurist’s website builder. Anything you learn about your Heurist site will apply to most website development.

Advanced users can apply custom CSS classes to the element, or write inline CSS as they desire (see below).

After inserting the component, you can edit its content in the usual way. You can also add further elements to change the component.

Using widgets

If you insert a widget you will first see a list of possible widgets.

To add interactive content to your Heurist site, you need to use Heurist widgets. A widget is an interactive component which either retrieves or displays information about records in your database. The Map and Timeline widget, for example, plots records on a map and displays them in chronological order on a timeline below. The Saved Filters widget allows you to embed filters that you have defined in the Explore menu on a webpage, enabling visitors to your site to search the database.

Many of the widgets replicate tools that you are already familiar with from the Explore Menu (you are in fact using the same widgets that we use to build the backend interface). However, when you embed a widget on a Heurist site, you will have more ability to customise its look and behaviour, so you can control the user's experience.

Filter: This widget gives visitors access to the standard Heurist search bar, such as you see at the top of the Filtered Results Pane of the Explore Menu.
Saved Filters: This widget allows you to embed Saved Filters on a Heurist webpage. In most cases, we recommend that you use Faceted Searches with this widget, as they provide the best user experience.
Standard Filter Result: This widget displays records in a similar manner to the Filtered Results Pane of the Explore Menu.
Custom Report: This widget displays information using a Custom Report that you have built in the Explore Menu. Custom Reports can also be embedded within other widgets, for instance to configure the popups on the Map and Timeline, or to provide a different view of records in the Standard Filter Result.
Table Format: This widget displays records in a tabular format, the same as the List View in the Explore Menu
Map and Timeline: This widget plots records on a map with embedded timeline, just like the Map View in the Explore Menu. You can utilise Map Documents defined in your Heurist database to provide additional advanced functionality.
Story Map: This widget plots a set of records on the map as a connected series, with an accompanying 'slideshow' of information about each record. This is ideal for 10-20 records.
Network Graph: This widget displays records as nodes in a network, much like the Network View in the Explore Menu.
Menu: This widget allows you to add a navigation menu to your site, like the one that is automatically generated in your website header.
Add Record: This widget allows you to add an 'Add Record' button to your page. Visitors can click the button to open the standard data entry form for a given record type.
Email Us Form: This widget allows you to add a contact form to your page, so that visitors can email you without you revealing your email address publicly on the internet.

How do I configure a widget?

Once you have inserted a widget into a page, it will appear in the treeview to the left. If you click on it, this will open all the settings for the widget, where you can alter its functionality. Note that there are several tabs with different fucntions - nasic setup, onscreen controls, image handling, messages (when data is missing etc.) and Connect (which sets connections between

See the specific page for each widget for information on the specific settings.

How do I format a widget?

Most widgets will expand to fill up whatever space you provide them on your webpage. If you need to adjust the positioning or external appearance of a widget (e.g. by adding margins around it or a border), then you can do this using the Style tool, as you would for a static component such as some text or a heading.

How do widgets talk to each other?

You are very likely to add more that one widget to a webpage. When you do, you will probably want them to interact. For example, you might use the Saved Filters Widget to allow visitors to search the database, the Standard Filter Result to list the results of a search, and the Network Graph to display the results visually. When widgets are inserted into a page Heurist links the widgets together so that they interact correctly. You do not need to configure anything for this to happen—it is automatic.

More advanced users might wish to know how this works. Behind the scenes, Heurist divides the page into one or more search realms. All the widgets in a given search realm share data with one another. By default, the entire page is a single search realm, so that all widgets on the page will search, filter or display the same set of records at any given time. But it is also possible to divide a page into multiple search realms if required. It is even possible to have search realms which run across pages.

When you configure a widget, you have the option to specify which search realm it belongs to. You simply tell Heurist what search realms you would like to exist, and it will take care of creating and utilising them. If your 'Saved Filters' and 'Network Graph' are both in a search realm called 'Bob', then they will be linked. If you instead write 'Jane' in the search realm box for both widgets, then they will be linked together in a search realm called 'Jane'.

Types of widgets

Simple text box

The simplest of all components, the simple text box contains static WYSIYYG text (Simple text boxes can also be loaded in two and three column modes as a shortcut to individual positioning or flexboxes).

Simple text can be edited in WYSIWYG mode simply by clicking on the text in website edit mode:

Apart from the usual formatting options, one can create a link which inserts a new record in the database (Add Rec), one can insert images and other files from those previously uploaded or by uploading from your local drive or providing a remote URL (Add Media - see data entry of file fields for detailex explanation), or standard web hyperlinks (URL).

To insert a link which skips to an another page in the website, use the URL button and simply enter the ID of the web page you wish to load.
(find the ID either by a search for CMS Web Pages - open another browser tab to carry out the search - or by editing the site structure - button at top left in website edit more - and looking at hte menu pages which are connected to the CMS Home page)

Filter

To perform a simple search in the database (for example from a keyword)
To write a query using the Heurist JSON Query Langage (see documentation chapter 7)
To display a Filter builder button to allow your visitors to build their own queries.

Filters Tab

The Saved filters allows you to display a selection of filters previously created and saved using the Facets Builder function described in chapter 7 (Explore menu), to enable your visitors to search your database by facet. This widget has to be completed with the Standard filter results widget.

Connect Tab

Search group: Name the search realm that the widget belongs to. By default, all widgets belong to 'search_group_1'. If you choose to use this feature, do ensure that you type the names of each different search realm exactly. Any typo will prevent the feature from working.

Info directs to page: Use this feature if you wish to direct visitors to a different page on the site when they select a record on the map.

-------------------------------------------------------------------------------------------------------------------------

Standard filter results

Setup Tab [to be described]

Controls tab [to be described]

Images/blog tab [to be described]

Messages Tab [to be described]

The messages accept fairly basic html such as <b> <i> <u>  
They can also use simple styles such as:

<p style="text-align:center;width:98%;border:2px solid green">
Please make a selection on the left</p>

Connect Tab [to be described]

Custom report

The Custom Report widget lets you display the record selected in the results list in the form of a a custom template that allows you to display the results of a search in the desired format (see chapter 8a : the custom report template must first be built using the editor available in the Record view pane, via the “Report” tab.)

Setup Tab [to be described]

Tools Tab [to be described]

Messages Tab [to be described]

Connect Tab [to be described]

Table format

The Table format widget lets you display the results of a query in a table format.

The Table Tab [to be described]

Messages Tab [to be described]

Connect Tab [to be described]

----------------------------------------------------------------------------------------------------

Map and Timeline

There are many options for controlling the appearance and functionality of the map widget.

Controls Tab

General behaviours:

- Show timeline: Choose whether to include the timeline at the bottom of the map
- Markerclusters: Choose whether records clump together when the map is zoomed out (recommended)
- Show rollover: Should tooltips appear when users hover over buttons on the map?
- Allow modify symbology: Enable custom symbology (only relevant if using a Map Document)
- Controls to show:
- Legend: Allow visitors to change the base map, and turn on or off any result sets or map documents currently affecting the map. The legend appears in the top right corner of the map. Other controls appear down the left hand side.
- Bookmark: Allow visitors to drop pins on the map
- Geocoder: Allow visitors to search for places on the map
- Print: Allow visitors to print an image of the map
- Visible in Legend: If you have enabled the legend under Controls to Show, then you can choose which controls are available in the legend here.
- Expand at start
- Zoom limits: Prevent users from zooming too far in or out on the map.

Layers Tab

Default global base map: Choose the 'basemap' that is used to create the image of the earth's surface. Heurist comes with many base maps. Advanced users can apply 'filters' to the base map to e.g. invert the colours or make the map sepia.

Superimpose map document: Select a Map Document from the database to govern the appearance of the map.

Infobox Tab

Click map item for info: You have three options for how record data will be displayed when a record is clicked on the map.

Cluster tab

Connect Tab

Link to custom style: If you wish to inject custom CSS into the map, provide the <link> element here.

Info directs to page: Use this feature if you wish to direct visitors to a different page on the site when they select a record on the map.

-----------------------------------------------------------------------------------------------------------------------------

Story Map [TO DO]

-----------------------------------------------------------------------------------------------------------------------------

Network Graph [TO DO]

-----------------------------------------------------------------------------------------------------------------------------

Add record

The administrator has to define the Record Type in which the data will be created :

Email Us Form

The "email us form" widget allows you to add a contact form to your page, so that visitors can email you without you revealing your email address publicly on the internet. The form will send emails to the owner of the database.

====13/05/2025 - reprendre ici=====

2.2.4. Using CSS (=== Styling)

Adding CSS to your Heurist website

Publish > Website

Cascading Style Sheets (CSS) is a programming language used to format webpages on the internet. If you arrange the appropriate authorisation with your server administrator, then you will be able to write CSS code to adjust the appearance of your website. If you are willing learn some basic CSS, then you will be able to powerfully customise your Heurist site, changing its appearance significantly. If you choose to go further with CSS, you can even introduce animations and mobile-friendly layouts to your site.

It can be daunting when you get started with CSS, but the best approach is trial-and-error. Edit the CSS, see how the website looks, then keep tinkering until you get the appearance you want. You can use the developer tools in Chrome or Firefox to explore the structure of your website, and to see exactly how the CSS is applying to it.

For a brief introduction to the fundamental concepts of CSS, and links to some useful resources, see our Publish Menu Tutorial.

There are five main ways you can incorporate custom CSS into your website. You can:

Add a global stylesheet to the website
Add individual stylesheets to particular webpages
Add custom CSS into a Custom Report (see the Custom Reports Advanced Usage page).
Add CSS to individual page elements (not recommended)
Import CSS from elsewhere

Before we cover these topics, however, you need to know how the custom CSS you write will link up with your website.

Controlling how CSS affects your website

A CSS file is made up of a series of selectors and declaration blocks . The selector says which elements of a page you would like to format, and the declaration block says what formatting you would like to apply to the selected element. For example, let's say you wanted all paragraphs on your website to have blue text and two lines of space above and below them. You could write the following code:

p {
     color: blue;
     margin-block-start: 2em;
     margin-block-end: 2em;
}

In this example, the selector is p . It will apply to all p tags – i.e. it will apply to all paragraphs.

But what if you only want to apply your formatting to some elements? For example, perhaps you are writing an internet novel with two narrators. You want all the paragraphs spoken by Narrator One to be in blue, and all paragraphs spoken by Narrator Two to be in red. To achieve this, you can use CSS classes . Take a look at the code below:

p.narrator-one {
color: blue;
}

p.narrator-two {
color: red;
}

In this example, we use a period "." to select only paragraphs that have a certain class. "p.narrator-one" selects all paragraphs with the class "narrator-one", and "p.narrator-two" selects all paragraphs with the class "narrator-two". You can actually use a class selector on its own. In this case, it will have a slightly different meaning:

.narrator-one {
color: blue;
}

This example will select all elements with the class .narrator-two, whether they are paragraphs or divisions or headings or any other element. Though this particular example will only have an effect if the element contains some text, since the 'color' declaration only affect the colour of text. There are different CSS declaration for the colour of the element's border or background.

If you just want to style one particular element on a page, you can select it by id using the hash "#" symbol. For example:

#my-special-element {
border: solid green 5px;
}

This will select the element on the page with the id 'my-special-element', and give it a green border 5 pixels thick. If you want to be more specific, you could also write something like h1#my-special-element, which would select just the heading level 1 that has the id 'my-special-element.'

We could go into much more depth about CSS selectors and declaration blocks, but if you really want to learn all the details, then you should do one of the many excellent CSS Tutorials available on the internet. The key question here is:

How do I assign a class or id to an element on my Heurist website?

Assign classes

To assign one or more classes to an element on a Heurist page, click on the element in the treeview and open the 'Classes' section. You can add as many classes as you like, seperated by spaces.

NB: Obviously this means that class names cannot have spaces in them. The convention in CSS is to replace spaces with hyphens. Hence in the example image, the classes are narrator-one, highlighted-element and blue-background.

Assign an id or add element CSS (right image)

Every element you insert in the Heurist treeview is given an ID automatically. If you click 'Edit source', you will see the automatically assigned id in the ID field. You can change this as you wish. You will also see a box for applying CSS directly to this particular element. This box is only for special cases – as much as possible, you should use stylesheets that apply to entire pages or entire websites, as described below.

Editing the source (advanced; right image)

If you wish to apply CSS to particular elements inside one of the element in the treeview, then you will need to click 'Edit HTML source' under the 'Edit source' heading, and assign classes or an id to the relevant elements directly. There are good explanations about how to assign a class or give an id to an HTML element on W3Schools.

Some useful selectors (advanced)

If you are ambitious, and wish to develop a CSS template that thoroughly formats your whole website, it can be useful to know some of Heurist's key selectors. Click below to expand the list.

Useful selectors for Heurist websites

#main-content: All Heurist sites by default are packaged into three main div elements. The #main-content element occupies most of the screen, and is where the content of the webpage is loaded. To apply formatting to elements inside #main-content, you can use a child or sibling selector . For example, the selector #main-content p {/* some formatting */} will apply formatting to all paragraphs inside the #main-content division.

#main-header: The #main-header element appears at the top of the screen. NB: If you wish to change the appearance of the #main-header using CSS, then you are strongly advised to define your own custom header in the 'custom header' field of the website record. Make sure to include all the named elements below (#main-title etc.), if you want Heurist to automatically generate the website's title, menu and so on.

#main-footer:The #main-footer element appears at the bottom of the screen.

#main-logo: The #main-logo is a div element in the left of the #main-header, which contains the site logo.

#alt-logo: The #alt-logo is a div to the right of the #main-header, which contains the site's second logo, if there is one.

#main-title: The #main-title div contains an <h1> element with the main title of the site

.smarty-report: This class is assigned to the main-content of any custom reports embedded in your site. Any styles that you apply to your website will automatically be applied to custom reports as well. If you would like to define special styles that only apply to items inside a custom report, then you can use the .smarty-report selector. E.g. .smarty-report p { some styles } would apply to any paragraphs inside a custom report, but would not affect paragraphs in the rest of your site.

heurist-searchFaceted-header. define it in custom css. This is the header which appears above the facet searches

Where do I put my CSS?

As mentioned above, there are five main ways you can incorporate CSS into your website.

As a global stylesheet in the website record

The best place to put your CSS is in the database record for your website. Any CSS that you place here will be loaded when visitors first visit your site, and will be applied to every page of your website. This allows you to create a consistent look and feel for the entire website, with a coherent colour scheme, fonts, and layout.

To add CSS to your entire website, click 'Menu' in the top left of the treeview in the web editor, and then click 'configure website layout'. Go to the 'Advanced' tab, and you will see the textbox where you can type in your custom CSS.

You can also access the website record in the Explore Menu, just like any other record. To find the website record, type 'website' in the searchbox, or filter by Entities in the Explore Tray, and choose 'CMS_Home' as the Record Type. Any websites you have created will appear as records in the Results Pane.

As a page stylesheet in a webpage record

You can also create page-specific CSS. This is a good idea when one particular page of your site has a special layout or functionality. That particular page may need a special set of CSS classes, and may have many special elements with particular ids.

To add CSS to a particular webpage, click 'Menu' in the treeview of the web editor, and find the relevant page in the treeview. Click the pencil icon to open the database record for that webpage. Under the 'Advanced Customisation' tab, you will find the text field for 'Page CSS'.

As with the website record, you can also locate page records through the Explore Menu. Simply look for the 'CMS Menu Entry' record type, or search for the name of the page you wish to add CSS to.

Add CSS to a Custom Report

If you wish to style a Custom Report, then you can add CSS at the top of the report, as described in the Custom Report Advanced Usage page.

Add CSS to a particular element

Your final option for writing your own CSS is to use 'inline styles'. There are two ways to do this. As depicted above, when you edit an element of a webpage in the Treeview, you can find a box for 'CSS' in the 'Edit Source' section. Any CSS you insert here will be applied to that element of the page. If you wish to provide inline CSS for elements within the page element (e.g. paragraphs in a textbox), then you can click 'Edit HTML Source', and type the inline styles into the screen.

Generally we do not advise this use of CSS. It should only be used when you encounter problems with specificity, and cannot override a global style any other way.

External CSS/JS

You can also import CSS from an external source, using the 'External Scripts and Styles' field in either the Website record or the record for a particular Webpage. The most likely use case is if you wish to use Bootstrap in your website. If you wish to use this feature, you should certainly get in touch with the Heurist team for more detailed advice.

To link to an external CSS or JS to your site, you need to write the relevant html tag in the 'External Scripts and Styles' field. For a CSS file you need to use a link tag. For JS, you need to use a script tag. So, for example, if you wish to use the Bootstrap on your site, you would need to insert something like the following into the 'External Scripts and Styles' field:

If you have written CSS on your own machine, and wish to upload the stylesheet, then you can choose to do this as an 'External Stylesheet' using Heurist's 'Manage Files' tool. You may find this more convenient than copying-and-pasting the CSS into the 'Custom CSS' field, particularly if you have mulitple websites using the same CSS in your database.

If you wish to take this option, upload the CSS file using 'Manage Files', and then copy-and-paste the URL for the file using the built-in URL-copying tool. Then paste the URL using the below template into 'External Scripts and Styles':

=== A REPRENDRE A PARTIR D’ICI !===

Changing header styles

Loading record view or custom format in a panel

The aim is to carry out a search, click on a record in the results panel, and display the data for the selected record in a separate panel. This is achieved in two steps:

Add the panel in which you want to display the record view as a custom report widget. This is automatically tied (by default) to the search results on the same page;
Set the results panel widget parameters to Click to view record = disable and choosing an appropriate record view template in the Record view template dropdown (record view format can be either the default format used in the standard interface or any of the custom report formats defined in the Custim format tab of the Explore pages).

Link/button to pop up edit form

<a href="#" onclick="{window.hWin.HEURIST4.ui.openRecordEdit(-1, null, {new_record_params:{rt:54,ro:'current_user',rv:'public'}}); return false;}"

Running Javascript

To avoid the risks of out-of-control websites, this requires authorisation by the system adminstrator. Contact the system adminstrator / Heurist team to have your website added.

Editing pages in standard edit form

Although it is possible to edit the content of a web page directly in the standard Heurist record edit form, we recommend editing it within the CMS editor, as this provides additional capabilites including the insertion of images and database widgets (filters, visualisations and layouts).

However direct editing in the standard data entry form can be useful if you are only dealing with entering text or fixing up text in existing records.

FAQ

[Custom style for Standard Record view ?]

This issue can be resolved by setting custom styles for desired elements. I've added the following styles for your page:

All font-size are relative to body font size

Font-size is being taken from CSS for custom report widget

20px 10px

If it is not defined it takes font-size from user preferences

If both values above not defined it takes body.popup.font-size from h4styles.css 11px

Examples of how to lay out a web page using DIVs

Heurist blog page (with widgets removed)

Defines lefthand panel for saved filters or search widget and rfull height righthand panel for blog entries (a resutkls list in full content mode)

Cardinal view layout

<div id="cardinal1" style="background: white; position: relative; border: 1px solid gray; height: 100%; width: 100%;">
<div id="westpane">WEST</div>
<div id="centerpane">CENTER</div>
<div id="eastpane">EAST</div>
</div>

<div id="mywidget_2203" class="mceNonEditable" data-heurist-app-id="heurist_Cardinals">
{"container":"cardinal1", "tabs": {"west":{"id":"westpane","size":"300","minSize":"150"},"center":{"id":"centerpane"},"east":
{"id":"eastpane","initClosed":true}}}
</div>

Strategy

Create the widgets you need without worrying too much where they are located
Open the page in source edit and copy the source to a text editor such as notepad
Return to WYSIWYG and add Cardinal layout widget
Open source editor again and add the widgets within the cardinal layout divs, for example:

<div id="mywidget_6801" class="mceNonEditable" style="width:100;heigth:100;border: 1px solid gray;" data-heurist-app-id="heurist_Cardinals">{"container":"cont","tabs":{"west":{"id":"west","initClosed":true},"center":{"id":"center"},"east":{"id":"east","size":300,"minSize":200}}}</div>

Parameters for each panel can be found here https://plugins.jquery.com/layout/

Most important are: size, minSize, maxSize, resizable, closable, initClosed

Any link on the page with parameters "id" (for the website) and "pageid "(for a menu-page) will navigate to the desired page without reloading.

<a href="?db=abc&website&id=123&pageid=456">Open page 456 of website 123</a>

Website URL with &pageid=xx will init this page on load
Loaded page reflects in URL

There is global variable datatable_custom_render
In custom js filed assign render function to this variable

datatable_custom_render = function(data, type)
{ if (type === 'display')
{ return '<span style="color: red; font-style: italic;">'+ data + '</span>'; }
return data;
};

{"columns": [{ "data":"rec_ID","title":"ID"},{"data":"1","title":"Title","render":datatable_custom_render}]}

It is possible to define a particular function for every column. In this case define this variable as array of function datatable_custom_render=[foo1{}, foo2{}, foo3{}] and refer them on “column” by index: "render":datatable_custom_render[2]

Load arbitrary style files

To enable bootstrap styles

Define 3 external files to be added to page (in field 2-939)

Define “classes” parameter for widget options

{"classes":"table table-striped table-bordered","columns": [{ …...

==== à relire ====

This is an extension of the Navigation widget. Now it has 3 modes: horizontal, vertical and treeview. It loads a page depending on “target” field

“Inline” with usage of target field from menu/page record. By default this is #main-content - page will be overloaded
“Inline into #page-content div” (target field from menu/page record will be ignored). You have to add <div id=”page-content”></div> next to widget div. In order they will be next to each other either use table or
Float:left for menu widget and display:inline-block for page-content. Or display:inline-block for both

<div id="mywidget_879" class="mceNonEditable" style="background: none; position: relative; border: 1px solid green; height: 500px; width: 200px; float: left;" data-heurist-app-id="heurist_Navigation">{"menu_recIDs":"1092,1091,1090","use_next_level":false,"orientation":"treeview","target":"inline_page_content","init_at_once":true,"search_realm":"sr1"}</div>

“Popup” (target field from menu/page record will be ignored).
Heurist sanitises content to remove javascript which users migth have inserted in html, for security reasons. You can disable this by listing the name of the database in ..../HEURIST/js_in_database_authorised.txt
Example:

// Sep 2019: This file lists databases on this server which may include JS code in the CMS Home Page or CMS Menu records
// All other databases are excluded from executing such code. Order is unimportant.
balipaintings
ExpertNation
etc.

The register dataset link on the Discover page is still doing nothing (Chrome, logged in)
TinyMCE erases all javascript from elements. So the only opportunity to assign event listeners is in custom js field. The same issue for Login on mapspaces.
We need to document the way to do this based on the JS in TLCMap_Clearinghosue website
Make a link (or button) popup a new record form in a large window rather than a new tab. Note that this also makes the record owned by the current user.

Besides storing page content in database fields, we have an opportunity to load content for site and pages either from uploaded html files or as smarty output.

CSS is responsible for colors and positions only. All other properties are set via widget options, although we define some color/appearance styles per every widget (border, background). I believe it would be better to apply our color scheme dialog for CMS website. I’ve added DT_SYMBOLOGY field to CMS_HOME in Heurist_Core_Definitions - need to synchronise CMS_HOME structure for existing databases (prior to ~21 Nov) using Structure > Browse templates. So user can set these colors via color scheme dialog.

In summary, the style of the website is defined through:

Color scheme per CMS website - defined in color scheme dialog;
Widget options - defined in widget properties dialog;
Widget css - position styles (and optionally special color scheme) - defined in widget properties dialog;
Header elements (#main-xxxx) position/visibility and optional colors - defined in “website css” field in “CMS home record”. Use “heurist-header” class for CMS header.

Parameter “style” for map widget layout_param. For example: "style":{"color":"#00ff00","fillOpacity":0}. It takes precedence over style defined in 1) top most mapspace 2) user preferences

Further documentation is in the header of websiteRecord.php

#main_header.ent_header is hardcoded in websiteRecord.php. It has the following elements
#main-logo - content defined via field "Site logo" (99-51.2-38). On click it reloads main page
#main-logo-alt - content defined via field "Supplementary logo image" (99-51.2-926)
#main-title>h2 - field "Website title" (99-51.2-1)
#main-host - information about host and heurist. Content defined in Heurist settings
#main-menu - generated based on linked Menu/Page records (99-52)
#main-pagetitle>.webpageheading - loaded Page title "Menu label" (99-52.2-1)

Header and menu colour colour. Top level menu takes color from #main-header

#main-header{
background:rgb(112,146,190);
}

Getting a logo on the top right of a generated web page using CSS:

#main-logo-alt {float:right; display:block !important; min-height: 73px; min-width: 130px;
background:url('./?db=johns_hamburg&file=0b7475713789fb09e30334c7ae8e094b32e6bd71');
margin: 7px 4px 0 0; background-size: contain; }

Default layout for Heurist CMS web site consists of 3 divs with absolute positions

main_header.ent_wrapper
main_header.ent_header #main_header
main_header.ent_content_full #main-content-container

Main setting for these elements is height of header. To change it set:

main_header.ent_header{height:180px} .ent_content_full{top:190px}

HEADER:

#main_header.ent_header is hardcoded in websiteRecord.php. It has the following elements

#main-logo - content defined via field "Site logo" (99-51.2-38). On click it reloads main page

#main-logo-alt - content defined via field "Supplementary logo image" (99-51.2-926)

#main-title>h2 - field "Website title" (99-51.2-1)

#main-host - information about host and heurist. Content defined in Heurist settings

#main-pagetitle>.webpageheading - loaded page title "Menu label" (99-52.2-1)

You may overwrite default styles for these elements in field "Website CSS" (99-51.99-46).

Background image for #main_header is defined in field "Banner image" (99-51.99-951).

CONTENT:

#main-content-container.ent_content_full cosist of one element #main-content

This element is emptied and reloaded for every page of website. Its content is arbitrary and defined via CMS editor or direcееly via record editor in field

"Website home page content"/"HTML content". (2-4)

After load, Heurist invokes

window.hWin.HAPI4.LayoutMgr.appInitFromContainer( document, "#main-content" )

This method replaces all div elements with attribute data-heurist-app-id to appropriate Heurist widgets (search, map, result list etc)

There are 2 fields per menu/page record "target css" and "target element". They are reserved for future use. At the moment page content is always loaded into #main-content and applied general Heurist color scheme unless the style is overdefined for particular widget.

Content of website can be defined as custom smarty template in field 99-51.2-922.
In this case designer has to define at least one element with id #main-content.
Element with this name will be used as layout container for widget initialization.
All other elements (#main-xxx) are optional.

INITIALIZATION workflow:

On server side:

It loads Home page record
If there is DT_POPUP_TEMPLATE field, it executes smarty template, otherwise page html structure and cotent of #main-header is generated in websiteRecord.php

On client side

HAPI initialization, DB defintions load -> onHapiInit -> onPageInit
onPageInit: init LayoutMgr, init main menu in #main-menu element
loadHomePageContent(pageid): Loads content of page into #main-content and calls widget initialization width LayoutMgr.appInitFromContainer
If database configuration permits only:

After widgets initialization it loads javascript (field 2-927) and incapsulate this code into afterPageLoad function. The purpose of this script is additional configuration of widgets on page (that can not be set via cms editor) - mainly addition of event listeners.

ToDo: This will need an explanation of how to set styles of target element - please could you give me a couple of examples here that I can expand upon:

width:400px;height:200px;title:"Kuku";resizable:true;position:{ "my": "left top", "at": "left+100 top+200"},modal draggable

Position is relative to window. User can define “of” param { "my": "left top", "at": "left+100 top+200", of:”#id-of-element”}

css for content: background:red;font-size:4em and others

For non-pop this is usual css. After loading the different content to the same container, the original style will be restored.

Target style and popup option are applied on publishing only. In CMS editor it is difficult to cope with popups.

-----------

Open websiteRecord.php. If main page is not generated via smarty template the structure of page is defined in this php script:

main-header with elements: main-logo, main-title, main-host, main-menu, main-pagetitle

And container for current page main-content.

All other style selectors (such as .hie-result-list) are defined in tinymce editor and can vary from page to page.

If using a custom report (Smarty report), none of these selectors is applicable since user can define their own custom website with arbitrary html elements.

=== à relire (fin)===

For detailed instructions and tips on configuring a website, please refer to the top level CMS websites menu entry.

Heurist is tailored to publish data in the form of a website, using its core functions to present and organise data for the public.

The website editor screen consists of a Website editor panel on the left, and the current page being edited ("This page") on the right.

Editing this page

Applying CSS

The website can be styled through CSS files which may be stored in Heurist uploaded files, accessed through records containing uploaded files <check>, placed within custom reports or entered in the custom CSS fields of the website definition record (CMS_Home)

Page Item	CSS Selector
Website Header	#main-header
Website title	#main-title
Website logo container	#main-logo
Website logo image	#main-logo img
Alternative logo container	#main-logo-alt
Alternative logo image	#main-logo-alt img
Main menu / Navigation	#main-menu
Main menu headers (top)	#main-menu div > ul[role="menu"] > li
Main menu headers (all)	#main-menu ul[role="menu"] li
Main menu sub-menu	#main-menu ul[role="menu"] li > ul
Sign in button	#btn_signin
Language selector	#main-languages
Individual languages	#main-languages a
Selected language	#main-languages a.lang-selected

Page title	#main-pagetitle
Page container	#main-content-container
Page content	#main-content
Page widgets	#main-content .heurist-widget

Footer	#page-footer
Hosting information	#main-host

Location of CSS files

Making custom header scroll with the page

I’ve added this CSS for this site to make the (custom) header scroll with the rest of the page.
Ian: it resulted in a large gap between the header and the content, to be investigated

div.heurist-website{
    overflow-x: hidden;
    overflow-y: auto;
}
#main-content-container{
position:relative !important;
top:0px !important;
}
#main-header{
    position: relative !important;
}

Positioning elements

The main thing I can recall that was useful was to divide the site mentally into two kinds of page: “static” pages with project information, team members etc, and “dynamic” pages with facetted searches or other exploratory tools. The CMS generally speaking is set up to make the dynamic pages work without much trouble. It was funnily enough the “static” pages that required more fiddling, so they would scroll correctly and fill the screen properly.

As a concrete example, on a static page you often want the width to be capped. It can be difficult to read text if it stretches right across the screen. By contrast, you often want the dynamic pages to fill the screen. Heurist sites often look their best on a big wide screen, where you can have the facetted search and a nice big map fully visible.

This division between ‘static’ and ‘dynamic’ is really about the layout of the page, rather than its hydration with data. For example, I would often use a custom report for the ‘Project Team’ page, so that new team members could simply be added to the Heurist database. Thus the page is ‘dynamic’ in data terms, but ‘static’ in layout.

Another point was – I often found it difficult to position elements, because they had the wrong “position” attribute in the CSS. Basically there is a tricky set of rules about how ‘static’, ‘relative’ and ‘absolute’-positioned elements interact with each other. From memory, there were too many elements with position:absolute in the CMS template, and as a result I would often find it impossible to make parts of the page behave properly. You would set something as having “height:100%” in the web editor, and it would have no effect because it was a child of an absolutely positioned element, for example. As much as possible, absolute and relative positioning should be eliminated from the public websites, if you would like the editing panel to do what it is supposed to. The most common workaround was for people to give a fixed size in pixels to elements on the screen (e.g. width:500px). This has the obvious downside that the element will no longer scale with different devices.

Responsive design

Javascript

Domains and Redirects, Apache

Custom reports

I want to use the title (or the family name) of the Person who was interviewed to insert in the Interview extract (Extract is child of interview is child of person). Interview has a pointer to Person that has a title (Family Name = field #1), so you first need to load the person record, then you can access the family name or other fields in Person.

{$person=$heurist->getRecord($f247.f15)} {* Person *}
{$person.f1} {*Family name *}

How do you retrieve fields from the relationship record (as well as the related record). getRelatedRecords returns an array of related records with additional header fields: recRelationType*, recRelationNotes, recRelationStartDate, recRelationEndDate.

{$rel_record = $heurist->getRecord($Relationship.recRelationID)}
{$src_info = $heurist->getRecord($rel_record.f1160)}
Source de l'Information: {$src_info.recTitle}

Getting info from relationship records

       {* Get infromation from the relationship record *}
                    {$rel_record = $heurist->getRecord($Relationship.recRelationID)}
{$src_info = $heurist->getRecord($rel_record.f1160)}
                    Source de l'Information: {$src_info.recTitle}
                    Start Date: {$rel_record.f10}
                    End Date: {$rel_record.f11}

Embedding IIIF in reports

I've tested the method for displaying a viewer in a report and it works for an IIIF image. However, I couldn't get it to work for an IIIF manifest. I imagine there are some small changes to be made, could you tell me what they are? I need to display a manifest in the registry.tpl template.

There are 3 ways

Via wrap function (preferred)

{wrap var=$r.f1200_originalvalue dt="file" width="1200" height="800"}<br/>
Via direct manifest URL :

<iframe width=1200 height=800 src="https://heurist.huma-num.fr/heurist/hclient/widgets/viewers/miradorViewer.php?
db=pret19_test&recID=&url={urldecode($r.f1200)}"></iframe>
Via file obfuscation ID {$r.f1200_originalvalue[0].ulf_ObfuscatedFileID}

<iframe width=1200 height=800 src="https://heurist.huma-num.fr/h6-alpha/hclient/widgets/viewers/miradorViewer.php?
db=pret19_test&iiif={$r.f1200_originalvalue[0].ulf_ObfuscatedFileID}"></iframe>

Displaying images, PDFs, Carousels

We need PDFs to open inline. In Beyond1914 they are handled by a fancybox gallery plugin. There is quite a bit of custom code written by artem to get fancybox to accept and display pdfs with heurist url obfuscation. The code doesn’t seem to be in a custom report (in fact I don’t even see the page as a custom report) so I don’t really know how he did it.
PDFs in heurist are served with a http response header that indicates they should be downloaded (probably somewhere in a php file) : Content-Type: application/pdf
Content-Disposition: attachment; filename="filename.pdf"
In order to be opened, the http response header should be
Content-Type: application/pdf
Content-Disposition: inline; filename="filename.pdf"

Database must be in js_in_database_authorised.txt
Need to use wrap function {wrap var=$r.f38_originalvalue dt="file" width="300" height="auto" mode="link" fancybox="1"} Mode can be “link” or “thumbnail”
It adds all required scripts and style into <head> automatically

Making websites public

Pour rendre son site web consultable sans avoir besoin d'un login utilisateur, il suffit de marquer les enregistrements CMS_Home et CMS_Menu-Page visble au publique,

ainsi que tout les enregistrements qu'on veut qu'il/elles puissent voir (pour ce dernier il suffit de faire une recherche des enregistrements à rendre publique et choisir la fonction sous Share):

et ensuite choisir Public (Record is editable by peut-être n'importe quel personne ou groupe):

Links and listeners

You can add link via “Insert Link” and specify page record id as URL. Or https://heurist…./h6-ao/588

Or directly in code <a href=”588”>Project Aims</a>

Concerning links between pages, specify the target page and search_group for widget that will listen for source events.

For example:

At the moment it triggers/listens fortwo event types ON_REC_SEARCHSTART and ON_REC_SELECT

Client side functions

A client-side function to get the databaseID:

window.hWin.HAPI4.sysinfo.db_registeredid

Besides there are helpers to convert concept codes back and forth to/from local ids

$Db.getConceptID and $Db.getLocalID (hclient/core/utils_dbs.js)

There are two parameters: [rty | dty | trm] and [ID]

$Db.getConceptID('rty', 10) returns 2-10 concept code for Person record type

$Db. getLocalID ('rty', '2-10') returns 2 local id for Person record type

Multilingual websites

We specify the language with a parameter such as &weblang=es ; if this is omitted the website uses the first or only (default) language, whatever that is. If a data value has no version for the specified language, it uses the first (default) value.

This capability can be use to define alternative site title and menu entries / rollover labels (in fields Menu label/page name, and Menu rollover descriptions).

The first vlue is the default, additional values should start with a 2 character language code (standard international list) and a version in this language. If you switch to the non-default language and the requested language is missing from the menu entries, the default language is used.

The same system can be applied to Saved search/filter names and filter fields and facets in facet searches
Language-specific values can be inserted (with the aid of Deepl translate) by clicking on the language button left of the field. This button pops up a formlet to enter alternative language versions and store them separately (translated fields must be set to be repeating value fields; within the definitions forms the fields are automatically set this way).
Use single line or memo as appropriate.

Website programming

Common class to init layout - HLayoutMgr

Separate widgets/page configurations (json) and html content.
Store json in the separate field and it is common for all lang versions of page
Separate html content allows:
Avoid issues with escaping/encoding
More human friendly/readable format - can be edited directly
Ability translate entire page

Web publication:

While editing, Cms content can be accessed as usual via url [server]/heurist?db=[db-name]&website=[rec-id]&page=[rec-id]
Published website: [server]/[db-name]/web/[rec-id]/[pagename].html

Pagename is unique per website, human friendly name of page.

On publishing, heurist generates html pages in generated-website folder. These html are crawler enabled (have full page header, can be loaded independently)

Smarty reports…

Cms localization:

Widgets - dialog (via configuration widget dialog) with list of strings and html snippets that can be translated semi-auto
Html content -auto translation with web service

Custom PHP plugins for Smarty

Custom plugins can be located in vendor/smarty/smarty/libs/plugins/ (from Nov 2024). The system adminstrator can place any number of php files into this folder (the ability to do so is not part of the Heurist web interface for security reasons). Sample code :

<?php
use Smarty\Smarty;
array_push($heurist_security_policy->allowed_modifiers, 'date_format_fr');
$smarty->registerPlugin(Smarty::PLUGIN_MODIFIER, 'date_format_fr', 'smarty_modifier_date_format_fr');
function smarty_modifier_date_format_fr($value, $date_format_fr=null){
       $datetime = new \DateTime($value);
        if(!$datetime){ return $value; }
        if(!$date_format_fr){ $date_format_fr = "d-m-Y";}
        $newdatestring = $datetime->format($date_format_fr);
        return $newdatestring;
}
?>

Adding custom styles in memo fields

Heurist allows the addition of styles in the WYSIWYG editor, in addition to Headings 1-6, preformatted and quotation.
This is done through a file HEURIST_FILESTORE/<dbname>/settings/text_styles.json,as shown below. Make sure all the keys and string values are enclosed in double quotes, otherwise PHP considers it invalid. Make sure it is owned by apache:heurist.

"formats": {
"Beleg": {"inline":"span", "classes": "Beleg", "styles": {"font-weight": "bold", "background-color": "#F2E3F9"}},
"Ergaenzung": {"inline":"span", "classes": "Ergaenzung", "styles": {"font-style": "italic", "color": "#808080"}},
"Glosse": {"inline":"span", "classes": "Glosse", "styles": {"text-decoration": "underline"}},
"BelegGlosse": {"inline":"span", "classes": "BelegGlosse", "styles": {"font-weight": "bold", "background-color": "#F2E3F9", "text-decoration": "underline"}}
},
"style_formats": [
{"title": "Beleg", "format": "Beleg"},
{"title": "Ergaenzung", "format": "Ergaenzung"},
{"title": "Glosse", "format": "Glosse"},
{"title": "Beleg Glosse", "format": "BelegGlosse"}
],
"block_formats": [
]
}

Debugging browser behaviour

Sometimes the application appears not to have changed something you know you have changed.

The first step is simply to delete browsing data (downloaded files only, NOT the cookies) and reload the page.

If this does not work, try the following.

1) First prove what Chrome is actually executing

DevTools → Network
Tick Disable cache (works only while DevTools is open)
Reload
Click the request for editCMS_SelectElement.js

Look at:

Status / Size: if it says (from disk cache) or (from ServiceWorker) you’ve found the culprit.
Response tab: search for your edited lines and confirm whether the response contains them

If the response still shows old code, it’s caching upstream (CloudFlare Service Worker)

2) If it’s a Service Worker (very common)

In DevTools:

Application → Service Workers: tick Update on reload
Application → Storage: click Clear site data (or “Clear storage”)

Then reload again with Network tab open.

Ch 06: Populating the database

Ch 06a: Importing and matching references (worked example)

Ch 06b: IIIF Manifests, Canvases and Annotations

Ch 06c: Omeka-S to Heurist

Ch 8: Result Views and Export

8a: Getting started with custom reports

8b: Custom reports - Advanced functions

8c : Mapping & Visualisation

8d: Summary : Mapping and visualisation

8e: Using IIIF - manifests, canvases and annotations

8a bis: Custom reports OLD VERSION

09a: Publishing websites and database archiving

09b: Domains, URLs, PIDs and custom website templates

09a: Publishing websites and database archiving

The Publish menu

The CMS : creating a website

Why use the Heurist CMS?

Configuring website layout

The Website Layout / Properties button

The Site tab (menu management)

The Page tab (widgets)

Creating and editing components in a page

Using widgets

What is a widget?

How do I configure a widget?

How do I format a widget?

How do widgets talk to each other?

Types of widgets

Simple text box

Filter

Filters Tab

Connect Tab

Standard filter results

Setup Tab [to be described]

Controls tab [to be described]

Images/blog tab [to be described]

Messages Tab [to be described]

Connect Tab [to be described]

Custom report

Setup Tab [to be described]

Tools Tab [to be described]

Messages Tab [to be described]

Connect Tab [to be described]

Table format

The Table Tab [to be described]

Messages Tab [to be described]

Connect Tab [to be described]

Map and Timeline

Controls Tab

Layers Tab

Infobox Tab

Cluster tab

Connect Tab

Story Map [TO DO]

Network Graph [TO DO]

Menu [TO DO]

Add record

Email Us Form

====13/05/2025 - reprendre ici=====

2.2.4. Using CSS (=== Styling)

Adding CSS to your Heurist website

Controlling how CSS affects your website

How do I assign a class or id to an element on my Heurist website?

Some useful selectors (advanced)

Where do I put my CSS?

As a global stylesheet in the website record

As a page stylesheet in a webpage record

Add CSS to a Custom Report

Add CSS to a particular element

External CSS/JS

Changing header styles

Loading record view or custom format in a panel

FAQ

[Custom style for Standard Record view ?]

Examples of how to lay out a web page using DIVs

Heurist blog page (with widgets removed)

Cardinal view layout

Strategy

Table View widget

==== à relire ====