LogoLogo
WEM ModelerWEM ReferenceTutorialsMyWEM
  • WEM Platform Documentation
  • Getting Started
    • Introducing WEM
    • Create WEM Account
    • WEM Login
    • MyWEM Portal
      • MyWEM Features
      • MyWEM Support
      • Allow Support Access
    • Partner Portal
  • WEM Modeler
    • Introducing the WEM Modeler
    • Modeler Start Page
    • Manage Projects & Workspaces
    • User Roles Scheme
    • Create a new Project
    • Modeler Application Overview
    • Project Settings
      • Project Configuration
      • Security Settings
      • Portal Settings
      • SMTP Settings
      • Mobile App Settings
    • Expression Editor
    • Flowcharts
      • User Interaction
      • End Node
      • Sub-flowchart
      • Navigation
      • Clear session
      • Decision
      • Assignment
      • List Action
      • Loop
      • Copy Data
      • Save and Discard
      • Import Data
      • Export Data
      • Invoke Webservice
      • HTTP Request
      • Execute Process
        • Different processes explained
        • Send Email
        • Change settings
        • Changing files
        • Generate File
      • Ping server
      • Authenticate
      • Comet Messages
      • OpenAI
      • Async Tasks
      • Note Node
    • Data Model
      • WEM Session Folder
    • Services and Integration
      • Webservices
      • Remote Data Sources
      • Authentication Providers
        • SAML 2.0
          • SAML App Registration in EntraID
        • OAuth 2.0
      • Comet - Real Time Messages
      • Certificates
    • Concepts and Concept Queries
      • Concepts
      • Concept Queries
      • Concept Relations
    • Navigation
      • HTTP Endpoints
      • Tasks
    • Files and Assets
      • Widget Libraries
      • Template Fragments
      • Files
      • Hyperlinks
    • Multilanguage Dictionary
    • Agentic AI
      • WEM AI Agent
      • AI Flowchart Nodes
      • AI User Interaction
    • WEM Preview
    • WEM Runtime
      • Publishing Process
      • Staging
      • Live
    • Debugging
  • Template Editor
    • Interaction Template Editor
      • Interaction Template Hotkeys
    • General and preview
    • Style
      • Heading Type
      • Paragraph Style
      • Text Styling
      • Alignment
      • Hyperlink
      • Tooltip
    • Layout
      • Adaptive columns
      • Div
      • Panel
      • Alert
      • Table
      • Image
      • Icon
      • Label
    • Interaction
      • Form
      • Validation
      • Required field
      • Button
      • Dropdown
      • Free form item
    • Miscellaneous
      • Tabbar
      • Google maps
      • Nested template
      • Script
      • Reference
      • Conditional
      • Data grid
      • Repeater
      • Rich text
      • Custom
    • WMT Tool
  • WEM Reference
    • WEM Expressions Reference
    • Functions
      • Aggregation
        • Average
        • Count
        • First
        • Last
        • Max
        • Min
        • Sum
      • Concepts
        • ConceptId
        • Description
        • FindConcepts
        • GetAncestors
        • GetChildren
        • GetDescendants
        • GetParent
        • Intersection
        • LocalName
        • Synonyms
        • ToConcept
        • Union
      • Date
        • Date
        • DateDiff
        • DateOnly
        • DatePart
        • DayOfWeek
        • FromUnixTimestamp
        • MoveDate
        • Now
        • TimeOfDay
        • Today
        • ToDuration
        • ToLocal
        • ToUnixTimestamp
        • ToUTC
        • UTCNow
        • UTCToday
      • Environment
        • ApplicationId
        • CountryCode
        • CountryName
        • Hostname
        • IpAddress
        • IsFirstRequest
        • IsHttps
        • IsPreview
        • IsStaging
        • IsLive
        • NodeTrail
        • PortalId
        • PortalName
        • ProjectId
        • ProjectName
        • ProjectVersion
        • Setting
        • UrlPath
      • Files
        • FileName
        • FileSize
        • FileUrl
        • MimeType
      • Lists
        • Distinct
        • IsNewRow
        • IsOnRow
        • List
        • NameOf
        • RowId
      • Math
        • Abs
        • Ceiling
        • Cos
        • Distance
        • Exp
        • Floor
        • Log
        • Log10
        • Pi
        • Pow
        • Random
        • Round
        • Sin
        • Sqrt
        • ToNumber
      • Security
        • AesDecrypt
        • AesEncrypt
        • AesIv
        • AesKey
        • CreateJsonWebTokenH256
        • HmacSha256
        • Md5
        • Password
        • PasswordStrength
        • Pbkdf2
        • Sha1
        • Sha256
        • Totp
      • Text
        • AsText
        • Base32ToText
        • Base64ToText
        • CompareFuzzy
        • Concat
        • Contains
        • FormatDate
        • FormatDuration
        • FormatNumber
        • Guid
        • HexToText
        • HtmlAttributeEncode
        • HtmlEncode
        • IndexOf
        • JavascriptEncode
        • JsonEncode
        • Length
        • Padl
        • Padr
        • RegExIsMatch
        • RegExMatches
        • RegExReplace
        • Replace
        • Split
        • StringPart
        • SubString
        • ToBase32
        • ToBase64
        • ToBase64Url
        • ToHex
        • ToLower
        • ToRichText
        • ToString
        • ToTitleCase
        • ToUpper
        • Trim
        • UrlDecode
        • UrlEncode
        • XmlAttributeEncode
        • XmlEncode
        • XPath
        • XPathList
        • XPathNumber
      • Validation
        • HasValue
        • IsEmpty
        • IsKnown
        • IsUnknown
        • IsValidBankaccount
        • IsValidBSN
        • IsValidBTW
        • IsValidEmailAddress
        • IsValidIBAN
        • IsValidPhonenumber
        • IsValidURL
      • Localization
        • AvailableLanguages
        • CurrentLanguage
        • CurrentTimezone
        • LanguageStrategy
        • Languages in WEM
    • Keywords
      • Contains
      • Concepts
        • Ancestor of
        • Child of
        • Concept
        • Descendant of
        • Overlaps
        • Range of
        • Parent of
        • Contains
      • Environment
        • ApplicationRoot
        • Platform
      • Lists
        • In
        • Of
        • Where
        • Contains
        • All
      • Logic
        • And
        • Not
        • Or
        • Choose
        • If Then Else
      • Mobile
        • BatteryLife
        • BuildVersion
        • ConnectivityTypes
        • DeviceId
        • DeviceName
        • IsDevelopmentBuild
        • IsDistributionBuild
      • Text
        • Contains
        • Ends with
        • NewLine
        • Starts with
    • Operators
      • Addition +
      • Division /
      • Equality =
      • Equality-strong ==
      • Greater-than >
      • Greater-than-or-equal >=
      • If-unknown ?
      • Inversion -
      • Less-than <
      • Less-than-or-equal <=
      • Logical-and &, and
      • Logical-not !, not
      • Logical-or |, or
      • Modulo %
      • Multiplication *
      • Power ^
      • Subtraction -
      • Unequality <>
    • Data Types
      • Text
      • Number
      • Yes / No (Boolean)
      • Date Time
      • Duration
      • File
      • Rich Text
      • Concept
      • Conceptset
      • Reference
    • SQL Compatibility
      • Functions
      • Keywords
      • Operators
    • Content Security Policy
    • WEMScript for Custom HTML
    • WEM Widgets
      • WEM Widget Structure
      • WEMScript for Widgets
      • Widget Editor
      • Content Placeholder
    • WMT
      • File Structure
      • Basic Functional Template
      • Styling
      • Font Icons
      • Reference
        • Breadcrumb
        • Button Bar Buttons
        • Common Scripts
        • Common Styles
        • Conditional
        • Content
        • CSP
        • CSP Nonce
        • Expression
        • Hidden Fields
        • Language Select
        • Navigation
        • Node ID
        • Node Name
        • Placeholder
        • Placeholder Conditional
        • Startup Scripts
        • Template Fragment
        • Uses
    • Regression Test Framework
      • WEM Test Script
  • Tutorials
    • Tutorials
      • Making a Change Log
      • Placeholders for end-users
    • First Application
      • Expand First Application
    • Video Tutorials
      • By Partners
      • Security
    • Building Widgets
      • Basics
        • 1. Introduction
        • 2. Hello, World!
        • 3. General
        • 4. Properties
        • 5. Events
        • 6. Styling
        • 7. View State
        • 8. Resources
        • 9. Placeholders
        • 10. Template Editor Script
        • 11. Global Scope
        • 12. Risks and Responsibilities
        • 13. Conclusion
      • In-depth
        • 1. Introduction
        • 2. Platform Availability
        • 3. Development Workflow
        • 4. Properties
        • 5. View state
          • 1. Runtime.viewState
          • 2. sessionStorage
          • 3. Summary
        • 6. Styling
        • 7. Events
          • 1. Navigation
          • 2. Row position
      • WEMscript
        • 1. Introduction
        • 2. Variables
        • 3. Properties
        • 4. OutputId()
        • 5. Register Input - Required
        • 6. Encoding
        • 7. Script Block - Introduction
        • 8. Types
          • 1. Boolean
          • 2. Concept
          • 3. ConceptSet
          • 4. Datetime
          • 5. Duration
          • 6. File
          • 7. Number
          • 8. Richtext
          • 9. Text
        • 9. Script Block - Global Scope
        • 10. Script Block - ES Modules
        • 11. CSS - attachShadow
      • Examples
  • Tips and Tricks
    • Tips and Tricks
      • Keyboard Shortcuts
      • Video's in WEM
      • Extracting text from File
    • Custom Hostnames
    • FAQ
    • Expressions
      • Order of Operators
    • Processes
      • Email Process
      • Tips for creating PDF's
      • ZIP Archive Process Node
    • Concepts
      • Concepts and Runtime
    • Working with data
      • The Power of the Calculated Field
      • Consuming your OData source with Excel 2016
      • Expose your data via OData
      • Using OData to transfer data between runtimes
      • WEM Storage Options
    • Integration
      • Integrating external systems
      • Json
      • Single Sign-on
      • Office365 Integration
    • Performance
      • Performance Tips
      • Performance Profiler
      • Template Performance Profiler
      • The Split Loop
    • Security
      • 2FA with TOTP
      • Blacklist or whitelist IP addresses
    • Widgets
      • Advanced Charts
        • Boxplot Chart
        • Brush Chart
        • Bubble Chart
        • Candlestick Chart
        • Card with Chart
        • Effect Scatter Chart
        • Heat Map
        • Line, Area and Bar Chart
        • Map-Bar Morph
        • Mix Time Line Chart
        • Nested Pie Chart
        • Polar Area Chart
        • Polar Bar Chart
        • Profit Chart
        • Radial Bar Chart
        • Radial Bar Gauge
        • Range Bar Chart
        • Rosetype Pie Chart
        • Sankey Energy Chart
        • Scatter Chart
        • Scatter-Aggregate-Bar Chart
        • Stacked Columns Chart
        • Stepline Chart
        • Treemap
      • Advanced Input
        • Color Picker
        • Conceptset Image Selector
        • Google maps locator
        • Multi select input button
        • MultiFile Upload
        • On/Off switch
        • Process Arrow Steps
        • Rate
        • Rating view
        • Single select input button
        • Slider
        • Tree
      • Template Actions
        • Follow exit
      • Global widgets
        • Agenda
        • Audio Player
        • Calendar
        • Draw Signature
        • Grid Widget
        • Image capture
        • Kanban Board
        • Path
        • Progress Bar
        • reCAPTCHA
        • Timeline
      • Document widgets
        • Json Viewer
        • PDF Viewer
    • Various
    • Go to MyWEM
