Ch 09: Publishing websites and database

Safeguard Archive package - a fully internally documented archive package of all the data in the database
Website > Create - sets up a new CMS website. A database can have multiple websites for different audiences

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.

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
Standalone web page - create or edit a CMS-generated web page for embedding in a third-party website

The CMS : creating a website
1. 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.

Heurist Version 4 showing the functionality of different prts of the Explore page

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 default website is created with a set of commonly used menu entries and web pages with dummy content.

The website editor can be display clicking on the link on the top left of the screen (“website editor”):

There you can switch between the

the Website Layout / Properties button above the tabs to change the title, logo, background and some other settings of the website as a whole
the Site tab (to add new menu entries, to delete the menu entries you don't need or to rename them and the Page ),
the Page tab (to edit the current page structure and modify the component styles and widget properties), the

The website Layout/Properties button open up a form where you must complete or change to modify the settings of your website (title, logo, menu entries...).

The “Advanced” tab allows you to provide some custom CSS and/or Javascript : see below.

For CMS it takes DT_THUMBNAIL (2-39) as favicon.

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 automatically apply to basically any website on the internet.

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 could also add further elements to change the component.

Using widgets

See chapter 8

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

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.

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 bring up the style tool for the widget. At the top of the style tool you will see

This button will take you to the settings for the widget, where you can alter its functionality. 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. Heurist links all 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.

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

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 [to be described]

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.

Saved filters

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.

Saved filters Tab [to be described]

Connect Tab

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]

Accepts fairly basic html such as <b> <i> <u>  

Can also use simple styles:

<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

