From 19769780e4e1179ce8de823b704e619c788a36f4 Mon Sep 17 00:00:00 2001
From: "Amogh.Shah" <amogh.shah@mendix.com>
Date: Sat, 12 Nov 2022 05:25:19 +0530
Subject: [PATCH] redme modified with more details and checks added in logic

---
 README.md                         | 13 +++++++++----
 src/TabPageSelector.tsx           |  6 +++---
 src/TabPageSelector.xml           | 15 +++++++--------
 typings/TabPageSelectorProps.d.ts |  4 ++--
 4 files changed, 21 insertions(+), 17 deletions(-)

diff --git a/README.md b/README.md
index 99085c1..8154553 100644
--- a/README.md
+++ b/README.md
@@ -7,11 +7,13 @@ Use this pluggable widget widget to dynamically set the active tab page. The def
 ## Features
 - Dynamically open tab page
 - Get tab page number on which user has clicked
-- Tested on Mendix 8.18.19, 9.1.1, 9.6.0, 9.7.0 and 9.15.1
+- Tested on Mendix 8.18.19, 9.1.1, 9.6.0, 9.7.0, 9.11.0 and 9.15.1
+
+## Demo and Playground
+Try-out this widget by visiting https://tabselectorwidgetapp-sandbox.mxapps.io/
 
 ## Usage
-- Create a Mendix app
-- Add a Data View
+- Add a Data View and set the data source (this data source should have a attribute which will determine the number of active tab page)
 - Add a Tab Container inside the Data View
 - Add the this widget inside the Data View
 - Configure the widget by docuble clicking on it:
@@ -19,5 +21,8 @@ Use this pluggable widget widget to dynamically set the active tab page. The def
     - Select the attribute to determine tab page number. The first tab page number is always 1.
 - Run the app, now based on attribute the tab page will be selected by default.
 
+## Limitations
+This widget should be used inside a data container, we cannot use Microflow as data source to determine active page number this is due to limitation from Mendix pluggable widgets. As of now there is no direct way to get return value form Microflow in pluggable widgets. See https://forum.mendix.com/link/questions/95035
+
 ## Issues, suggestions and feature requests
-Suggestions, feedbacks and issues are always welcome :) [here](https://github.com/mendixlabs/TabPageSelector/issues)
+Suggestions, feedbacks, contributions and issues are always welcome :) [here](https://github.com/mendixlabs/TabPageSelector/issues)
\ No newline at end of file
diff --git a/src/TabPageSelector.tsx b/src/TabPageSelector.tsx
index b3ac0cd..92f90a5 100644
--- a/src/TabPageSelector.tsx
+++ b/src/TabPageSelector.tsx
@@ -60,10 +60,10 @@ export default class TabPageSelector extends Component<TabPageSelectorContainerP
             if(li == null)
             {
                 console.debug("Determined tab page index is: " + this.props.paneIndexByAttr!.value);
-                console.error("Unable find tab page index by specified index.")
+                console.error("Unable find tab page index by specified index.");
             }          
-            
-            li.click()
+            if(li!=null)
+                li.click()
         }        
     }
 }
diff --git a/src/TabPageSelector.xml b/src/TabPageSelector.xml
index ed83eae..e0a47ec 100644
--- a/src/TabPageSelector.xml
+++ b/src/TabPageSelector.xml
@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="utf-8"?>
-<widget id="mendix.tabselector.TabSelector" pluginWidget="true" needsEntityContext="true" offlineCapable="true"
+<widget id="mendix.tabpageselector.TabPageSelector" pluginWidget="true" needsEntityContext="true" offlineCapable="true"
         supportedPlatform="Web"
         xmlns="http://www.mendix.com/widget/1.0/" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://www.mendix.com/widget/1.0/ ../node_modules/mendix/custom_widget.xsd">
@@ -8,18 +8,17 @@
     <icon/>
     <properties>
         <propertyGroup caption="General">
-            <property key="paneIndexByAttr" type="attribute" required="false">
+            <property key="targetTabCtrl" type="string" required="true">
+                <caption>Tab container name</caption>
+                <description>Enter target tab container name.</description>
+            </property>
+            <property key="paneIndexByAttr" type="attribute" required="true">
                 <caption>Select Attribute</caption>
                 <description>Select the attribute which indicates the tab page number. First tab page is always 1.</description>
                 <attributeTypes>
                     <attributeType name="Integer"/>
                 </attributeTypes>
-            </property> 
-            
-            <property key="targetTabCtrl" type="string">
-                <caption>Tab container name</caption>
-                <description>Enter target tab container name.</description>
-            </property>           
+            </property>
         </propertyGroup>
     </properties>
 </widget>
\ No newline at end of file
diff --git a/typings/TabPageSelectorProps.d.ts b/typings/TabPageSelectorProps.d.ts
index cb5dd65..45f07bc 100644
--- a/typings/TabPageSelectorProps.d.ts
+++ b/typings/TabPageSelectorProps.d.ts
@@ -11,13 +11,13 @@ export interface TabPageSelectorContainerProps {
     class: string;
     style?: CSSProperties;
     tabIndex?: number;
-    paneIndexByAttr?: EditableValue<BigJs.Big>;
     targetTabCtrl: string;
+    paneIndexByAttr: EditableValue<BigJs.Big>;
 }
 
 export interface TabPageSelectorPreviewProps {
     class: string;
     style: string;
-    paneIndexByAttr: string;
     targetTabCtrl: string;
+    paneIndexByAttr: string;
 }