Powered by GitBook
On this page
  • How does the logging system function?
  • Preparing the datamodel
  • Making the Template(s)
  • The Flows
  • Log overview and details page
  • Result

Was this helpful?

Export as PDF
  1. Tutorials
  2. Tutorials

Making a Change Log

This page will walk you trough a change log system for a multiple applications.

Welcome to our tutorial on building a robust logging system for your applications using rich text and templates! In the world of application development, logging plays a pivotal role in tracking changes, capturing important information, and maintaining a comprehensive record of activity.

Whether you're building a project management tool, a customer relationship management (CRM) system, or an inventory management solution, implementing an effective logging system is essential for ensuring accountability, transparency, and reliability. Access, audit, and change logs serve different purposes. Access logs document resource requests, audit logs monitor security events, while change logs record data modifications.

In this tutorial, we'll guide you through the step-by-step process of setting up a logging system using rich text and templates. You'll learn how to capture and store critical information, track changes over time, and present data in a clear and organized manner. By the end of this tutorial, you'll have a fully functional logging system tailored to your specific application needs.

How does the logging system function?

The logging system operates by utilizing a transient single-select field that include all actions deemed loggable. When a loggable action is initiated, the system sets the transient field to reflect the action and enters the "Log Before Action" sub-flowchart. This sub-flowchart adds a new row to the log list, assigns field values and fills in the "Before" rich text field with the log fields template. Subsequently, the user progresses its database action.