Note: these functions are now included in the lefthand panel and the description, although broadly accurate, does not cover all functions and will require some revision [Note : the “Map” widget now includes several tabs: I've reordered the current description to reflect this new layout, but it still needs to be completed]

Many options for controlling the appearance and functionality of the map exist :

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.

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 to Record Type in which the data will be create :

Email Us Form [id 751]

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 either to the owner of the database [or to an email address specified in the website home record e-mail field 2-23. Note : le champ n’existe pas dans le RT CMS-Home. J’ai essayé de l’ajouter, avec une autre adresse mail mais il est considéré comme un champ non standard et le mail envoyé par le formulaire de contact continue d’arriver sur l’adresse admin.]

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

??? webpage: Create XML Record id 522 [non vérifié]

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?

We make this easy for you in our website builder.

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

Running Javascript

To avoid the risks of out-of-control websites, this requires authorisation by the system adminstrator.

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.

~~=== WEBSITE EDITING ===~~FAQ

Integrating a website or individual pages with your existing domain

Heurist can generate a complete self-contained website - typically consisting of a header, footer, menu and web pages embedded in this structure - or it can create individual web pages which can be displayed as standalone pages or embedded in another webiste. How do you make these part of your existing domain and/or website?

The website and/or individual web pages will normally include content (including data and images) and functionality (including searches, reports and visualisations) dependant on Heurist's database engine, and must therefpre be generated by an instance of Heurist - they cannot live independently on a web server as they are generally far more than simply static html. The server can be one of the public services (eg. heuristref.net or Heurist.Huma-Num.fr) or your own private Heurist server.

The database you wish to publish must be on the corresponding server - for security and sustainability reasons, each instance of Heurist only has access to databases on its own server (or stack of servers).

Simplified/clean URLs

~~The standard Heurist URLs use parameters at the end such as ?db=my_database&tpl=xyz. These are not particularly 'friendly' for web indexing and interoperability. They can therefore be replaced~~ ~~on the servers managed by the Heurist team~~ ~~(HeuristRef.net and Heurist.Huma-Num.fr) as shown below. The system adminstrators on other servers can configure their servers appropriately to use these URLs (se later).~~

~~web - website Hml - xml output View - record view Tpl - smarty output~~

~~direct access to a web site →~~ ~~https://heuristref.net/Rebekah_ARBookReviews/web/~~
~~Show an individual record with a smarty template (.tpl file): →~~ ~~https://heurist.huma-num.fr/judaism_and_rome/tpl/public-record/75~~
~~Show a query using a smarty template (.tpl file): →~~ ~~https://heurist.huma-num.fr/judaism_and_rome/tpl/public-record/q/t:10~~
~~Show an individual record in html recordview: →~~ ~~https://heurist.huma-num.fr/judaism_and_rome/view/75~~
~~Show an individual record in XML: →~~ ~~https://heurist.huma-num.fr/judaism_and_rome/rec-hml/75/d2~~

~~Generate XML in hml format for a given query:~~ ~~https://heurist.huma-num.fr/judaism_and_rome/hml/t:5~~
~~Add /d2, /d3 etc. if needed: default to …/d1 = depth 1 if the depth parameter is omitted~~

~~For tpl and hml besides record id, it is possible to specify comma separated list of ids or heurist query (without the q=)~~

~~For server administrators~~

~~The URLs above use Apache rewrite rules. See the program code under Server scripts for the full set of rewrites.~~

~~RewriteRule ^/([A-Za-z0-9_]+)/(web|tpl|hml|view)/(.*)$ /h7-alpha/redirects/resolver.php~~

~~RewriteRule ^/h6-alpha/([A-Za-z0-9_]+)/(web|tpl|hml|view)/(.*)$ /h7-alpha/redirects/resolver.php~~

~~Update May 2026~~

~~If the DBName is followed by~~ ~~number(s) directly (no alphabetic keyword), "web" is assumed or inserted (as we do with the DBName on its own)~~ ~~TO DO~~
~~heurist.huma-num.fr/IDENK/3/37471~~ ~~should be equiv. of~~ ~~heurist.huma-num.fr/IDENK/~~~~web~~~~/3/37471~~

~~https://heuristau.net/h7-alpha/ART/web/147~~ = ~~https://heuristau.net/h7-alpha/ART/147~~

~~If the DBname is followed by a word listed in~~ ~~the~~ ~~URLSubstitutions.txt~~ ~~file (see below) replace the words with the corresponding numbers and process the result~~ ~~TO DO~~

~~Examples:~~

~~Contacts 157/150~~

~~Tentang 174/175?lang=fre~~

~~MED/{d+} /tpl/TEST1/[{"t":"5"},{"f:203":"{1}"},{"sortby":"t"}]~~

~~IND/{d+} /tpl/TEST1/{1}~~

~~test2/{d+} ?w=a&template=test2.tpl&mode=html&q=[{"t":"5"},{"f:203":"{1}"}]~~

~~As a keys we can use patterns with simplified tokens:~~

~~"{d+}" or "{\d+}" => "([0-9]+)" One or more digits~~

~~"{d*}" or "{\d*}" => "([0-9]*)" Zero or more digits~~

~~"{w+}" or "{\w+}" => "([A-Za-z0-9_]+)" One or more word characters~~

~~"{s+}" or "{segment}" => "([^/]+)" One URL/path segment~~

~~"{any}" => "(.+)" One or more of any character~~

~~Or standard regex~~

~~~^orders/([0-9]+)$~u~~

~~Examples:~~

~~"orders/{d+}" => "~^orders/([0-9]+)$~u"~~

~~"users/{w+}" => "~^users/([A-Za-z0-9_]+)$~u"~~

~~"pages/{segment}" => "~^pages/([^/]+)$~u"~~

~~"files/{any}" => "~^files/(.+)$~u"~~

~~"~^orders/([0-9]+)$~u" is returned unchanged.~~

~~In values use {nnn} to replace regex matching values~~

~~IDENK direct record access~~

~~Arlo wants something like this:~~ ~~idenk.net/INS/00065/EN and~~ ~~idenk.net/id/INS/00065~~/ID for INS and ART, which goes to the standard report for each of these types. I have modified his requirement a little so we don't have to build all the logic into the code but use the substitution instead:

~~Using:~~

~~INV-EN; ?db=IDENK&w=a&template=IDENK%20English.tpl&mode=html&q=~~

~~ART-EN; ?db=IDENK&w=a&template=IDENK%20English.tpl&mode=html&q=~~

~~INV-ID; ?db=IDENK&w=a&template=IDENK%20Indonesian.tpl&mode=html&q=~~

~~ART-ID; ?db=IDENK&w=a&template=IDENK%20Indonesian.tpl&mode=html&q=~~

~~heurist.huma-num.fr/IDENK/INV-EN/00007~~ ~~This URL does not work at 22/5/26//~~

→

~~heurist.huma-num.fr/IDENK/?db=IDENK&w=a&template=IDENK%20English.tpl&mode=html&q=[{"t":"96"},{"f:1":"00007"}] NOTE: this URL works but whatever you do GDocs does not pass it correctly to the browser, so you must copy and paste it.~~

~~to which we need to append the queries:~~

~~[{"t":"96"},{"f:1":"00007"}] for INV~~

~~[{"t":"95"},{"f:1052":"00007"}] for ART~~

~~This will works with the~~ ~~heurist.huma-num.fr/IDENK/~~ ~~addresses,~~
~~should also work with~~ ~~idenk.net~~ ~~addresses~~

Self-contained website

Whatever the server which serves the database and website, you can make this appear as part of your domain. You can use an existing domain or purchase one quite cheaply if you don't already have one (typically $10 - 40 per year for .net and .org domains, but depends on the 'desirability' of the name - do a search for Cheap domains and shop around). Then ask the domain to point to your database.

~~There are two ways of pointing to the database; with or without masking.~~

~~With masking you will not see the URL change as you navigate within the website. These are good examples:~~ ~~http://digitalharlem.org/~~ ~~and~~ ~~https://c18librariesonline.org/?db=Libraries_Readers_Culture_18C_Atlantic&website. The disadvantages are that you can't bookmark or address a specific page in the website or easily obtain page use statistics.~~

Without masking the domain will get you to the website, but then you will see the full Heurist URL. There are some advantages in this, notably that you can bookmark or point people directly to the URL of a specific page in the website and monitor its use, rather always getting the home page. The developers of website often think it is important to show simplified domain-specific URLs, but we think that concern is probably overdone, once users arrive on a website they are mostly looking at the page, not the URL.

Existing website

~~If you already have a website with a domain, there are a number of options for integrating Heurist web pages.~~

First, migrate your existing website to Heurist. In the long term this can save you a lot of trouble and probably money, as well as increase the chances of longer-term sustainability, because you don't have to maintain a separate web service or keep upgrading the website as the underlying CMS changes (since 2020 we have worked on migrating a number of CMS websites for researchers who do not have the technical support or can see the ongoing cost of migration). Heurist can, with a bit of work, reproduce most websites, although you may need to stick with your existing CMS if you have developed a complex and graphically rich site with specialised interactions, or use a lot of special functions such as ecommerce components.

Secondly, set up a link, or one of the menu items in your existing website, to switch the user over to your Heurist website, or to a single page, in order to display interactive searches and visualisations from the database. Within the Heurist website or page, provide a link to switch back to your existing website (which presumably contains higher level description of the project, and perhaps other databases). This can be made fairly seamless eg. by reproducing a narrow header bar (to maximise real estate) in the style of the main website and putting a Home icon or ~~Back to website~~ link in that header bar. You can also make several menu links to separate standalone Heurist web pages, each of which will navigate back to a specific location. You could also generate these as popups. If you use a domain with masking you can also just use a Back instruction to go back to the point you came from in the main website. You could also reproduce the menu structure of the main website and have the menu entries jump back to the appropriate place in the main website.

The third method - not our preference - is to create one or more standalone Heurist web pages and embed them directly in the existing website using iframes. The problem lies in maximising the space available for the interactive Heurist page and avoiding double scrollbars. It can be done, but will require an understanding of divs, CSS and Javascript if you don't want it popping up in a too-small fixed size box.

Assistance

We are generally happy to help set up websites, but as this tends to be project-specific rather than general development of benefit to the whole community, we can only really afford to do this, beyond simple advice, for projects which help sponsor Heurist development.

Custom default website layouts

Custom website layouts

Heurist defines a default style for websites it generates, which can be overriden to some degree with stylesheets within each website. However the owner of a Heurist server may want to define standard headers, footers and styles for websites run on their server to conform, for example, to corporate branding.

~~A server can be set up with one or more custom website layouts which determine the layout of the header and footer section of the website, and potentially of behaviours and styling within the content.~~

~~One layout may (optionally) be selected as the default which is used every time a new site is created, but the creator of the website can also specify a different layout among those defined.~~

~~Website layout is controlled by files in hclient/widgets/cms. This contains a default template~~ ~~cmsTemplate.php~~ ~~which contains instructions on how to develop further templates.~~

Default layout

~~To set the default layout of new websites created on the server, place this file or an edited version of this file in the parent directory of the Heurist codebase, normally /var/www/html/HEURIST.~~

~~The location of the template files can also be set in heuristConfig.php, defined by~~ ~~$default_CMS_Template_Path~~

Selecting a custom layout

If there are additional template files available, you can apply one of them to an individual website by setting the name in the Website template field of the CMS Homepage record (accessed through Publish > Website header / layout)

~~The template name can be specified without a path, in which case Heurist looks for it in the parent directory of the Heurist codebase (normally /var/www/html/HEURIST) or the directory specified by~~ ~~$default_CMS_Template_Path~~~~, or it can be specified with a path relative to the codebase as shown above.~~

~~The template file is a .php file but the extension can be ommitted.~~

Creating a template

~~To create a Heurist CMS template, first look at the example in~~ ~~hclient/widgets/cms/templates/cmsTemplate.php~~

~~This is the standard template for Heurist websites, as used in this help system. It can be modified by addition and replacement to create the template you require.~~

~~The template requires certain elements:~~

~~1. a php include in the <head> section: include $websiteScriptAndStyles_php;~~

~~2. Definition of html elements with the following ids: main-title, main-logo, main-logo-alt.~~
~~The content of these elements can be replaced with values defined in the CMS Homepage record.~~

~~3. Definition of an html element with id: main-content. It will be populated with content based on the menu item selected.~~

~~4. For Heurist widget menu~~

        ~~<div id="main-menu" class="mceNonEditable header-element" style="position:absolute;~~
           ~~top:110px;width:100%;min-height:40px;border:2px none yellow;color:black;font-size:1.1em;"~~
           ~~data-heurist-app-id="heurist_Navigation" data-generated="1">~~
           ~~<?php print $page_header_menu; ?>~~
         ~~</div>~~

~~5. Optional: if using bootstrap as part eg. of a corporate website style, you may need to add the following for the bootstrap menu:~~

~~<?php~~
~~if($mainmenu_content!=null){print $mainmenu_content;} //output bootstrap menu~~
?>

~~3) Upload files for records to the different than HEURIST_FILESTORE folder.~~

