ಬಳಕೆದಾರ-ಚಾಲಿತ ನಿಯತಾಂಕಗಳನ್ನು ಕೋಷ್ಟಕ ಎಂಬೆಡೆಡ್ ಡ್ಯಾಶ್ಬೋರ್ಡ್ಗಳಿಗೆ ಸಂಯೋಜಿಸುವುದು
Tableau ಎಂಬೆಡಿಂಗ್ API ಅನ್ನು ಬಳಸಿಕೊಂಡು ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್ಗಳೊಳಗೆ ಕೋಷ್ಟಕ ಡ್ಯಾಶ್ಬೋರ್ಡ್ಗಳನ್ನು ಎಂಬೆಡಿಂಗ್ ಡೆವಲಪರ್ಗಳಿಗೆ ಡೈನಾಮಿಕ್, ಡೇಟಾ-ಚಾಲಿತ ಪರಿಹಾರಗಳನ್ನು ನೀಡಲು ಅನುಮತಿಸುತ್ತದೆ. ಡ್ರಾಪ್ಡೌನ್ ಮೆನುಗಳ ಮೂಲಕ ಡ್ಯಾಶ್ಬೋರ್ಡ್ ಪ್ಯಾರಾಮೀಟರ್ಗಳೊಂದಿಗೆ ಸಂವಹನವನ್ನು ಸಕ್ರಿಯಗೊಳಿಸುವ ಮೂಲಕ ಬಳಕೆದಾರರ ಅನುಭವವನ್ನು ಹೆಚ್ಚಿಸುವ ಒಂದು ಪ್ರಬಲ ಮಾರ್ಗವಾಗಿದೆ.
ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, ನಿರ್ದಿಷ್ಟ ಟೇಬಲ್ ಪ್ಯಾರಾಮೀಟರ್ ಅನ್ನು ಕುಶಲತೆಯಿಂದ ನಿರ್ವಹಿಸಲು ಡ್ರಾಪ್ಡೌನ್ ಮೆನುವನ್ನು ಕಾನ್ಫಿಗರ್ ಮಾಡುವಲ್ಲಿ ಸವಾಲು ಇರುತ್ತದೆ "ಮೊಯೆಡಾ". ಫಿಲ್ಟರ್ಗಳಿಗಿಂತ ಭಿನ್ನವಾಗಿ, ಸಂಯೋಜಿಸಲು ಸುಲಭವಾಗಿದೆ, JavaScript ಅನ್ನು ಬಳಸಿಕೊಂಡು ಸರಿಯಾಗಿ ಲೋಡ್ ಮಾಡಲು ಮತ್ತು ನವೀಕರಿಸಲು ನಿಯತಾಂಕಗಳಿಗೆ ನಿಖರವಾದ ನಿರ್ವಹಣೆ ಅಗತ್ಯವಿರುತ್ತದೆ.
Tableau API ಪ್ಯಾರಾಮೀಟರ್ಗಳನ್ನು ಪ್ರವೇಶಿಸಲು ವಿಧಾನಗಳನ್ನು ಒದಗಿಸಿದರೂ, ಲಭ್ಯವಿರುವ ಪ್ಯಾರಾಮೀಟರ್ ಮೌಲ್ಯಗಳನ್ನು ಡ್ರಾಪ್ಡೌನ್ ಆಯ್ಕೆಗಳಾಗಿ ಸರಿಯಾಗಿ ಪ್ರದರ್ಶಿಸಲು ಮತ್ತು ಬಳಕೆದಾರರು ಆಯ್ಕೆ ಮಾಡಿದಾಗ ತಡೆರಹಿತ ನವೀಕರಣಗಳನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ಇದು ಟ್ರಿಕಿ ಆಗಿರಬಹುದು.
ಹೊಂದಿಸುವ ಹಂತಗಳ ಮೂಲಕ ನಿಮಗೆ ಮಾರ್ಗದರ್ಶನ ನೀಡುವುದು ಈ ಲೇಖನದ ಗುರಿಯಾಗಿದೆ "ಮೊಯೆಡಾ" ಡ್ರಾಪ್ಡೌನ್ನೊಂದಿಗೆ ಪ್ಯಾರಾಮೀಟರ್. ಅನುಮತಿಸುವ ಮೌಲ್ಯಗಳನ್ನು ಹೇಗೆ ಪಡೆಯುವುದು, ಅವುಗಳನ್ನು ಡ್ರಾಪ್ಡೌನ್ನಲ್ಲಿ ಪ್ರದರ್ಶಿಸುವುದು ಮತ್ತು ಆಯ್ಕೆಯನ್ನು ಮಾಡಿದಾಗ ಪ್ಯಾರಾಮೀಟರ್ ನವೀಕರಣಗಳನ್ನು ಪರಿಣಾಮಕಾರಿಯಾಗಿ ಖಚಿತಪಡಿಸಿಕೊಳ್ಳುವುದು ಹೇಗೆ ಎಂಬುದನ್ನು ನೀವು ಕಲಿಯುವಿರಿ, ಡೆವಲಪರ್ಗಳು ಎದುರಿಸುತ್ತಿರುವ ಸಾಮಾನ್ಯ ಸಮಸ್ಯೆಗಳನ್ನು ಪರಿಹರಿಸುವುದು.
ಆಜ್ಞೆ | ಬಳಕೆಯ ಉದಾಹರಣೆ |
---|---|
viz.workbook.getParametersAsync() | ಈ ಅಸಮಕಾಲಿಕ ವಿಧಾನವು ಟೇಬಲ್ ವರ್ಕ್ಬುಕ್ನಲ್ಲಿ ಲಭ್ಯವಿರುವ ಎಲ್ಲಾ ನಿಯತಾಂಕಗಳ ಪಟ್ಟಿಯನ್ನು ಹಿಂಪಡೆಯುತ್ತದೆ. ಎಂಬೆಡೆಡ್ ಡ್ಯಾಶ್ಬೋರ್ಡ್ನಲ್ಲಿ ಅವರೊಂದಿಗೆ ಸಂವಹನ ನಡೆಸುವ ಮೊದಲು ಪ್ಯಾರಾಮೀಟರ್ ಡೇಟಾವನ್ನು ಕ್ರಿಯಾತ್ಮಕವಾಗಿ ಲೋಡ್ ಮಾಡುವುದು ಅತ್ಯಗತ್ಯ. |
viz.workbook.changeParameterValueAsync() | ಕೋಷ್ಟಕದಲ್ಲಿ ನಿರ್ದಿಷ್ಟ ಪ್ಯಾರಾಮೀಟರ್ನ ಮೌಲ್ಯವನ್ನು ನವೀಕರಿಸುತ್ತದೆ. ಬಳಕೆದಾರರು ಡ್ರಾಪ್ಡೌನ್ ಆಯ್ಕೆಯನ್ನು ಬದಲಾಯಿಸಿದಾಗ, ವರ್ಕ್ಬುಕ್ನಲ್ಲಿನ ನಿಯತಾಂಕವನ್ನು ನೈಜ ಸಮಯದಲ್ಲಿ ನವೀಕರಿಸಲಾಗುತ್ತದೆ ಎಂದು ಇದು ಖಚಿತಪಡಿಸುತ್ತದೆ. |
allowableValues | ಈ ಗುಣಲಕ್ಷಣವು ಟೇಬಲ್ ಪ್ಯಾರಾಮೀಟರ್ಗೆ ಅನುಮತಿಸುವ ಮೌಲ್ಯಗಳನ್ನು ಹೊಂದಿದೆ. ಬಳಕೆದಾರರು ಆಯ್ಕೆ ಮಾಡಬಹುದಾದ ಎಲ್ಲಾ ಮಾನ್ಯ ಪ್ಯಾರಾಮೀಟರ್ ಆಯ್ಕೆಗಳೊಂದಿಗೆ ಡ್ರಾಪ್ಡೌನ್ ಮೆನುವನ್ನು ಜನಪ್ರಿಯಗೊಳಿಸಲು ಇದನ್ನು ಬಳಸಲಾಗುತ್ತದೆ. |
currentValue.value | ಟೇಬಲ್ ಪ್ಯಾರಾಮೀಟರ್ನ ಪ್ರಸ್ತುತ ಮೌಲ್ಯವನ್ನು ಪ್ರವೇಶಿಸಿ. ಡ್ರಾಪ್ಡೌನ್ ಡೀಫಾಲ್ಟ್ ಆಯ್ಕೆಯು ಡ್ಯಾಶ್ಬೋರ್ಡ್ನಲ್ಲಿರುವ ಪ್ಯಾರಾಮೀಟರ್ನ ಪ್ರಸ್ತುತ ಸ್ಥಿತಿಗೆ ಹೊಂದಿಕೆಯಾಗುತ್ತದೆ ಎಂದು ಇದು ಖಚಿತಪಡಿಸುತ್ತದೆ. |
document.createElement("select") | JavaScript ಮೂಲಕ ಕ್ರಿಯಾತ್ಮಕವಾಗಿ |
dropdown.addEventListener("change") | ಬಳಕೆದಾರರ ಆಯ್ಕೆಯ ಬದಲಾವಣೆಗಳನ್ನು ಪತ್ತೆಹಚ್ಚಲು ಡ್ರಾಪ್ಡೌನ್ಗೆ ಈವೆಂಟ್ ಆಲಿಸುವವರನ್ನು ಸೇರಿಸುತ್ತದೆ. ಪ್ರಚೋದಿಸಿದಾಗ, ಇದು ಟೇಬಲ್ಯು ವರ್ಕ್ಬುಕ್ನಲ್ಲಿ ಪ್ಯಾರಾಮೀಟರ್ ನವೀಕರಣ ಪ್ರಕ್ರಿಯೆಯನ್ನು ಪ್ರಾರಂಭಿಸುತ್ತದೆ. |
find((p) =>find((p) => p.name === "Moeda") | ನಿರ್ದಿಷ್ಟ "Moeda" ಪ್ಯಾರಾಮೀಟರ್ ಅನ್ನು ಪತ್ತೆಹಚ್ಚಲು ಪ್ಯಾರಾಮೀಟರ್ಗಳ ರಚನೆಯಲ್ಲಿ ಫೈಂಡ್() ವಿಧಾನವನ್ನು ಬಳಸುತ್ತದೆ. ನವೀಕರಣಗಳಿಗಾಗಿ ಸರಿಯಾದ ಪ್ಯಾರಾಮೀಟರ್ ಅನ್ನು ಗುರಿಪಡಿಸಲಾಗಿದೆ ಎಂದು ಇದು ಖಚಿತಪಡಿಸುತ್ತದೆ. |
viz.addEventListener(TableauEventType.FirstInteractive) | ಪ್ಯಾರಾಮೀಟರ್ ಡ್ರಾಪ್ಡೌನ್ ಅನ್ನು ಲೋಡ್ ಮಾಡುವ ಕಾರ್ಯವನ್ನು ಟೇಬಲ್ ಡ್ಯಾಶ್ಬೋರ್ಡ್ ಸಂಪೂರ್ಣವಾಗಿ ಲೋಡ್ ಮಾಡಿದ ನಂತರ ಮಾತ್ರ ಕಾರ್ಯಗತಗೊಳ್ಳುತ್ತದೆ ಎಂದು ಈ ಆಜ್ಞೆಯು ಖಚಿತಪಡಿಸುತ್ತದೆ, ಸಮಯ ಸಮಸ್ಯೆಗಳನ್ನು ತಪ್ಪಿಸುತ್ತದೆ. |
option.value = value.value | |
jest.fn().mockResolvedValue() | ಅಸಮಕಾಲಿಕ ಕ್ರಿಯೆಗಳ ವರ್ತನೆಯನ್ನು ಅಪಹಾಸ್ಯ ಮಾಡಲು ಘಟಕ ಪರೀಕ್ಷೆಗಳಲ್ಲಿ ಬಳಸಲಾಗುತ್ತದೆ. ಲೈವ್ ಕೋಷ್ಟಕ ಪರಿಸರದ ಅಗತ್ಯವಿಲ್ಲದೇ ಪರೀಕ್ಷೆಯ ಸಮಯದಲ್ಲಿ ಪ್ಯಾರಾಮೀಟರ್ ಅಪ್ಡೇಟ್ ಲಾಜಿಕ್ ಅನ್ನು ಸರಿಯಾಗಿ ಅನುಕರಿಸಲಾಗಿದೆ ಎಂದು ಇದು ಖಚಿತಪಡಿಸುತ್ತದೆ. |
ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಬಳಸಿ ಟೇಬಲ್ ಪ್ಯಾರಾಮೀಟರ್ಗಳನ್ನು ಕ್ರಿಯಾತ್ಮಕವಾಗಿ ನಿಯಂತ್ರಿಸುವುದು ಹೇಗೆ
ಮೇಲೆ ಒದಗಿಸಲಾದ ಸ್ಕ್ರಿಪ್ಟ್ಗಳನ್ನು ಟೇಬಲ್ಯು ಡ್ಯಾಶ್ಬೋರ್ಡ್ ಮತ್ತು ಕಸ್ಟಮ್ HTML ನಡುವಿನ ಸುಗಮ ಸಂವಾದವನ್ನು ಸಕ್ರಿಯಗೊಳಿಸಲು ವಿನ್ಯಾಸಗೊಳಿಸಲಾಗಿದೆ ಡ್ರಾಪ್ಡೌನ್ ಮೆನು. ಈ ಸ್ಕ್ರಿಪ್ಟ್ಗಳು Tableau ಎಂಬೆಡಿಂಗ್ API ಅನ್ನು ಬಳಸುತ್ತವೆ, ಇದು ಡೆವಲಪರ್ಗಳಿಗೆ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್ಗಳಲ್ಲಿ ಟೇಬಲ್ ಡ್ಯಾಶ್ಬೋರ್ಡ್ಗಳನ್ನು ಎಂಬೆಡ್ ಮಾಡಲು ಮತ್ತು ಅವುಗಳ ಪರಸ್ಪರ ಕ್ರಿಯೆಯನ್ನು ವಿಸ್ತರಿಸಲು ಅನುಮತಿಸುತ್ತದೆ. "Moeda" ಹೆಸರಿನ ಪ್ಯಾರಾಮೀಟರ್ ಅನ್ನು JavaScript ಮೂಲಕ ಅದರ ಅನುಮತಿಸುವ ಮೌಲ್ಯಗಳನ್ನು ಪಡೆಯುವ ಮೂಲಕ ಮತ್ತು ಬಳಕೆದಾರರು ಆಯ್ಕೆ ಮಾಡಿದಾಗ ಕ್ರಿಯಾತ್ಮಕವಾಗಿ ಪ್ಯಾರಾಮೀಟರ್ ಅನ್ನು ನವೀಕರಿಸುವುದು ಪ್ರಾಥಮಿಕ ಗಮನವಾಗಿದೆ.
ಸ್ಕ್ರಿಪ್ಟ್ನ ಮೊದಲ ಭಾಗವು "Moeda" ಪ್ಯಾರಾಮೀಟರ್ ಅನ್ನು ಲೋಡ್ ಮಾಡುವ ಕಾರ್ಯದೊಂದಿಗೆ ಪ್ರಾರಂಭವಾಗುತ್ತದೆ. ಈ ಕಾರ್ಯವು ಹತೋಟಿಗೆ ತರುತ್ತದೆ getParametersAsync() ವರ್ಕ್ಬುಕ್ನಲ್ಲಿ ಲಭ್ಯವಿರುವ ಎಲ್ಲಾ ನಿಯತಾಂಕಗಳನ್ನು ಹಿಂಪಡೆಯುವ ವಿಧಾನ. ನಿಯತಾಂಕಗಳನ್ನು ಲೋಡ್ ಮಾಡಿದ ನಂತರ, ಸ್ಕ್ರಿಪ್ಟ್ ನಿರ್ದಿಷ್ಟ "Moeda" ನಿಯತಾಂಕವನ್ನು ಬಳಸಿಕೊಂಡು ಗುರುತಿಸುತ್ತದೆ ಹುಡುಕಿ() ವಿಧಾನ. ಪ್ಯಾರಾಮೀಟರ್ ಕಂಡುಬರದಿದ್ದರೆ, ಉಳಿದ ಕೋಡ್ ಅನ್ನು ಮುರಿಯುವುದನ್ನು ತಪ್ಪಿಸಲು ಅದು ದೋಷವನ್ನು ಲಾಗ್ ಮಾಡುತ್ತದೆ. ಪ್ಯಾರಾಮೀಟರ್ಗಳೊಂದಿಗೆ ಕೆಲಸ ಮಾಡಲು ಮುಂದಿನ ತರ್ಕದೊಂದಿಗೆ ಮುಂದುವರಿಯುವ ಮೊದಲು ಅವು ಅಸ್ತಿತ್ವದಲ್ಲಿವೆಯೇ ಎಂದು ತಿಳಿದುಕೊಳ್ಳುವ ಅಗತ್ಯವಿರುವುದರಿಂದ ಇದು ನಿರ್ಣಾಯಕವಾಗಿದೆ.
ನಿಯತಾಂಕವನ್ನು ಗುರುತಿಸಿದ ನಂತರ, ಎ ಡ್ರಾಪ್ಡೌನ್ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ನ DOM ಮ್ಯಾನಿಪ್ಯುಲೇಶನ್ ವಿಧಾನಗಳನ್ನು ಬಳಸಿಕೊಂಡು ಮೆನುವನ್ನು ಕ್ರಿಯಾತ್ಮಕವಾಗಿ ರಚಿಸಲಾಗಿದೆ. ನಿಯತಾಂಕದ ಅನುಮತಿಸುವ ಮೌಲ್ಯಗಳಿಂದ ಪ್ರತಿಯೊಂದು ಮೌಲ್ಯವನ್ನು ಡ್ರಾಪ್ಡೌನ್ನಲ್ಲಿ ಆಯ್ಕೆಯಾಗಿ ಸೇರಿಸಲಾಗುತ್ತದೆ. ಆಯ್ದ ಆಯ್ಕೆಯನ್ನು ಪ್ಯಾರಾಮೀಟರ್ನ ಪ್ರಸ್ತುತ ಮೌಲ್ಯಕ್ಕೆ ಹೊಂದಿಸುವ ಮೂಲಕ ಡ್ರಾಪ್ಡೌನ್ ಪ್ಯಾರಾಮೀಟರ್ನ ಪ್ರಸ್ತುತ ಸ್ಥಿತಿಯನ್ನು ಪ್ರತಿಬಿಂಬಿಸುತ್ತದೆ ಎಂದು ಸ್ಕ್ರಿಪ್ಟ್ ಖಚಿತಪಡಿಸುತ್ತದೆ. ಬಳಕೆದಾರರು ಡ್ಯಾಶ್ಬೋರ್ಡ್ನಲ್ಲಿ ಇತ್ತೀಚಿನ ಮೌಲ್ಯವನ್ನು ನೋಡುತ್ತಾರೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ಈ ಹಂತವು ಅತ್ಯಗತ್ಯವಾಗಿರುತ್ತದೆ, ಡ್ಯಾಶ್ಬೋರ್ಡ್ನ ಸ್ಥಿತಿ ಮತ್ತು ಡ್ರಾಪ್ಡೌನ್ನ ಡೀಫಾಲ್ಟ್ ಆಯ್ಕೆಯ ನಡುವೆ ಸ್ಥಿರತೆಯನ್ನು ಒದಗಿಸುತ್ತದೆ.
ಸ್ಕ್ರಿಪ್ಟ್ನ ಕೊನೆಯ ಭಾಗವು ಡ್ರಾಪ್ಡೌನ್ಗೆ ಈವೆಂಟ್ ಕೇಳುಗರನ್ನು ಸೇರಿಸುವುದನ್ನು ಒಳಗೊಂಡಿರುತ್ತದೆ. ಬಳಕೆದಾರರು ಆಯ್ಕೆಮಾಡಿದ ಆಯ್ಕೆಯನ್ನು ಬದಲಾಯಿಸಿದಾಗ ಮತ್ತು ಟ್ರಿಗ್ಗರ್ ಮಾಡಿದಾಗ ಈ ಈವೆಂಟ್ ಕೇಳುಗ ಪತ್ತೆ ಮಾಡುತ್ತದೆ ಬದಲಾವಣೆ ಪ್ಯಾರಾಮೀಟರ್ ಮೌಲ್ಯ ಅಸಿಂಕ್() ಕೋಷ್ಟಕದಲ್ಲಿ ನಿಯತಾಂಕವನ್ನು ನವೀಕರಿಸಲು ಕಾರ್ಯ. ಹೆಚ್ಚುವರಿಯಾಗಿ, ಡ್ಯಾಶ್ಬೋರ್ಡ್ ಅನ್ನು ಬಳಸಿಕೊಂಡು ಸಂಪೂರ್ಣವಾಗಿ ಲೋಡ್ ಮಾಡಿದ ನಂತರ ಮಾತ್ರ ಡ್ರಾಪ್ಡೌನ್ ಅನ್ನು ಪ್ರದರ್ಶಿಸಲಾಗುತ್ತದೆ ಎಂದು ಸ್ಕ್ರಿಪ್ಟ್ ಖಚಿತಪಡಿಸುತ್ತದೆ ಮೊದಲ ಸಂವಾದಾತ್ಮಕ ಘಟನೆ ಡ್ರಾಪ್ಡೌನ್ ಅಕಾಲಿಕವಾಗಿ ಜನಸಂಖ್ಯೆಯನ್ನು ಹೊಂದಿಲ್ಲ ಎಂದು ಇದು ಖಚಿತಪಡಿಸುತ್ತದೆ, ದೋಷಗಳನ್ನು ತಡೆಯುತ್ತದೆ ಅಥವಾ ಪ್ಯಾರಾಮೀಟರ್ ಮೌಲ್ಯಗಳನ್ನು ಕಳೆದುಕೊಳ್ಳುತ್ತದೆ. ಪರಿಹಾರವು ಮಾಡ್ಯುಲರ್ ಮತ್ತು ಸ್ಕೇಲೆಬಲ್ ಆಗಿದ್ದು, ಅದೇ ಲಾಜಿಕ್ ರಚನೆಯನ್ನು ಮರುಬಳಕೆ ಮಾಡುವ ಮೂಲಕ ಇತರ ನಿಯತಾಂಕಗಳು ಅಥವಾ ಡ್ಯಾಶ್ಬೋರ್ಡ್ಗಳಿಗೆ ಹೊಂದಿಕೊಳ್ಳುವುದನ್ನು ಸುಲಭಗೊಳಿಸುತ್ತದೆ.
ಟೇಬಲ್ ಪ್ಯಾರಾಮೀಟರ್ಗಳನ್ನು ನಿಯಂತ್ರಿಸಲು ಇಂಟರಾಕ್ಟಿವ್ ಡ್ರಾಪ್ಡೌನ್ ಅನ್ನು ರಚಿಸಲಾಗುತ್ತಿದೆ
ಪ್ಯಾರಾಮೀಟರ್ಗಳನ್ನು ಕ್ರಿಯಾತ್ಮಕವಾಗಿ ಲೋಡ್ ಮಾಡಲು ಮತ್ತು ನವೀಕರಿಸಲು Tableau ಎಂಬೆಡಿಂಗ್ API ಜೊತೆಗೆ JavaScript ಅನ್ನು ಬಳಸುವುದು
// Solution 1: Basic Implementation Using Async/Await and Tableau API
async function loadMoedaParameter() {
try {
const parameters = await viz.workbook.getParametersAsync();
const moedaParam = parameters.find((p) => p.name === "Moeda");
if (!moedaParam) {
console.error("Parameter 'Moeda' not found!");
return;
}
const dropdown = document.createElement("select");
moedaParam.allowableValues.forEach((value) => {
const option = document.createElement("option");
option.text = value.formattedValue;
option.value = value.value;
dropdown.appendChild(option);
});
dropdown.value = moedaParam.currentValue.value;
dropdown.addEventListener("change", async (e) => {
const selectedMoeda = e.target.value;
try {
await viz.workbook.changeParameterValueAsync("Moeda", selectedMoeda);
console.log("Moeda changed to:", selectedMoeda);
} catch (error) {
console.error("Error changing the Moeda parameter:", error);
}
});
document.getElementById("Moeda-container-desktop").appendChild(dropdown);
} catch (error) {
console.error("Error loading the Moeda parameter:", error);
}
}
viz.addEventListener(TableauEventType.FirstInteractive, loadMoedaParameter);
ಟೇಬಲ್ ಪ್ಯಾರಾಮೀಟರ್ ನವೀಕರಣಗಳಿಗಾಗಿ ಮಾಡ್ಯುಲರ್ ಡ್ರಾಪ್ಡೌನ್ ಲಾಜಿಕ್ ಅನ್ನು ಅಳವಡಿಸಲಾಗುತ್ತಿದೆ
ಮಾಡ್ಯುಲರ್ ಕಾರ್ಯಗಳು ಮತ್ತು ವರ್ಧಿತ ದೋಷ ನಿರ್ವಹಣೆಯನ್ನು ಬಳಸಿಕೊಂಡು ಆಪ್ಟಿಮೈಸ್ಡ್ ಅಪ್ರೋಚ್
// Solution 2: Modular and Reusable Code with Error Handling
function createDropdown(options, onChangeCallback) {
const dropdown = document.createElement("select");
dropdown.style.cssText = "border:none; width:100%; height:40px; background:#FFF;";
options.forEach(({ text, value }) => {
const option = document.createElement("option");
option.text = text;
option.value = value;
dropdown.appendChild(option);
});
dropdown.addEventListener("change", (e) => onChangeCallback(e.target.value));
return dropdown;
}
async function updateParameter(parameterName, value) {
try {
await viz.workbook.changeParameterValueAsync(parameterName, value);
console.log(\`${parameterName} changed to: \${value}\`);
} catch (error) {
console.error("Error updating parameter:", error);
}
}
async function loadParameterDropdown(containerId, parameterName) {
try {
const parameters = await viz.workbook.getParametersAsync();
const param = parameters.find((p) => p.name === parameterName);
if (!param) throw new Error(\`Parameter '\${parameterName}' not found!\`);
const options = param.allowableValues.map((val) => ({
text: val.formattedValue,
value: val.value,
}));
const dropdown = createDropdown(options, (value) => {
updateParameter(parameterName, value);
});
document.getElementById(containerId).appendChild(dropdown);
} catch (error) {
console.error("Error loading parameter dropdown:", error);
}
}
viz.addEventListener(TableauEventType.FirstInteractive, () => {
loadParameterDropdown("Moeda-container-desktop", "Moeda");
});
ವಿವಿಧ ಪರಿಸರಗಳಲ್ಲಿ ಟೇಬಲ್ ಪ್ಯಾರಾಮೀಟರ್ ಪರಸ್ಪರ ಕ್ರಿಯೆಯನ್ನು ಪರೀಕ್ಷಿಸಲಾಗುತ್ತಿದೆ
ಪ್ಯಾರಾಮೀಟರ್ ನವೀಕರಣಗಳನ್ನು ಮೌಲ್ಯೀಕರಿಸಲು JavaScript ನೊಂದಿಗೆ ಯುನಿಟ್ ಪರೀಕ್ಷೆಗಳನ್ನು ಬರೆಯುವುದು
// Solution 3: Unit Test to Validate Parameter Changes
function mockVizWorkbook() {
return {
parameters: [{
name: "Moeda",
allowableValues: [{ value: "USD", formattedValue: "USD" }],
currentValue: { value: "USD" },
}],
changeParameterValueAsync: jest.fn().mockResolvedValue(),
};
}
test("Dropdown updates Moeda parameter correctly", async () => {
const vizMock = { workbook: mockVizWorkbook() };
const updateSpy = vizMock.workbook.changeParameterValueAsync;
document.body.innerHTML = '<div id="Moeda-container-desktop"></div>';
await loadParameterDropdown("Moeda-container-desktop", "Moeda");
const dropdown = document.querySelector("select");
dropdown.value = "USD";
dropdown.dispatchEvent(new Event("change"));
expect(updateSpy).toHaveBeenCalledWith("Moeda", "USD");
});
ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ನೊಂದಿಗೆ ಟೇಬಲ್ ಪ್ಯಾರಾಮೀಟರ್ಗಳನ್ನು ನಿರ್ವಹಿಸಲು ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು
ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್ಗಳಲ್ಲಿ ಟೇಬಲ್ಯು ಡ್ಯಾಶ್ಬೋರ್ಡ್ಗಳನ್ನು ಎಂಬೆಡ್ ಮಾಡುವಾಗ, ಡೆವಲಪರ್ಗಳು ಬಳಕೆದಾರರ ಸಂವಾದಾತ್ಮಕತೆಯನ್ನು ಹೆಚ್ಚಿಸಲು ಪ್ಯಾರಾಮೀಟರ್ಗಳನ್ನು ಡೈನಾಮಿಕ್ ಮಾಡಬೇಕಾಗುತ್ತದೆ. ಅಂತಹ ನಿಯತಾಂಕಗಳನ್ನು ನಿರ್ವಹಿಸುವುದು ಒಂದು ಪ್ರಮುಖ ಸವಾಲು "ಮೊಯೆಡಾ" ಫಿಲ್ಟರ್ಗಳನ್ನು ಬಳಸುವ ಬದಲು ಡ್ರಾಪ್ಡೌನ್ ಮೆನು ಮೂಲಕ. ಪ್ಯಾರಾಮೀಟರ್ಗಳು ಹೆಚ್ಚು ಸಂಕೀರ್ಣವಾಗಿವೆ ಏಕೆಂದರೆ ಅವುಗಳಿಗೆ ಅನುಮತಿಸುವ ಮೌಲ್ಯಗಳನ್ನು ಹಿಂಪಡೆಯಲು API ಕರೆಗಳು ಬೇಕಾಗುತ್ತವೆ ಮತ್ತು ಕಾರ್ಯಗಳ ಮೂಲಕ ಅಪ್ಡೇಟ್ ಮಾಡಬೇಕಾಗುತ್ತದೆ ಬದಲಾವಣೆ ಪ್ಯಾರಾಮೀಟರ್ ಮೌಲ್ಯ ಅಸಿಂಕ್(). ಈ ವಿಧಾನವು ಬಳಕೆದಾರರಿಗೆ ಪುಟವನ್ನು ರಿಫ್ರೆಶ್ ಮಾಡದೆಯೇ ಡ್ಯಾಶ್ಬೋರ್ಡ್ನಲ್ಲಿ ನಿರ್ದಿಷ್ಟ ಡೇಟಾ ವೀಕ್ಷಣೆಗಳ ಮೇಲೆ ಹೆಚ್ಚಿನ ನಿಯಂತ್ರಣವನ್ನು ನೀಡುತ್ತದೆ.
ಟೇಬಲ್ ಡ್ಯಾಶ್ಬೋರ್ಡ್ಗಳಲ್ಲಿನ ನಿಯತಾಂಕಗಳನ್ನು ನಿರ್ವಹಿಸುವುದು ಅವುಗಳನ್ನು ಸರಿಯಾಗಿ ಗುರುತಿಸುವುದನ್ನು ಒಳಗೊಂಡಿರುತ್ತದೆ getParametersAsync(). ಸಾಮಾನ್ಯ ಅಪಾಯವೆಂದರೆ ಕೆಲವು ನಿಯತಾಂಕಗಳು ಲಭ್ಯವಿಲ್ಲದಿರಬಹುದು ಅಥವಾ ವರ್ಕ್ಬುಕ್ ಕಾನ್ಫಿಗರೇಶನ್ಗೆ ಅನುಗುಣವಾಗಿ ವಿಭಿನ್ನ ಪ್ರವೇಶ ಹಂತಗಳು ಬೇಕಾಗಬಹುದು. ಆದ್ದರಿಂದ, ಪ್ಯಾರಾಮೀಟರ್ ಕಂಡುಬರದಿದ್ದರೆ ಡ್ರಾಪ್ಡೌನ್ ಲಾಜಿಕ್ ಅನ್ನು ಮುರಿಯುವುದನ್ನು ತಡೆಯಲು ದೋಷ ನಿರ್ವಹಣೆಯನ್ನು ಸೇರಿಸುವುದು ಮುಖ್ಯವಾಗಿದೆ. ಪರಿಗಣಿಸಬೇಕಾದ ಇನ್ನೊಂದು ಅಂಶವೆಂದರೆ ಡ್ಯಾಶ್ಬೋರ್ಡ್ ಸಂಪೂರ್ಣವಾಗಿ ಲೋಡ್ ಆದ ನಂತರ ಮಾತ್ರ ಡ್ರಾಪ್ಡೌನ್ ಅನ್ನು ರೆಂಡರ್ ಮಾಡುವುದು. ಅನ್ನು ಬಳಸುವುದು ಮೊದಲ ಸಂವಾದಾತ್ಮಕ ಗ್ರಾಹಕೀಕರಣಗಳನ್ನು ಅನ್ವಯಿಸುವ ಮೊದಲು ಡ್ಯಾಶ್ಬೋರ್ಡ್ ಅಂಶಗಳು ಸಿದ್ಧವಾಗಿವೆ ಎಂದು ಈವೆಂಟ್ ಖಚಿತಪಡಿಸುತ್ತದೆ.
ಕಾರ್ಯಕ್ಷಮತೆಯ ಆಪ್ಟಿಮೈಸೇಶನ್ ಕೂಡ ನಿರ್ಣಾಯಕವಾಗಿದೆ, ವಿಶೇಷವಾಗಿ ದೊಡ್ಡ ಡೇಟಾಸೆಟ್ಗಳು ಅಥವಾ ಬಹು ನಿಯತಾಂಕಗಳೊಂದಿಗೆ ಡ್ಯಾಶ್ಬೋರ್ಡ್ಗಳೊಂದಿಗೆ ವ್ಯವಹರಿಸುವಾಗ. ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಕಾರ್ಯಗಳು ಹಾಗೆ ಹುಡುಕಿ() ಪ್ಯಾರಾಮೀಟರ್ ಹುಡುಕಾಟವನ್ನು ಕಡಿಮೆ ಮಾಡಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ, ಆದರೆ ಭವಿಷ್ಯದ ಸ್ಕೇಲೆಬಿಲಿಟಿಯನ್ನು ಅನುಮತಿಸಲು ಕೋಡ್ ಮಾಡ್ಯುಲರ್ ಆಗಿ ಉಳಿಯಬೇಕು. ಬಳಕೆದಾರ ಇಂಟರ್ಫೇಸ್ ಮತ್ತು ಡ್ಯಾಶ್ಬೋರ್ಡ್ ಡೇಟಾದ ನಡುವಿನ ಅಸಂಗತತೆಯನ್ನು ತಪ್ಪಿಸಲು ಡೆವಲಪರ್ಗಳು ಪ್ಯಾರಾಮೀಟರ್ ಮೌಲ್ಯಗಳನ್ನು ನವೀಕರಿಸುವ ಮೊದಲು ಮೌಲ್ಯೀಕರಿಸಬೇಕು. ಈ ಕಾರ್ಯತಂತ್ರಗಳೊಂದಿಗೆ, ಟೇಬಲ್ ಪ್ಯಾರಾಮೀಟರ್ಗಳನ್ನು ಸಮರ್ಥವಾಗಿ ನಿರ್ವಹಿಸುವುದು ಮತ್ತು ತಡೆರಹಿತ ಬಳಕೆದಾರ ಅನುಭವದೊಂದಿಗೆ ಡ್ಯಾಶ್ಬೋರ್ಡ್ಗಳನ್ನು ನಿರ್ಮಿಸುವುದು ಸುಲಭವಾಗುತ್ತದೆ.
Tableau API ನಲ್ಲಿ ಪ್ಯಾರಾಮೀಟರ್ಗಳನ್ನು ಬಳಸುವ ಬಗ್ಗೆ ಪದೇ ಪದೇ ಕೇಳಲಾಗುವ ಪ್ರಶ್ನೆಗಳು
- ಕೋಷ್ಟಕದಲ್ಲಿ ಪ್ಯಾರಾಮೀಟರ್ ಮತ್ತು ಫಿಲ್ಟರ್ ನಡುವಿನ ವ್ಯತ್ಯಾಸವೇನು?
- ನಿಯತಾಂಕಗಳು ಬಳಕೆದಾರರಿಗೆ ನಿರ್ದಿಷ್ಟ ಮೌಲ್ಯಗಳನ್ನು ಡ್ಯಾಶ್ಬೋರ್ಡ್ಗೆ ರವಾನಿಸಲು ಅನುಮತಿಸುತ್ತದೆ, ಆದರೆ ಫಿಲ್ಟರ್ಗಳು ಮಾನದಂಡಗಳ ಆಧಾರದ ಮೇಲೆ ತೋರಿಸಲಾದ ಡೇಟಾವನ್ನು ಮಿತಿಗೊಳಿಸುತ್ತವೆ. ಡೇಟಾಸೆಟ್ಗಳಲ್ಲಿ ಫಿಲ್ಟರ್ಗಳು ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತವೆ, ಆದರೆ ನಿಯತಾಂಕಗಳು ನಿರ್ದಿಷ್ಟ ಕ್ಷೇತ್ರಗಳು ಅಥವಾ ಲೆಕ್ಕಾಚಾರಗಳ ಮೇಲೆ ಪರಿಣಾಮ ಬೀರುತ್ತವೆ.
- ಪ್ಯಾರಾಮೀಟರ್ಗಳನ್ನು ಪಡೆಯುವಾಗ ನನ್ನ ಡ್ರಾಪ್ಡೌನ್ ಏಕೆ ಖಾಲಿಯಾಗಿರುತ್ತದೆ?
- ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ getParametersAsync() ಕಾರ್ಯವು ಪ್ಯಾರಾಮೀಟರ್ ಅನ್ನು ಯಶಸ್ವಿಯಾಗಿ ಹಿಂಪಡೆಯುತ್ತದೆ. ಅದು ಇಲ್ಲದಿದ್ದರೆ, ವರ್ಕ್ಬುಕ್ ನಿರ್ಬಂಧಗಳ ಕಾರಣದಿಂದಾಗಿ ಪ್ಯಾರಾಮೀಟರ್ ಅನ್ನು ಮರೆಮಾಡಬಹುದು ಅಥವಾ ಪ್ರವೇಶಿಸಲಾಗುವುದಿಲ್ಲ.
- ಡ್ರಾಪ್ಡೌನ್ ಪ್ಯಾರಾಮೀಟರ್ನ ಪ್ರಸ್ತುತ ಸ್ಥಿತಿಗೆ ಹೊಂದಿಕೆಯಾಗುತ್ತದೆ ಎಂದು ನಾನು ಹೇಗೆ ಖಚಿತಪಡಿಸಿಕೊಳ್ಳುವುದು?
- ಬಳಸಿ currentValue.value ಡ್ರಾಪ್ಡೌನ್ನಲ್ಲಿ ಡೀಫಾಲ್ಟ್ ಆಯ್ಕೆಯನ್ನು ಹೊಂದಿಸಲು ಆಸ್ತಿ. ಇದು UI ಮತ್ತು ಡ್ಯಾಶ್ಬೋರ್ಡ್ ಅನ್ನು ಜೋಡಿಸುತ್ತದೆ.
- ಕೋಷ್ಟಕದಲ್ಲಿ ನಿಯತಾಂಕಗಳನ್ನು ನವೀಕರಿಸುವಾಗ ದೋಷಗಳನ್ನು ನಾನು ಹೇಗೆ ನಿಭಾಯಿಸಬಹುದು?
- ಸುತ್ತು changeParameterValueAsync() ಒಳಗೆ ಕರೆ a try-catch ನಿಯತಾಂಕವನ್ನು ನವೀಕರಿಸಿದಾಗ ಸಂಭವಿಸುವ ಯಾವುದೇ ದೋಷಗಳನ್ನು ನಿರ್ವಹಿಸಲು ನಿರ್ಬಂಧಿಸಿ.
- ಗ್ರಾಹಕೀಕರಣದ ಮೊದಲು ಡ್ಯಾಶ್ಬೋರ್ಡ್ ಸಿದ್ಧವಾಗಿದೆ ಎಂದು ಯಾವ ಈವೆಂಟ್ ಖಚಿತಪಡಿಸುತ್ತದೆ?
- ದಿ FirstInteractive Tableau API ನಲ್ಲಿನ ಈವೆಂಟ್ ಡ್ಯಾಶ್ಬೋರ್ಡ್ ಸಂಪೂರ್ಣವಾಗಿ ಲೋಡ್ ಆಗಿದೆ ಮತ್ತು ಡ್ರಾಪ್ಡೌನ್ ಸೇರಿಸುವಂತಹ ಹೆಚ್ಚಿನ ಸಂವಾದಗಳಿಗೆ ಸಿದ್ಧವಾಗಿದೆ ಎಂದು ಸಂಕೇತಿಸುತ್ತದೆ.
ಇಂಟರಾಕ್ಟಿವ್ ಪ್ಯಾರಾಮೀಟರ್ ಹ್ಯಾಂಡ್ಲಿಂಗ್ನಲ್ಲಿ ಅಂತಿಮ ಆಲೋಚನೆಗಳು
ಪ್ಯಾರಾಮೀಟರ್ ಡ್ರಾಪ್ಡೌನ್ಗಳೊಂದಿಗೆ ಸಂವಾದಾತ್ಮಕ ಡ್ಯಾಶ್ಬೋರ್ಡ್ಗಳನ್ನು ಎಂಬೆಡ್ ಮಾಡುವುದು ಬಳಕೆದಾರರಿಗೆ ಹೆಚ್ಚಿನ ನಮ್ಯತೆಯನ್ನು ನೀಡುತ್ತದೆ. ಸರಿಯಾದ ಸೆಟಪ್ನೊಂದಿಗೆ, ಡೆವಲಪರ್ಗಳು ಪ್ಯಾರಾಮೀಟರ್ಗಳನ್ನು ತರಬಹುದು ಮೊಯೆದ ಮತ್ತು ಡ್ಯಾಶ್ಬೋರ್ಡ್ ನಿಯಂತ್ರಣವನ್ನು ಹೆಚ್ಚಿಸಲು Tableau API ಅನ್ನು ಬಳಸಿ. ಈ ಸೆಟಪ್ ಬಳಕೆದಾರರಿಗೆ ಡೇಟಾವನ್ನು ಹೆಚ್ಚು ಪರಿಣಾಮಕಾರಿಯಾಗಿ ಅನ್ವೇಷಿಸಲು ಅನುಮತಿಸುತ್ತದೆ.
ಪ್ರಮುಖ ಅಂಶಗಳು, ಉದಾಹರಣೆಗೆ ಮೊದಲ ಸಂವಾದಾತ್ಮಕ ಈವೆಂಟ್ ಮತ್ತು ದೃಢವಾದ ದೋಷ ನಿರ್ವಹಣೆ, ಡ್ರಾಪ್ಡೌನ್ ಮೆನುಗಳು ಅಪ್ಲಿಕೇಶನ್ನಲ್ಲಿ ಸರಾಗವಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತವೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ. ಈ ವಿಧಾನವನ್ನು ಅನುಸರಿಸುವ ಮೂಲಕ, ಡೆವಲಪರ್ಗಳು ಪ್ಯಾರಾಮೀಟರ್ಗಳನ್ನು ಸಮರ್ಥವಾಗಿ ನಿರ್ವಹಿಸಬಹುದು ಮತ್ತು ಅಂತಿಮ ಬಳಕೆದಾರರಿಗೆ ಕ್ರಿಯಾತ್ಮಕ ಮತ್ತು ಸ್ಪಂದಿಸುವ ಡ್ಯಾಶ್ಬೋರ್ಡ್ ಅನುಭವವನ್ನು ನೀಡಬಹುದು.
ಟೇಬಲ್ ಪ್ಯಾರಾಮೀಟರ್ಗಳನ್ನು ಅಳವಡಿಸಲು ಮೂಲಗಳು ಮತ್ತು ಉಲ್ಲೇಖಗಳು
- ಡ್ಯಾಶ್ಬೋರ್ಡ್ಗಳನ್ನು ಎಂಬೆಡ್ ಮಾಡುವ ವಿವರಗಳು ಮತ್ತು ಪ್ಯಾರಾಮೀಟರ್ಗಳೊಂದಿಗೆ ಸಂವಹನ ನಡೆಸುವುದನ್ನು ಅಧಿಕೃತರಿಂದ ಉಲ್ಲೇಖಿಸಲಾಗಿದೆ ಕೋಷ್ಟಕ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ API ಡಾಕ್ಯುಮೆಂಟೇಶನ್ .
- ಈವೆಂಟ್ ಕೇಳುಗರಿಗೆ ಒಳನೋಟಗಳು, ಉದಾಹರಣೆಗೆ ಮೊದಲ ಸಂವಾದಾತ್ಮಕ, ನಲ್ಲಿ ಕಂಡುಬರುವ ಉದಾಹರಣೆಗಳಿಂದ ಪಡೆಯಲಾಗಿದೆ ಕೋಷ್ಟಕ ಸಮುದಾಯ ವೇದಿಕೆ .
- JavaScript ನಲ್ಲಿ ಡೈನಾಮಿಕ್ UI ಅಂಶಗಳೊಂದಿಗೆ ಕೆಲಸ ಮಾಡಲು ಸಾಮಾನ್ಯ ಪರಿಕಲ್ಪನೆಗಳು ಮತ್ತು ಉತ್ತಮ ಅಭ್ಯಾಸಗಳನ್ನು ತೆಗೆದುಕೊಳ್ಳಲಾಗಿದೆ MDN ವೆಬ್ ಡಾಕ್ಸ್ .