Prior to finalizing the action, the system incorporates the "Log After Action" sub-flowchart. Within this sub-flowchart, it integrates the after-action template into the rich text field and ensures simultaneous saving of both the user's loggable action and associated log items. This synchronized approach guarantees preservation of logged data upon action commitment.

Preparing the datamodel

Log items should always be saved in UTC, you can display timestamps in local time for user convenience but it should be stored in UTC format. This practice ensures consistency and accuracy across different time zones

The first step is to make the Log data list, this will be the list used to record and save the changes made.

  • Change Log

    • Reference to changed item

    • Reference to signed in user

    • After Action Rich Text

    • Before Action Rich Text

    • Date and Time of change (UTC)

    • Log Action (Single-select)

    • Name of Changed Item

    • Name of User

Alternatively, the last two items can be derived using the references in the first two fields. Opting to save and utilize text-based name fields can enhance performance in the Log management screens and ensures the referenced person cannot change.

You will also need to make a concept in the concept tab of the resource pane, this concept describes logged actions. As an example this can be:

  • New Item

  • Edit of General information

  • Edit of Specific information

  • (soft) delete

  • Full delete

The flows handling the logging need a few transient fields to store some information used in the logging process.

  • Log Action (Single-select)

  • Reference to changing item

And a few transient field for searching the log list:

  • Name User (text)

  • Date Action (date time)

  • Log Action (multi-select)