~~To define other that HEURIST_FILESTORE folder, system admin has to define~~

~~$defaultRootFileUploadPath and $defaultRootFileUploadURL parameters in heuristConfigIni.php~~

~~1) website template that uses UHH code of style (using insert.js)~~

~~There is cmsTemplate_HamburgUniversity.php. It uses~~ ~~https://www.uni-hamburg.de/onTEAM/inc/dom/v43/insert.js~~

~~User has to define the name of this template in “Custom website template file” field of main menu record.~~

~~FAQ~~
1. [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:

font-size:18px !important;

}

.recordTitle{

font-size:20px !important;

}

All font-size are relative to body font size now (jan 2025)

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)

</div>

</div>

Cardinal view layout

<div id="centerpane">CENTER</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

http://layout.jquery-dev.com/documentation.cfm#List_of_Options [BROKEN LINK]

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.

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:

<to do>

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

~~Custom report and sorting results:~~ 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). ~~But it doesn't do anything:~~ Interview ~~does~~has ~~not have field #1. It has~~a pointer to Person that ~~have~~has ~~f:1~~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 ~~- now it works~~ *}

~~I am struggling a bit with~~ ~~h6-alpha/?db=parramatta_region_food_cultures&website&id=68&pageid=303#~~ I have nicely got two subsets as two lists with headings, using Search groups sr1 (bottom) and sr3 (top), but whereas the top group loads the story map as you would expect, the bottom group does nothing. I assume that is because the top group is in the same search realm as the storymap, but the bottom is not, however if I were to change the bottom group I would have two identical searches. Is there an easy way to overcome this such as allowing a widget to be part of two groups, eg. ~~~~sr1,sr3~~~~. ~~~~It would also need to undo the selection on the top list when you select on the bottom list.~~~~ ~~I’ve removed filter widgets, result list has its own initial filter property. NOTE USE OF INITIAL FILTER PROPERTY TO AVOID PROBLEM WITH MULTIPLE FILTERS ALL FEEDING THE SAME RESULTSET WIDGET~~

