Pause comment widget
CommentWidget_1.setVisible(false);
Application.showBusyIndicator("Loading data...");
//do your code here...
CommentWidget_1.setVisible(true);
Application.hideBusyIndicator();
यह step-by-step इस प्रकार काम करता है:
CommentWidget_1.setVisible(false); — यह line temporary रूप से comment widget को users interface से छिपा देती है। यह सुनिश्चित करती है कि नया data load या process होने के दौरान users को अधूरा या पुराना data न दिखाई दे।
Application.showBusyIndicator("Loading data..."); — पूरे application में एक busy indicator (घूमता हुआ icon) के साथ "Loading data..." message display करता है, जो users को सूचित करता है कि कोई background operation चल रहा है। यह data refresh या script execution के दौरान feedback प्रदान करके users अनुभव को बेहतर बनाता है।
//do your code here... — यह placeholder main task या script logic को दर्शाता है, जैसे data प्राप्त करना, filter लगाना, या widget refresh करना।
CommentWidget_1.setVisible(true); — data load या processing पूरी होने के बाद, comment widget फिर से दिखाई देने लगता है।
Application.hideBusyIndicator(); — अंत में, busy indicator छिप जाता है, जो संकेत देता है कि कार्य सफलतापूर्वक पूरा हो गया है।
यह approach SAC applications में smooth, professional और user-friendly interactivity सुनिश्चित करता है।
Apply filter
CommentWidget_1.getCommentingDataSource().setDimensionFilter("Period","05");
इसका उपयोग Comment Widget में किसी विशेष Dimension पर Filter लगाने के लिए किया जाता है।
यदि removeDimensionFilter() Filter को हटाता है, तो setDimensionFilter() उसी Filter को लगाता है।
आइए इसे बहुत आसान भाषा में एक-एक भाग में समझते हैं।
लाइन को छोटे-छोटे भागों में समझें
1. CommentWidget_1
यह आपके SAC Application या Story में मौजूद Comment Widget का नाम (ID) है।
उदाहरण:
- Table → Table_1
- Chart → Chart_1
- Dropdown → Dropdown_1
- Comment Widget → CommentWidget_1
इसका अर्थ है कि Script SAC को बता रही है:
"मुझे CommentWidget_1 नाम वाले Comment Widget पर कार्य करना है।"
2. .getCommentingDataSource()
हर Comment Widget के पीछे एक Commenting Data Source होता है, जिसमें सभी Comments संग्रहित रहते हैं।
इन Comments को विभिन्न Dimensions के आधार पर रखा जा सकता है, जैसे:
- Period
- Version
- Company
- Country
- Product
Method
getCommentingDataSource()
Comment Widget के उसी Commenting Data Source तक पहुँचने का कार्य करता है।
इसे ऐसे समझिए जैसे किसी अलमारी में कई फाइलें रखी हों। Comment Widget केवल उस अलमारी का दरवाज़ा है, जबकि getCommentingDataSource() उस अलमारी को खोलकर अंदर रखी सभी फाइलों (Comments) तक पहुँचने का माध्यम है।
Comment Widget
│
▼
Commenting Data Source
│
▼
Stored Comments
3. .setDimensionFilter()
यह इस पूरी Script का सबसे महत्वपूर्ण Method है।
इसका कार्य है:
किसी विशेष Dimension पर Filter लगाना।
इसका Syntax होता है:
setDimensionFilter("Dimension Name","Member");
जहाँ
- पहला Parameter → Dimension का नाम
- दूसरा Parameter → उस Dimension का Member या Value
4. "Period"
यह उस Dimension का नाम है जिस पर Filter लगाया जाएगा।
इस उदाहरण में Filter Period Dimension पर लगाया जा रहा है।
5. "05"
यह Period Dimension का Member है।
इसका अर्थ है:
Period = 05
यदि आपके Model में
01 = January
02 = February
03 = March
04 = April
05 = May
तो "05" का अर्थ होगा:
केवल May (या Period 05) के Comments दिखाओ।
(ध्यान दें: आपके Model में "05" का अर्थ अलग भी हो सकता है। यह आपके SAC Model में Period Dimension की Member ID पर निर्भर करता है।)
पूरी लाइन का अर्थ
पूरी Script का अर्थ है:
CommentWidget_1 के Commenting Data Source पर जाएँ और Period Dimension पर 05 का Filter लगा दें।
आसान उदाहरण
मान लीजिए आपके Comment Data में निम्न रिकॉर्ड हैं:
| Period | Product | Comment |
|---|---|---|
| 01 | Laptop | January Sales बढ़ी |
| 02 | Laptop | February Sales घटी |
| 03 | Laptop | March Campaign शुरू हुआ |
| 04 | Laptop | April Performance अच्छी रही |
| 05 | Laptop | May Target Achieved |
यदि अभी कोई Filter नहीं लगा है, तो Widget सभी Comments दिखाएगा।
| Period | Comment |
|---|---|
| 01 | January Sales बढ़ी |
| 02 | February Sales घटी |
| 03 | March Campaign शुरू हुआ |
| 04 | April Performance अच्छी रही |
| 05 | May Target Achieved |
अब यदि आप यह Script चलाते हैं:
CommentWidget_1.getCommentingDataSource().setDimensionFilter("Period","05");
तो केवल Period 05 के Comments दिखाई देंगे।
| Period | Comment |
|---|---|
| 05 | May Target Achieved |
Script चलाने से पहले
Comment Widget
कोई Filter नहीं
Visible Comments
✔ January
✔ February
✔ March
✔ April
✔ May
Script चलाने के बाद
Comment Widget
Period Filter = 05
Visible Comments
✔ May
निष्कर्ष (Summary)
नीचे दी गई Script
CommentWidget_1.getCommentingDataSource().setDimensionFilter("Period","05");
तीन मुख्य कार्य करती है:
- CommentWidget_1 नाम के Comment Widget को चुनती है।
- getCommentingDataSource() की सहायता से उसके Commenting Data Source तक पहुँचती है।
- setDimensionFilter("Period","05") द्वारा Period Dimension पर 05 का Filter लगा देती है।
इसके परिणामस्वरूप Comment Widget केवल Period 05 से संबंधित Comments प्रदर्शित करता है। यदि अन्य Dimensions (जैसे Company, Version या Product) पर पहले से Filters लगे हुए हैं, तो वे भी लागू रहते हैं और परिणाम उन्हीं सभी Filters के आधार पर दिखाई देते हैं।
इसी कारण इस Method का उपयोग Dropdown Selection, Button Click, Month Selection, Company Selection तथा Dynamic Comment Filtering जैसी सुविधाएँ बनाने में सबसे अधिक किया जाता है।
Remove filter
CommentWidget_1.getCommentingDataSource().removeDimensionFilter("Period");
इसका उपयोग Comment Widget पर लगे हुए किसी Dimension Filter को हटाने के लिए किया जाता है।
आइए इसे बहुत आसान भाषा में एक-एक भाग में समझते हैं।
लाइन को छोटे-छोटे भागों में समझें
1. CommentWidget_1
यह आपके SAC Application या Story में मौजूद Comment Widget का नाम (ID) है।
जैसे:
- Table → Table_1
- Chart → Chart_1
- Dropdown → Dropdown_1
- Comment Widget → CommentWidget_1
इसका मतलब है कि Script SAC को बता रही है:
"मुझे CommentWidget_1 नाम वाले Comment Widget पर काम करना है।"
2. .getCommentingDataSource()
हर Comment Widget के पीछे एक Commenting Data Source होता है जिसमें सभी Comments संग्रहित रहते हैं।
इन Comments को विभिन्न Dimensions के आधार पर रखा जा सकता है, जैसे:
- Period
- Version
- Company
- Country
- Product
Method
getCommentingDataSource()
Comment Widget के इसी Commenting Data Source को प्राप्त करता है।
इसे ऐसे समझिए जैसे किसी अलमारी में फाइलें रखी हों। Comment Widget केवल अलमारी का दरवाज़ा है, जबकि getCommentingDataSource() उस अलमारी को खोलकर अंदर रखी सभी फाइलों (Comments) तक पहुँचने का माध्यम है।
Comment Widget
│
▼
Commenting Data Source
│
▼
Stored Comments
जब तक Script Commenting Data Source तक नहीं पहुँचती, तब तक वह Comments पर कोई Filter जोड़ या हटा नहीं सकती।
3. .removeDimensionFilter()
यह इस पूरी लाइन का सबसे महत्वपूर्ण Method है।
इसका कार्य है:
किसी विशेष Dimension पर लगा हुआ Filter हटाना।
इसका Syntax होता है:
removeDimensionFilter("Dimension Name");
यदि उस Dimension पर Filter लगा होगा तो वह हट जाएगा।
यदि पहले से कोई Filter नहीं लगा है, तो Script बिना किसी Error के आगे बढ़ जाएगी।
4. "Period"
यह उस Dimension का नाम है जिसका Filter हटाया जाना है।
मान लीजिए कि अभी Comment Widget केवल January 2026 के Comments दिखा रहा है।
Period = Jan 2026
यदि Script में लिखा है
removeDimensionFilter("Period");
तो Period वाला Filter हट जाएगा और Widget सभी Period के Comments दिखाने लगेगा।
पूरी लाइन का अर्थ
पूरी Script का अर्थ है:
CommentWidget_1 के Commenting Data Source पर जाएँ और Period Dimension पर लगा हुआ Filter हटा दें।
आसान उदाहरण
मान लीजिए आपके Comment Data में निम्न रिकॉर्ड हैं:
| Period | Product | Comment |
|---|---|---|
| Jan | Laptop | Sales बढ़ी |
| Feb | Laptop | Sales घटी |
| Mar | Laptop | नया Campaign शुरू हुआ |
| Apr | Laptop | Performance अच्छी रही |
यदि Comment Widget पर Filter लगा है:
Period = Feb
तो Widget केवल यह Comment दिखाएगा:
| Period | Comment |
|---|---|
| Feb | Sales घटी |
अब यदि आप यह Script चलाते हैं:
CommentWidget_1.getCommentingDataSource().removeDimensionFilter("Period");
तो Period वाला Filter हट जाएगा।
अब Widget यह दिखाएगा:
| Period | Product | Comment |
|---|---|---|
| Jan | Laptop | Sales बढ़ी |
| Feb | Laptop | Sales घटी |
| Mar | Laptop | नया Campaign शुरू हुआ |
| Apr | Laptop | Performance अच्छी रही |
Script चलाने से पहले
Comment Widget
Period Filter = Jan
Visible Comments
✔ January Comment
Script चलाने के बाद
Comment Widget
कोई Period Filter नहीं
Visible Comments
✔ January Comment
✔ February Comment
✔ March Comment
✔ April Comment
निष्कर्ष (Summary)
नीचे दी गई Script
CommentWidget_1.getCommentingDataSource().removeDimensionFilter("Period");
तीन कार्य करती है:
- CommentWidget_1 नाम के Comment Widget को चुनती है।
- getCommentingDataSource() की सहायता से उसके Commenting Data Source तक पहुँचती है।
- removeDimensionFilter("Period") द्वारा Period Dimension पर लगा हुआ Filter हटा देती है।
इसके परिणामस्वरूप Comment Widget केवल किसी एक Period के Comments नहीं दिखाता, बल्कि सभी उपलब्ध Period के Comments प्रदर्शित करता है। यदि अन्य Dimensions (जैसे Company, Version या Product) पर Filters लगे हुए हैं, तो वे वैसे ही बने रहते हैं।
इसी कारण इस Method का उपयोग Reset Filter, Clear Selection और Show All Comments जैसी सुविधाएँ बनाने में सबसे अधिक किया जाता है।
Get layout
var TL=CommentWidget_1.getLayout();
console.log(TL);
var getT=CommentWidget_1.getLayout().getTop().value;
console.log("Top: " + getT);
var getB=CommentWidget_1.getLayout().getBottom().value;
console.log("Bottom: " + getB);
var getL=CommentWidget_1.getLayout().getLeft().value;
console.log("Left: " + getL);
var getR=CommentWidget_1.getLayout().getRight().value;
console.log("Right: " + getR);
var getH=CommentWidget_1.getLayout().getHeight().value;
console.log("Height: " + getH);
var getW=CommentWidget_1.getLayout().getWidth().value;
console.log("Width: " + getW);
var TL = CommentWidget_1.getLayout();
CommentWidget_1 का layout object store करता है, जो application के भीतर widget की स्थिति और आकार को नियंत्रित करता है।
console.log(TL);
Layout-related properties के निरीक्षण और debugging के लिए browser console में संपूर्ण layout object print करता है।
var getT = CommentWidget_1.getLayout().getTop().value;
Comment widget की top position (pixels में) प्राप्त करता है और उसे getT variable में store करता है।
console.log("Top: " + getT);
console में getT का value log करता है, debugging उद्देश्यों के लिए widget की top position दिखाता है।
var getB = CommentWidget_1.getLayout().getBottom().value;
Comment widget की bottom position का value प्राप्त करता है और उसे getB variable को assign करता है।
console.log("Bottom: " + getB);
Verification के लिए console में comment widget की bottom layout position show करता है।
var getL = CommentWidget_1.getLayout().getLeft().value;
Widget के left margin value को प्राप्त करता है और बाद में use या display के लिए उसे getL variable में store करता है।
console.log("Left: " + getL);
Widget की वर्तमान left position दिखाने के लिए console में getL value print करता है।
var getR = CommentWidget_1.getLayout().getRight().value;
Layout configuration से comment widget की right position value को getR में retrieve और store करता है।
console.log("Right: " + getR);
Debugging के लिए browser console में comment widget की right layout position value को log करता है।
var getH = CommentWidget_1.getLayout().getHeight().value;
Comment widget की height (pixels में) प्राप्त करता है और उसे getH variable में store करता है।
console.log("Height: " + getH);
Console में comment widget की height का value प्रदर्शित करता है ताकि उसके vertical dimension की पुष्टि की जा सके।
var getW = CommentWidget_1.getLayout().getWidth().value;
Pixels में comment widget की width प्राप्त करता है और उसे getW variable में store करता है।
console.log("Width: " + getW);
Console में widget की width का value print करता है, जिससे उसकी horizontal dimension setting की पुष्टि होती है।
Set layout
CommentWidget_1.getLayout().setTop(100);
CommentWidget_1.getLayout().setBottom(100);
CommentWidget_1.getLayout().setLeft(100);
CommentWidget_1.getLayout().setRight(100);
CommentWidget_1.getLayout().setHeight(500);
CommentWidget_1.getLayout().setWidth(500);
CommentWidget_1.getLayout().setTop(100);
Application layout के top edge से 100 pixels पर comment widget की top position निर्धारित करता है।
CommentWidget_1.getLayout().setBottom(100);
Application layout की bottom boundary से 100 pixels ऊपर comment widget की bottom position निर्धारित करता है।
CommentWidget_1.getLayout().setLeft(100);
Application layout क्षेत्र के बाईं ओर से 100 pixels दूर comment widget की position निर्धारित करता है।
CommentWidget_1.getLayout().setRight(100);
Application layout क्षेत्र के दाईं ओर से 100 pixels दूर comment widget की position निर्धारित करता है।
CommentWidget_1.getLayout().setHeight(500);
comment widget की ऊँचाई 500 pixels निर्धारित करता है, जो application canvas पर इसके vertical आकार को नियंत्रित करता है।
CommentWidget_1.getLayout().setWidth(500);
comment widget की चौड़ाई 500 pixels निर्धारित करता है, जो application layout में इसके horizontal आकार को नियंत्रित करता है।
Get CSS class
CommentWidget_1.getCssClass();
इसका उपयोग Comment Widget पर लागू CSS Class का नाम प्राप्त (Get) करने के लिए किया जाता है।
सरल शब्दों में कहें तो यह Method यह बताता है कि Comment Widget पर इस समय कौन-सी CSS Class लागू है। यह Method केवल जानकारी प्राप्त करता है, इसमें कोई बदलाव नहीं करता।
आइए इस पूरी लाइन को आसान भाषा में समझते हैं।
लाइन को छोटे-छोटे भागों में समझें
1. CommentWidget_1
यह आपके SAC Application में मौजूद Comment Widget का नाम (ID) है।
उदाहरण:
- Table → Table_1
- Chart → Chart_1
- Button → Button_1
- Comment Widget → CommentWidget_1
इसका अर्थ है:
"मुझे CommentWidget_1 नाम वाले Comment Widget पर कार्य करना है।"
2. .getCssClass()
यह इस पूरी Script का सबसे महत्वपूर्ण Method है।
इसका कार्य है:
Comment Widget पर वर्तमान में लागू CSS Class का नाम प्राप्त करना।
यह Method किसी CSS Class को बदलता नहीं है, बल्कि केवल उसका नाम वापस (Return) करता है।
यदि Widget पर BlueTheme नाम की CSS Class लगी है, तो
CommentWidget_1.getCssClass();
का परिणाम होगा:
BlueTheme
यदि कोई CSS Class लागू नहीं है, तो यह खाली मान (Empty Value) या null लौटा सकता है, जो आपके Application के व्यवहार पर निर्भर करता है।
CSS Class क्या होती है?
CSS का पूरा नाम Cascading Style Sheets है।
CSS Class का उपयोग किसी Widget का दिखावट (Appearance) बदलने के लिए किया जाता है।
इसके माध्यम से आप Widget की:
- Background Color
- Text Color
- Font Size
- Font Style
- Border
- Shadow
- Padding
- Margin
आदि को नियंत्रित कर सकते हैं।
उदाहरण के लिए:
BlueTheme
नाम की CSS Class Widget का Background नीला कर सकती है।
जबकि
DarkTheme
नाम की CSS Class उसी Widget को Dark Mode जैसा रूप दे सकती है।
पूरी लाइन का अर्थ
पूरी Script का अर्थ है:
CommentWidget_1 पर इस समय कौन-सी CSS Class लागू है, उसका नाम प्राप्त करो।
आसान उदाहरण
मान लीजिए आपके Application में Comment Widget पर BlueTheme CSS Class लागू है।
Comment Widget
CSS Class = BlueTheme
अब यदि आप यह Script चलाते हैं:
var cssName = CommentWidget_1.getCssClass();
तो Variable cssName में यह Value आ जाएगी:
BlueTheme
अब आप इस Value का उपयोग आगे की Script में कर सकते हैं।
Script चलाने से पहले
Comment Widget
Background Color = Blue
Applied CSS Class
BlueTheme
Script चलाने के बाद
cssName = BlueTheme
ध्यान दें कि Widget की Design में कोई परिवर्तन नहीं होगा।
Script केवल CSS Class का नाम पढ़ती है।
यह Method क्यों उपयोगी है?
इस Method का उपयोग तब किया जाता है जब आपको यह पता लगाना हो कि किसी Widget पर वर्तमान में कौन-सी CSS Class लागू है।
उदाहरण:
- Dark Theme लागू है या नहीं?
- Blue Theme लगी हुई है या नहीं?
- Responsive Layout में कौन-सी Style उपयोग हो रही है?
- Theme बदलने से पहले वर्तमान Theme कौन-सी है?
ऐसी परिस्थितियों में getCssClass() बहुत उपयोगी होता है।
एक वास्तविक उदाहरण
मान लीजिए आपके Dashboard में Dark Mode और Light Mode का विकल्प दिया गया है।
यदि User ने पहले से Dark Mode चुना हुआ है, तो Comment Widget पर
DarkTheme
CSS Class लागू होगी।
अब Script लिखी गई:
var currentTheme = CommentWidget_1.getCssClass();
यदि परिणाम
DarkTheme
मिलता है, तो Application समझ जाएगी कि वर्तमान में Dark Theme लागू है।
इसके बाद आप आवश्यकता अनुसार Theme बदल सकते हैं।
एक और उदाहरण
मान लीजिए आपके Dashboard में तीन CSS Classes हैं:
BlueTheme
GreenTheme
RedTheme
यदि Comment Widget पर
GreenTheme
लगी हुई है,
तो
CommentWidget_1.getCssClass();
का परिणाम होगा:
GreenTheme
सामान्य गलतियाँ (Common Mistakes)
1. यह समझना कि getCssClass() CSS बदल देता है
बहुत से नए Developers सोचते हैं कि यह Method CSS Class बदल देता है।
यह गलत है।
getCssClass() केवल CSS Class का नाम प्राप्त (Get) करता है।
यदि CSS बदलनी हो, तो setCssClass() Method का उपयोग किया जाता है।
2. Return Value को Store न करना
गलत:
CommentWidget_1.getCssClass();
यदि आपको CSS Class का उपयोग आगे करना है, तो उसे किसी Variable में Store करें।
सही:
var cssName = CommentWidget_1.getCssClass();
3. CSS Class और Widget Name में भ्रम
कई Developers सोचते हैं कि
CommentWidget_1
ही CSS Class है।
यह सही नहीं है।
- CommentWidget_1 → Widget का नाम (ID)
- BlueTheme → CSS Class का नाम
दोनों अलग-अलग चीज़ें हैं।
4. CSS Class उपलब्ध न होने पर Error की संभावना
यदि किसी Widget पर कोई CSS Class लागू नहीं है, तो getCssClass() खाली मान (Empty Value) लौटा सकता है।
इसलिए Script में जाँच करना अच्छा अभ्यास माना जाता है।
उदाहरण:
var cssName = CommentWidget_1.getCssClass();
if(cssName !== ""){
// आगे की प्रक्रिया
}
getCssClass() और setCssClass() में अंतर
| Method | कार्य |
|---|---|
| getCssClass() | वर्तमान CSS Class का नाम प्राप्त करता है। |
| setCssClass() | Widget पर नई CSS Class लागू करता है। |
याद रखने की आसान ट्रिक:
- Get = जानकारी प्राप्त करना
- Set = नई जानकारी लागू करना
निष्कर्ष (Summary)
नीचे दी गई Script
CommentWidget_1.getCssClass();
तीन मुख्य कार्य करती है:
- CommentWidget_1 नाम के Comment Widget को पहचानती है।
- उस Widget पर वर्तमान में लागू CSS Class का नाम प्राप्त करती है।
- प्राप्त CSS Class का उपयोग आगे की Script, Theme Management या Conditional Logic में किया जा सकता है।
यह Method Widget की Design में कोई परिवर्तन नहीं करता। इसका कार्य केवल वर्तमान CSS Class की जानकारी प्राप्त करना है। इसलिए इसका उपयोग Theme Detection, Dynamic Styling, Dark Mode, Light Mode, Conditional Formatting तथा Responsive Dashboard Design जैसी परिस्थितियों में सबसे अधिक किया जाता है।
Set CSS class
CommentWidget_1.setCssClass("my-normal-class");
इसका उपयोग Comment Widget की Design (Appearance) को बदलने के लिए किया जाता है। इस Method की सहायता से आप किसी Comment Widget पर पहले से बनाई गई CSS Class को लागू (Apply) कर सकते हैं।
सरल भाषा में कहें तो यह Script Comment Widget को एक नया Look & Feel देती है।
आइए इस पूरी लाइन को एक-एक भाग में विस्तार से समझते हैं।
लाइन को छोटे-छोटे भागों में समझें
1. CommentWidget_1
यह आपके SAC Application में मौजूद Comment Widget का नाम (ID) है।
उदाहरण:
- Table → Table_1
- Chart → Chart_1
- Button → Button_1
- Comment Widget → CommentWidget_1
इसका अर्थ है:
"मुझे CommentWidget_1 नाम वाले Comment Widget पर कार्य करना है।"
2. .setCssClass()
यह इस Script का सबसे महत्वपूर्ण Method है।
इसका कार्य है:
किसी Widget पर नई CSS Class लागू करना।
Syntax:
WidgetName.setCssClass("CSS Class Name");
जहाँ
- WidgetName = जिस Widget की Design बदलनी है।
- "CSS Class Name" = वह CSS Class जिसे लागू करना है।
3. "my-normal-class"
यह उस CSS Class का नाम है जिसे Comment Widget पर लागू किया जा रहा है।
यह CSS Class पहले से आपके SAC Application की Custom Styling में बनाई गई होती है।
उदाहरण:
.my-normal-class{
background-color:#F5F5F5;
color:#000000;
border:1px solid #C0C0C0;
}
जब Script चलेगी, तो यही Style Comment Widget पर लागू हो जाएगी।
CSS Class क्या होती है?
CSS का पूरा नाम Cascading Style Sheets है।
CSS Class की सहायता से किसी Widget की Design बदली जा सकती है।
इसके द्वारा आप निम्न चीज़ों को नियंत्रित कर सकते हैं—
- Background Color
- Text Color
- Font Size
- Font Family
- Border
- Shadow
- Padding
- Margin
- Rounded Corners
यानी बिना Widget को दोबारा बनाए उसकी पूरी Design बदली जा सकती है।
पूरी लाइन का अर्थ
पूरी Script का अर्थ है:
CommentWidget_1 पर my-normal-class नाम की CSS Class लागू कर दो।
जैसे ही Script चलेगी, Comment Widget की Design उसी CSS Class के अनुसार बदल जाएगी।
आसान उदाहरण
मान लीजिए आपके Dashboard में Comment Widget सामान्य रूप में दिखाई देता है।
Comment Widget
Background = White
Text = Black
Border = Default
अब आप यह Script चलाते हैं:
CommentWidget_1.setCssClass("my-normal-class");
अब Widget की Design बदलकर इस प्रकार हो सकती है:
Comment Widget
Background = Light Gray
Text = Black
Border = Gray
Rounded Corners
यानी केवल एक Script से Widget का पूरा Look बदल गया।
Script चलाने से पहले
Comment Widget
Default Style
Background = White
Border = Default
Script चलाने के बाद
Comment Widget
Applied CSS Class
my-normal-class
Background = Light Gray
Border = Gray
यह Method क्यों उपयोगी है?
setCssClass() का उपयोग तब किया जाता है जब Dashboard की Design को Dynamic बनाना हो।
उदाहरण:
- Dark Mode लागू करना।
- Light Mode लागू करना।
- Selected Widget को Highlight करना।
- Error होने पर Widget को Red Color दिखाना।
- Success Message को Green Style में दिखाना।
- Responsive Dashboard बनाना।
इन सभी परिस्थितियों में setCssClass() बहुत उपयोगी Method है।
एक वास्तविक उदाहरण
मान लीजिए आपके Dashboard में दो Buttons हैं।
- Normal View
- Dark View
यदि User Normal View Button पर क्लिक करता है, तो Script लिखी जाती है:
CommentWidget_1.setCssClass("my-normal-class");
अब Comment Widget सामान्य Theme में दिखाई देगा।
यदि User Dark View चुनता है, तो Script होगी:
CommentWidget_1.setCssClass("my-dark-class");
अब वही Widget Dark Theme में बदल जाएगा।
इस प्रकार User बिना Dashboard को Refresh किए Theme बदल सकता है।
एक और उदाहरण
मान लीजिए आपके Dashboard में किसी Comment पर Error आ गया है।
आप चाहते हैं कि Comment Widget लाल रंग में दिखाई दे।
आपने पहले से CSS Class बनाई है:
error-class
अब Script लिखेंगे:
CommentWidget_1.setCssClass("error-class");
अब Widget लाल Border और लाल Background के साथ दिखाई देगा।
यदि Error समाप्त हो जाए तो वापस सामान्य Style लागू कर सकते हैं:
CommentWidget_1.setCssClass("my-normal-class");
सामान्य गलतियाँ (Common Mistakes)
1. ऐसी CSS Class का उपयोग करना जो बनी ही नहीं है
गलत:
CommentWidget_1.setCssClass("BlueTheme");
यदि BlueTheme नाम की CSS Class मौजूद नहीं है, तो Widget पर कोई परिवर्तन दिखाई नहीं देगा।
2. CSS Class Name की Spelling गलत लिखना
गलत:
CommentWidget_1.setCssClass("my-nromal-class");
सही:
CommentWidget_1.setCssClass("my-normal-class");
CSS Class का नाम बिल्कुल वही होना चाहिए जो Styling में बनाया गया है।
3. Widget Name और CSS Class Name में भ्रम
कई नए Developers सोचते हैं कि
CommentWidget_1
ही CSS Class है।
यह सही नहीं है।
- CommentWidget_1 → Widget का नाम
- my-normal-class → CSS Class का नाम
दोनों अलग-अलग चीज़ें हैं।
निष्कर्ष (Summary)
नीचे दी गई Script
CommentWidget_1.setCssClass("my-normal-class");
तीन मुख्य कार्य करती है:
- CommentWidget_1 नाम के Comment Widget को पहचानती है।
- उस Widget पर my-normal-class नाम की CSS Class लागू करती है।
- CSS Class के अनुसार Widget की Design, Background, Font, Border तथा अन्य Styling बदल देती है।
इस Method का उपयोग Dynamic Theme Change, Dark Mode, Light Mode, Error Highlighting, Success Message Styling, Responsive Dashboard Design तथा Custom UI Development जैसी परिस्थितियों में सबसे अधिक किया जाता है। यदि आपको SAC Dashboard को अधिक आकर्षक और Professional बनाना है, तो setCssClass() एक अत्यंत उपयोगी और शक्तिशाली Method है।
Check if comment widget is visible or not
var chk=CommentWidget_1.isVisible();
console.log(chk);
SAP Analytics Cloud (SAC) Analytics Applications में इसका उपयोग यह जाँचने के लिए किया जाता है कि कोई widget वर्तमान में page पर दिखाई दे रहा है या नहीं। isVisible() function एक Boolean value लौटाता है - यदि widget (यहाँ, CommentWidget_1) दिखाई दे रहा है तो true और यदि hidden हुआ है तो false। यह value chk variable में stored होता है। console.log(chk); statement फिर browser के console में परिणाम print करता है, जिससे developers को visibility-related logic को debug करने में मदद मिलती है। यह function user interactions, filters या conditional application states के आधार पर widget को dynamic रूप से दिखाने या छिपाने के लिए उपयोगी होता है।
👨💻 Author
Total Data Solution
Data Analyst | Excel & SAP Analytics Cloud Developer
I share practical Excel, Automation, and Reporting tutorials based on real corporate experience.