Initial version 2.0

Author: iamrob-nl

README.md

@@ -1,24 +1,32 @@
 ## JavaScriptSnippet
-[Insert custom JavaScript to your page.]
+
+Insert custom JavaScript to your Mendix pages, taking object attributes as input parameters.
 
 ## Features
-[feature highlights]
+
+Insert JavaScript code which is executed when loading the widget.
+
+Optionally add one or more attributes which can be used inside the JavaScript code.
+
+Optionally for the attribute if it appears to be empty: fill an empty value.
 
 ## Usage
-[step by step instructions]
 
-## Demo project
-[link to sandbox]
+Place the widget anywhere (relevant) on the Mendix page. Insert JavaScript code that you want to run there.
+
+Add attribute(s) that you may need inside the code.
+
+Link used attributes inside the JavaScript code by using the `${VariableName}`.
 
 ## Issues, suggestions and feature requests
-[link to GitHub issues]
+
+[link to GitHub issues](https://github.com/mrgroen/JavaScript-Snippet/issues)
 
 ## Development and contribution
 
-1. Install NPM package dependencies by using: `npm install`. If you use NPM v7.x.x, which can be checked by executing `npm -v`, execute: `npm install --legacy-peer-deps`.
+1. Install NPM package dependencies by using: `npm install`. If you use NPM v7.x.x, which can be checked by executing
+   `npm -v`, execute: `npm install --legacy-peer-deps`.
 1. Run `npm start` to watch for code changes. On every change:
     - the widget will be bundled;
     - the bundle will be included in a `dist` folder in the root directory of the project;
     - the bundle will be included in the `deployment` and `widgets` folder of the Mendix test project.
-
-[specify contribution]

images/avatar.jpg

@@ -1,10 +1,11 @@
 import "./ui/JavaScriptSnippet.css";
 import { createElement, useEffect, useState } from "react";
 
-export function JavaScriptSnippet({ attributeList, jsCode }) {
+export function JavaScriptSnippet({ attributeList, jsCode, ...rest }) {
     const self = this;
     const [canRender, setCanRender] = useState(false);
     const [javaScriptString, setJavaScriptString] = useState([]);
+    const widgetName = rest.name || "";
 
     function escape(htmlStr) {
         return htmlStr
@@ -26,7 +27,7 @@ export function JavaScriptSnippet({ attributeList, jsCode }) {
 
     useEffect(() => {
         let JavaScriptStringArray = jsCode;
-        if (attributeList) {
+        if (attributeList.length) {
             attributeList.map(attr => {
                 if (attr.jsAttribute.status === "available") {
                     if (typeof attr.jsAttribute.value === "boolean") {
@@ -38,12 +39,23 @@ export function JavaScriptSnippet({ attributeList, jsCode }) {
                             escape(attr.jsAttribute.value)
                         );
                     }
-                    return setJavaScriptString(JavaScriptStringArray);
-                } else return null;
+                }
+                return null;
             });
         }
-        setCanRender(true);
-    }, [javaScriptString, attributeList, jsCode]);
+        setJavaScriptString(JavaScriptStringArray);
+
+        if (!attributeList.length) {
+            setCanRender(true);
+        }
+
+        // clean-up function
+        return () => {
+            if (attributeList.length) {
+                setCanRender(true);
+            }
+        };
+    }, [attributeList, jsCode]);
 
     if (canRender) {
         // JavaScript evaluation will be done in the context of the widget instance.
@@ -57,7 +69,11 @@ export function JavaScriptSnippet({ attributeList, jsCode }) {
             return null;
         } catch (error) {
             console.warn("Error while evaluating javascript input.");
-            return <div className="alert alert-danger">Error while evaluating javascript input: {error}</div>;
+            return (
+                <div name={widgetName} className="alert alert-danger">
+                    Error while evaluating javascript input: {error}
+                </div>
+            );
         }
     } else return null;
 }

images/screen1.png

@@ -11,7 +11,7 @@
         <propertyGroup caption="General">
             <property key="jsCode" type="string" multiline="true" required="false">
                 <caption>JavaScript code</caption>
-                <description/>
+                <description>Note: special characters ( &amp; &#38; &gt; &lt; &#39; &#34; ) will be formatted.</description>
             </property>
         </propertyGroup>
         <propertyGroup caption="Attributes">