~~What she needs to~~How do isyou retrieve fields from the relationship record (as well as the related ~~record, which she's been able to do)~~record). ~~You wrote:~~ getRelatedRecords returns an array of related records with additional header fields: recRelationType*, recRelationNotes, recRelationStartDate, recRelationEndDate.
However, the problem is that she wants other fields than these four standard fields . Is there a generic way of accessing a field (in this case she wants the Source de l'Information field, which is a recpointer, but others might want any arbitrary field they create).

~~It seems I’ve already answered this question on 4th September~~

~~“It misses relationship record id, so I've added {$Relationship.recRelationID} - now in h6-alpha”~~

{$rel_record = $heurist->getRecord($Relationship.recRelationID)}

{$src_info = $heurist->getRecord($rel_record.f1160)}

Source de l'Information: {$src_info.recTitle}

Léa: 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/>~~

~~2) Via direct manifest URL~~

~~<iframe width=1200 height=800 src="https://heurist.huma-num.fr/h6-alpha/hclient/widgets/viewers/miradorViewer.php?db=pret19_test&recID=&url={urldecode($r.f1200)}"></iframe>~~

~~3) 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>~~

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}

I have put in rubbish dates 1111 and 9999

~~Using~~

Embedding IIIF manifest

~~~~Léa:~~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/>

