Add a way to ref widget element (this)

Author: iamrob-nl

README.md

@@ -20,6 +20,8 @@ Add attribute(s) that you may need inside the code.
 
 Link used attributes inside the JavaScript code by using the `${VariableName}`.
 
+Whenever using the `this`  string inside the widget, it will be replaced by the widget unique classname.
+
 ## Issues, suggestions and feature requests
 
 [link to GitHub issues](https://github.com/mrgroen/JavaScript-Snippet/issues)

images/screen2.png

@@ -1,7 +1,7 @@
 {
     "name": "javascriptsnippet",
     "widgetName": "JavaScriptSnippet",
-    "version": "2.0.0",
+    "version": "2.1.0",
     "description": "Insert custom JavaScript to your page.",
     "copyright": "2022 Incentro",
     "author": "Rob Duits",

package.json

@@ -46,15 +46,15 @@
  * @param {("web"|"desktop")} target
  * @returns {Properties}
  */
-export function getProperties(values, defaultProperties, target) {
+
+// export function getProperties(values, defaultProperties, target) {
     // Do the values manipulation here to control the visibility of properties in Studio and Studio Pro conditionally.
     /* Example
     if (values.myProperty === "custom") {
         delete defaultProperties.properties.myOtherProperty;
     }
     */
-    return defaultProperties;
-}
+// }
 
 // /**
 //  * @param {Object} values

src/JavaScriptSnippet.editorConfig.js

@@ -1,10 +1,11 @@
 import "./ui/JavaScriptSnippet.css";
-import { useEffect, useState } from "react";
+import { createElement, useEffect, useState } from "react";
 
 export function JavaScriptSnippet({ attributeList, jsCode, ...rest }) {
     const [canRender, setCanRender] = useState(false);
     const [javaScriptString, setJavaScriptString] = useState([]);
     const widgetName = rest.name || "";
+    const uid = useState((Date.now().toString(36) + Math.random().toString(36).substring(2)));
 
     function escape(htmlStr) {
         return htmlStr
@@ -13,7 +14,7 @@ export function JavaScriptSnippet({ attributeList, jsCode, ...rest }) {
             .replace(/>/g, ">")
             .replace(/"/g, """)
             .replace(/'/g, "'");
-    }
+    };
 
     // function unEscape(htmlStr) {
     //     htmlStr = htmlStr.replace(/&lt;/g, "<");
@@ -53,6 +54,9 @@ export function JavaScriptSnippet({ attributeList, jsCode, ...rest }) {
                 }
                 return null;
             });
+
+            JSArray = JSArray.split("this").join(`'${widgetName}_${uid[0]}'`);
+            setJavaScriptString(JSArray);
         }
         setJavaScriptString(JSArray);
 
@@ -74,10 +78,9 @@ export function JavaScriptSnippet({ attributeList, jsCode, ...rest }) {
         try {
             // eslint-disable-next-line no-new-func
             Function(javaScriptString)();
-            return null;
         } catch (error) {
-            console.warn(`${widgetName}: Error while evaluating javascript input. 
-${error}`);
+            console.warn(`${widgetName}: Error while evaluating javascript input. ${error}`);
         }
-    } else return null;
+    }
+    return <div className={`${widgetName}_${uid[0]}`}></div>;
 }

src/JavaScriptSnippet.jsx

@@ -17,8 +17,17 @@
         <propertyGroup caption="General">
             <property key="jsCode" type="string" multiline="true" required="false">
                 <caption>JavaScript code</caption>
-                <description
-                >Note: special characters ( &amp; &#38; &gt; &lt; &#39; &#34; ) will be formatted.</description>
+                <description>Note: special characters ( &amp; &#38; &gt; &lt; &#39; &#34; ) will be formatted.
+
+Whenever using the `this`  string inside the widget, it will be replaced by the widget unique classname.</description>
+            </property>
+            <property key="tagUseRepeat" type="boolean" defaultValue="false">
+                <caption>Repeat element</caption>
+                <description>Repeat element for each item in data source.</description>
+            </property>
+            <property key="tagContentRepeatDataSource" type="datasource" required="true" isList="true">
+                <caption>Data source</caption>
+                <description />
             </property>
         </propertyGroup>
         <propertyGroup caption="Attributes">
@@ -29,17 +38,11 @@
                     <propertyGroup caption="Object list group">
                         <property key="jsVarName" type="string" required="true">
                             <caption>Variable name</caption>
-                            <description>
-                                camelCaseName: Identifies the attribute value, this name should in the JavaScript
-                                Snippet code.
-                            </description>
+                            <description>camelCaseName: Identifies the attribute value, this name should in the JavaScript Snippet code.</description>
                         </property>
                         <property key="jsAttribute" type="attribute">
                             <caption>Attribute</caption>
-                            <description>
-                                Value of this attribute will be used to replace ${camelCaseName} and passed as a string
-                                (also Boolean attributes).
-                            </description>
+                            <description>Value of this attribute will be used to replace ${camelCaseName} and passed as a string (also Boolean attributes).</description>
                             <attributeTypes>
                                 <attributeType name="Boolean" />
                                 <attributeType name="DateTime" />

src/JavaScriptSnippet.xml

@@ -1,11 +1,11 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <package xmlns="http://www.mendix.com/package/1.0/">
-    <clientModule name="JavaScriptSnippet" version="2.0.0" xmlns="http://www.mendix.com/clientModule/1.0/">
+    <clientModule name="JavaScriptSnippet" version="2.1.0" xmlns="http://www.mendix.com/clientModule/1.0/">
         <widgetFiles>
-            <widgetFile path="JavaScriptSnippet.xml"/>
+            <widgetFile path="JavaScriptSnippet.xml" />
         </widgetFiles>
         <files>
-            <file path="incentro/javascriptsnippet"/>
+            <file path="incentro/javascriptsnippet" />
         </files>
     </clientModule>
 </package>