Making the Template(s)

To create the log template, first, add a reference component to the canvas. Within this reference component, incorporate a table with a column for the field names and a column for the corresponding values. If your application features multiple screens with varying editable fields, consider making templates for each screen, reflecting the specific fields available for modification. In this tutorial, we utilize one template for general information and another for all fields within the main data-list.

The properties of this table are default display mode, no column or row as header and no borders but this is up to the developer.

This solution is tested for 150+ fields and a repeater in one template without any issues.

The Flows

Log overview and details page

This flow is very simple and will be the management screen of the logging system. The first step is resetting the Filters with a assignment node followed by the interaction node for the overview. Connected to the Log overview there is another interaction node for the log details page, here we show the log item details and see saved fields.

The details page shows some information about the log item with below it the rich text fields for the before and after situation. With these shown next to each other you can see changes immediately.

Flow for making the log Item

There are two flows that actually do the work, the before change log flow and the post change log flow. In the first flow a new row is created in the change log, the information fields are filled and the template is written to the before action rich text field.

In the second flow the details are checked, the time can be updated and the post change rich text field is filled with the template again but this time with the changed information. Optionally you can also end with a save node to commit the changes then and there and save the change log item at the same time, know that with the save node ALL changes are committed.

The Write template to rich text node has the above picture as template, these are templates for each possible action that can have different fields to be logged. In this example the top one is when somebody edits a screen with access to all fields in from the main list, with the second template only for when a user edits the general info page. The transient field Log Action made earlier is used to check the conditionals and which choose the right template for the right screen. The same templates are used for the before and after flow.

Implementation into application

In this section, we'll explore the practical implementation of the log entry flows discussed earlier into the core functionalities of your application. Specifically, we'll focus on how these flows are integrated into the junctures where changes are made to items within the main list that need to be logged.

It is important for this part to know your application and analyze it if the application is less known. Go trough every flow where a user can:

  • Create an item

  • Change an item

  • (soft) Delete an item

This can also be checked using the find usages on the data list AND its fields or going to the preview of the application and use go to flow from the debug menu on every save or delete button. The change log depends on doing this part completely so this is an import step to do properly.

When a log trigger moment is found you add an assignment node to set the Log action transient field immediately after the start node. The value of this field will depend on the action in the main so it cannot be part of the sub-flow creating the log. After the assignment node you add the sub flow Log before action flow and connect the sub-flow back into the main flow functionality. Before any changes are saved but after the interaction node you add the post change flow, then connect this flow the the save or end node.

Result

When all steps are finished the result can look like this:

Extending the log functionality

Logging Multiple Lists: Expand the logging system to handle changes from multiple lists. Implement a mechanism to differentiate changes from different lists and ensure that the appropriate template is applied to the log entry's rich text field. Add a reference field to the log items for each list and keep track of which list you are changing before entering the make log flows.

Data Retention Policy: Consider establishing a data retention policy to manage the duration for which log items are retained. Develop a cleanup process that runs periodically, based on either a set number of years or a specified number of items, to prevent database overload and maintain storage efficiency.

File Management: Avoid storing files directly within log items to mitigate storage space usage and potential performance impacts. Implement a file management system that links files to log entries without duplicating them, thereby minimizing storage requirements and optimizing processing time.

Performance Optimization: Keep the log flows concise and efficient to avoid performance degradation. Be mindful of the complexity and extent of the log flows, ensuring they do not excessively impact system performance.

PreviousTutorialsNextPlaceholders for end-users

Last updated 11 months ago

Was this helpful?

This example includes a repeater of a sub-list from the main database list
The Flow
Log Overview
The Details Page
Write template to rich text field for both flowcharts
Main overview
Log Details