2) Via direct manifest URL

3) Via file obfuscation ID {$r.f1200_originalvalue[0].ulf_ObfuscatedFileID}

Displaiyng

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

~~Making website public~~

~~Comment peut-on faire pour~~Pour rendre son site web consultable sans avoir besoin d'un login ~~utilisateur~~utilisateur, ~~heurist ?~~

Ilil 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.~~

voir

~~Pour~~(pour ce dernier il suffit de faire une recherche des enregistrements à rendre ~~publique,~~publique et ~~ensuite~~choisir la fonction sous Share):

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

~~Adding custom css styles to TinyMce Editor :~~

Create a file HEURIST_FILESTORE/<dbname>/settings/text_styles.json
Make sure it is own by apache:apache

~~Format of file :~~

~~"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": [~~
]

}

~~Custom styles in memo fields~~

~~We need to make some improvements to the WYSIWYG editor options as well as being able to add new paragraph and text stylesCOMMITTED~~
~~First, rationalisation of icons (the current icons for Heurist record and caption are rather obscure,~~ A ~~looks like underline), and some additions:~~
~~Underline after italic~~
~~Horizontal rule after colour~~
~~Font and font size as shown~~
~~Custom text styles as per specifications in following job~~

HIFOS project: Maël: we need to add 4 more possible styles in the WYSIWYG editor, in addition to Headings 1-6, preformatted and quotation. These styles should be applicable to a portion of the text only (span), and not to the entire paragraph : in the same way the "bold" button works, not in the same way the "Heading 1" style works.~~COMMITTED~~

I would like to do this in such a way that one can add new styles to Heurist text editing and display for a specific database. So I suggest creating a file HEURIST_FILESTORE/<dbname>/settings/text_styles.cnf (I suggest cnf rather than css because we may want to define new paragraph styles as well as new text <span> styles, so we need some clean section heading or other way to indicate that the styles below are text span styles).

~~How will this file be added/edited?~~ ~~~~For the moment simply by backend upload~~~~

~~I think a JSON file would be better.~~ OK

{

~~"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": [~~

]

}

~~As a note~~~~: block_formats would be in a similar format to those listed under style_formats, and make sure all the keys and string values are enclosed in double quotes, otherwise PHP considers it invalid.~~

~~This can be inserted into TinyMCE with little trouble and can be processed easily by php, the above can be placed directly into HEURIST_FILESTORE/<dbname>/settings/text_styles.json~~

~~For HIFOS these styles should be titled Beleg, Ergaenzung, Glosse and BelegGlosse and their formatting should match the css formatting below~~

~~.Beleg{~~

~~font-weight: bold;~~

~~background-color: #F2E3F9;~~

}

~~.Ergaenzung{~~

~~font-style: italic;~~

~~color: #808080;~~

}

~~.Glosse{~~

~~text-decoration: underline;~~

}

~~.BelegGlosse{~~

~~font-weight: bold;~~

~~background-color: #F2E3F9;~~

~~text-decoration: underline;~~

}

~~Applying these style should add the following tags around the portion of text selected <span class="Beleg"> </span> ; <span class="Ergaenzung"> </span>, etc…~~

~~We need to make sure that the new styles are visible in the editor AND in Record Viewer~~
~~Record editor - will be done with the above job~~
~~Record viewer~~
~~Custom reports~~

webpage: Links and listeners

Formerly: Web page id 738

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.~~pages, ~~I’ve~~specify ~~added new option for widget search_page. Specify~~the target page and search_group for widget that will listen for source events.

