How to get textTemplate attribute value in useEffect typeScript code for Apache superset

1
I try to configure Apache Superset in my customWidget with this kind of tutorial.   I have defined customWidget.xml, with one property like textTemplate :    <properties>         <propertyGroup caption="General">             <property key="parameters" type="object" isList="true">                 <caption>Parameters</caption>                 <description/>                 <properties>                     <propertyGroup caption="Object list group">                         <property key="key" type="string" defaultValue="key">                             <caption>Key</caption>                             <description>Key definition</description>                         </property>                         <property key="value" type="textTemplate">                             <caption>Value</caption>                             <description>Value definition</description>                         </property>                     </propertyGroup>                 </properties>             </property>        </propertyGroup>     </properties>   I want to console.log the parameter value but I have only this kind of result who stay undefined : parameters: Array(1)    0:     key: "first key"     value:            status: "loading"       value: undefined     How can I get the value define in my widget as textTemplate (reference to one attribute of specific entity) ?   In the typescript file I have this kind of code :    useEffect(() => {         const embed = async () => {             console.log("PARAMETERS");             console.log({parameters});             [....]         }    }, [])
asked
0 answers
0

Hello

To access the textTemplate attribute value in your TypeScript code for an Apache Superset custom widget, you need to make sure you are correctly extracting the value from the parameters object. The issue you're facing seems to be related to the structure of the parameters object. Based on your provided XML configuration, the parameters object is an array with an object inside it. Here's how you can access the value property in your TypeScript code:

Assuming you are working with React, you can do something like this in your useEffect:

 

useEffect(() => { const embed = async () => { // Assuming `parameters` is an array with one object const firstParameter = parameters[0]; if (firstParameter) { const value = firstParameter.value; if (value && value.status === 'loaded') { const actualValue = value.value; console.log('Parameter Value:', actualValue); // Now you can use `actualValue` in your code } else { console.log('Parameter value is not loaded yet'); } } else { console.log('No parameters found'); } // Rest of your code } // Call the embed function embed(); }, []);

In this code, we first check if there is a parameter in the parameters array. If it exists, we access the value property, and then we further check if the status is "loaded." If it's loaded, we access the actual value from value.value. You can use actualValue in your code as needed.

Make sure that the structure of the parameters array matches the XML configuration you provided, with an array containing objects with a value property. If the structure of your parameters object is different, you may need to adjust the code accordingly.

 

Thank you

Mulesoft Course

answered