Cookbook

Questionnaires

Create a table with a field for each of the answers. Create several forms (Edit views) With one or more questions in each form. These forms should all be based on the same table. Then when you have created all the views, go through again and for each Edit View, Set the view when done to the next form in the sequence of the questionnaire. The user loads load the first form without an ID in the query string, Then for the subsequent forms the ID gets appended to the query string and you end up modifying different fields in the same database row.

Example: I want to ask your name (string), the industry you work in (string), how satisfied are you with my product (1 to 10), any other comments (textarea string) - Each on a separate form, with a "next" button.

Solution:

  1. Create a table called questionnaire_answers. Fields should be name: string, industry: string (Maybe with options if you want a drop-down), satisfied: integer, comments string
  2. Create an Edit view of questionnaire_answers called NameForm. This form should contain only one field, the name
  3. Create an Edit view of questionnaire_answers called IndustryForm. This form should contain only one field, the industry
  4. Create an Edit view of questionnaire_answers called SatisfiedForm. This form should contain only one field, satisfied
  5. Create an Edit view of questionnaire_answers called CommentForm. This form should contain only one field, the comments
  6. Edit the NameForm to set the view when done to IndustryForm
  7. Edit the IndustryForm to set the view when done to SatisfiedForm
  8. Edit the SatisfiedForm to set the view when done to CommentForm
  9. Edit the CommentForm to set the view when done to where ever you want the used to go when done with the entire questionnaire

Although this is a little bit of work to set up, its managable as long as you have less than 10 pages. You can still put more than one question on each form. For instance you could have one of the forms have a bunch of checkboxes for if you have several boolean fields. The huge advantage is that the data is now in the right format, you have a tidy table with one row per user (one row per journey through the whole questionnaire) and the answers in a column each. You can also have a large form at the end with all the answers so the user can review.

Links to previous and next rows

The stepper plug-in contains two different methods For displaying views with links to the next and the previous rows in the table, by some search order:

If you primarily want your view of a row to contain a link to the next and/or previous rows (using the same view), you should use the PreviousOrNextLink view template. Views of this view template will solely display a link to the next row of a chosen view.

In the configuration for the PreviousOrNextLink view, you choose the view you want to link to, a label field which contains a title in the link (this can be left blank), additional fixed text for the label Which does not come from the row, the field to order the rows by, and whether this link is descending by that order. If you want both next and previous links, you should create two views of the PreviousOrNextLink template, one that is descending and the other which is not (i.e. ascending). You can then embed this view in the main view for your row, probably based on the Show template.

Example: You want your blog posts to contain links to the next and the previous blog post. Your "posts" table has a title field of type String and a published field of type Date. You have created a view called ShowPost with viewtemplate Show of the posts table. Now create a new view, of the posts table, with template PreviousOrNextLink, called PrevLink. In the configuration set the link to view to to ShowPost, label field is title, fixed label tp "Previous:", and order by to "published". Tick the Descending box, And click save. Then copy this view, rename it to NextLink. Leave all the configuration the same except and untick the descending box. Now go back to edit your ShowPost, And where ever you want to place these links, create a set of columns, Give them equal width, In the left column embed the PrevLink view and in the right column embed the NextLink view.

Analytics

Any tags that need enabling for analytics (Google Analytics, Plausible etc) can be inserted in the custom HTML (Settings -> about application -> site identity settings ->custom HTML

Dashboards

To build a dashboard with drill down statistics, create a page and embed views on it, created from the visualize plugin. The views should share the state. That way when the state changes by clicking on a segment (bar or pie wedge) in a visualisation, that will be shared by all the views. Other views in that page should now update to focus on the segments you have selected by clicking a visualisation. You can also include Filter views which can further restrict the rows that are considered for the visualisation

Fully customising the look and feel

The any-bootstrap-theme plug-in has an option to use and uploaded file as the stylesheet. You can use this to customise every aspect of the look and feel of your application. Steps:

  1. Pick closest theme from https://bootswatch.com
  2. Find the _variables.scss file for that theme on github e.g. for cyborg https://github.com/thomaspark/bootswatch/blob/v4/dist/cyborg/_variables.scss - other themes find in folder https://github.com/thomaspark/bootswatch/tree/v4/dist and then _variables.scss inside the folder. Save the contents of this file (Copy to a blank text file, or click the Raw button and click save page as in your browser menu)
  3. Go to https://bootstrap.build/, Open the builder (you may want to also create an account so you can save your themes
  4. Inside the bootstrap.build app, at the top there is a button called import, click that and click Import _variables.scss. Pick the saved _variables.scss file
  5. Now tweak the variables until you get the look and feel you want. You may want to start with the colours, changing the primary and secondary colours and the $body-bg variable. You may also want to change the fonts under Typography
  6. Click Export theme and download the bootstrap.min.css file
  7. Upload the  bootstrap.min.css in Saltcorn under Files, set access to public
  8. If you have not already done so, install the any bootstrap theme plug-in, and make this the theme for each role under settings
  9. In any-bootstrap-theme configuration (Accessed through the little cog button in the card in the plug-in store) pick Uploaded file as the Theme and then pick your uploaded bootstrap.min.css as the CSS stylesheet file. Click save.

Show information about the logged user on a page

You may want a profile page or something similar that shows information about the logged in user. To do this::

  • Create a show view of the user table. It is your main user profile view. Use this to show the fields on the user table, or use relations such as join fields, or embedded views of different tables related to the user table
  • Create a page and embed the user show view created above in this page. In the view settings in the builder, change the State dropdown to "Fixed". 
  • When you save the page in the buildup, the next screen should allow you to said the fixed state of the embedded view. There should be an option to set the ID to a preset, which you can set to LoggedIn
  • When they used to load the page, they should now see the user view set to their own user profile

Reload a page every N seconds

In a page or a Show view,

  • Drag an action into this page. set Action = Multi step action, Style = Run on Page Load.
  • Make the first action step a sleep for however long you want to wait for page refresh
  • Make the second step a navigate action, Nav Action= Reload page