For ~~example~~example:

At the moment it ~~trigger/listen~~triggers/listens 2fortwo event types ON_REC_SEARCHSTART and ON_REC_SELECT

webpage:

Client side functions

~~id 691~~

Formerly: Web page id 691

~~Are there any~~A client-side ~~functions that we could use~~function to get the ~~databaseID?~~databaseID:

window.hWin.HAPI4.sysinfo.db_registeredid

Besides there are ~~helper~~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~~trm] and ID[ID]

$Db.getConceptID('rty', 10) returns 2-10 concept code for Person ~~rectype~~record type
$Db. getLocalID ('rty', '2-10') returns 2 local id for Person ~~rectype~~record type

Multilingual websites

~~I assume we will~~We specify the language with a parameter such as &weblang=es
If; if this is omitted the website uses the first or only (default) language, whatever that is. If a ~~piece~~data ~~of data~~value has no ~~value~~version for the specified language, it uses the first (default) value.
~~Site~~This capability can be use to define alternative site title and ~~Menus:~~menu ~~Allow~~entries ~~multiple~~/ ~~site~~rollover ~~titles,~~labels (in fields Menu label/page name, and Menu rollover ~~descriptions~~descriptions). ~~This~~
~~one should be easy.~~
The first ~~one~~vlue is the default, additional ~~ones~~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, ~~use~~ the ~~default.~~
~~Remember to trim off the leading space, if present, after detecting nn: at the beginning (could also be preceded by a space, don't assume anything …). Also trim off if the~~default language is ~~specified~~used. ~~for the first (default) language - people will make this mistake.~~
~~I've updated all three fields with repeat and updated the help text in Heurist_Core_Definitions database, and committed~~

~~Filter~~The same system can be applied to Saved search/filter names and filter ~~fields. Apply the same sort of logic to the names of saved filters, the map search name, the user interface title,~~fields and ~~the names of~~ facets ~~within filters, but store the data~~ in ~~the~~facet ~~JSon string.~~searches
~~Add~~Language-specific avalues ~~[Multilingual~~]can be inserted (with the aid of Deepl translate) by clicking on the language button ~~after~~left ~~each~~of ~~translatable~~the ~~text.~~

field.

This

~~Button~~button pops up a formlet to enter alternative language versions and store them separately in(translated fields must be set to be repeating value fields; within the ~~JSon.~~definitions ~~Initially only shows~~forms the ~~default~~fields ~~language,~~are automatically set this could be editable (or not if difficult), when you add a language it should copy the default text to the new language and select it (your first action may be to cut and paste into DEEPL, or else start typing and you replace it) and expand the form to accommodate it. way).
Use single line or memo as appropriate.

~~THIS IS ALSO IN~~ ~~[Heurist]~~
Website ~~Documentation to be added~~

programming

~~In the latest update (~8/11/24) we've added ability to enable custom plugin that are located in vendor/smarty/smarty/libs/plugins/~~
~~Place any number of php files into this folder. Sample code for such file:~~

~~<?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;~~

}

~~== WEBSITE PROGRAMMING ===~~

~~Artem Nov 2024~~

~~CMS. Website publishing.~~

Common class to init layout - ~~HLayourMgr~~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

~~Nicer~~Custom ~~URLs:~~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 beHeadings ~~documented:~~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 tofor beeditCMS_SelectElement.js

~~done~~

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 ~~Huma-Num~~Network ~~and~~tab ~~then what....>~~open.

Ch 09: Publishing websites and database

The Publish menu

The CMS : creating a website

Why use the Heurist CMS?

Configuring website layout

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

Filter

Filters Tab [to be described]

Connect Tab

Saved filters

Saved filters Tab [to be described]

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

Connect Tab

Story Map [TO DO]

Network Graph [TO DO]

Menu [TO DO]

Add record

Email Us Form [id 751]

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

??? webpage: Create XML Record id 522 [non vérifié]

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

=== WEBSITE EDITING ===FAQ

Integrating a website or individual pages with your existing domain

Simplified/clean URLs

Self-contained website

Existing website

Assistance

Custom default website layouts

Custom website layouts

Default layout

Selecting a custom layout

Creating a template

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

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

Create a file HEURIST_FILESTORE/<dbname>/settings/text_styles.json
Make sure it is own by apache:apache