SPFx ನಲ್ಲಿ ಕಸ್ಟಮ್ ಪಾಪ್ಅಪ್ ಲಿಂಕ್‌ಗಳೊಂದಿಗೆ ಬಳಕೆದಾರರ ಅನುಭವವನ್ನು ಹೆಚ್ಚಿಸುವುದು
ಆಧುನಿಕ ಶೇರ್ಪಾಯಿಂಟ್ ಅಭಿವೃದ್ಧಿಯಲ್ಲಿ, ಕಾನ್ಫಿಗರ್ ಮಾಡಬಹುದಾದ ಹುಡುಕಾಟ ಫಲಿತಾಂಶಗಳನ್ನು ಒದಗಿಸಲು PnP ಮಾಡರ್ನ್ ಸರ್ಚ್ ವೆಬ್‌ಪಾರ್ಟ್ (SPFx) ಅನ್ನು ಬಳಸುವುದರಿಂದ ಬಳಕೆದಾರರ ಅನುಭವವನ್ನು ಗಣನೀಯವಾಗಿ ಸುಧಾರಿಸಬಹುದು. ಲಿಂಕ್‌ಗಳು ಹೇಗೆ ತೆರೆಯುತ್ತವೆ ಎಂಬುದನ್ನು ನಿಯಂತ್ರಿಸುವುದು ಡೆವಲಪರ್‌ಗಳಲ್ಲಿ ಜನಪ್ರಿಯ ವೈಶಿಷ್ಟ್ಯವಾಗಿದೆ, ವಿಶೇಷವಾಗಿ "ವಿವರವಾದ ಪಟ್ಟಿ" ವಿನ್ಯಾಸದೊಂದಿಗೆ. ಸಾಮಾನ್ಯವಾಗಿ, ಲಿಂಕ್‌ಗಳು ಹೊಸ ಟ್ಯಾಬ್‌ನಲ್ಲಿ ತೆರೆದುಕೊಳ್ಳುತ್ತವೆ, ಆದರೆ ನಾವು ಅವುಗಳನ್ನು ಪಾಪ್ಅಪ್ ವಿಂಡೋದಲ್ಲಿ ತೆರೆಯಲು ಬಯಸಿದರೆ ಏನು ಮಾಡಬೇಕು?
ಈ ಪೋಸ್ಟ್‌ನಲ್ಲಿ, PnP ಮಾಡರ್ನ್ ಸರ್ಚ್ ವೆಬ್‌ಪಾರ್ಟ್‌ನ ಲಿಂಕ್ ನಡವಳಿಕೆಯನ್ನು ಬದಲಾಯಿಸುವ ಮೂಲಕ ಈ ಕಾರ್ಯವನ್ನು ಹೇಗೆ ಕಾರ್ಯಗತಗೊಳಿಸುವುದು ಎಂದು ನಾವು ನೋಡುತ್ತೇವೆ. ಹೊಸ ಟ್ಯಾಬ್‌ನಲ್ಲಿ ಹುಡುಕಾಟ ಫಲಿತಾಂಶಗಳನ್ನು ತೆರೆಯುವ ಬದಲು, ಕಸ್ಟಮೈಸ್ ಮಾಡಿದ ಪಾಪ್ಅಪ್ ವಿಂಡೋದಲ್ಲಿ ಲಿಂಕ್ ತೆರೆಯಲು ಹೇಗೆ ಒತ್ತಾಯಿಸಬೇಕು ಎಂಬುದನ್ನು ನಾವು ತೋರಿಸುತ್ತೇವೆ, ಇದರಿಂದಾಗಿ ಹೆಚ್ಚು ಸಮಗ್ರ ಬಳಕೆದಾರ ಅನುಭವವಾಗುತ್ತದೆ.
ವಿವರವಾದ ಪಟ್ಟಿ ವಿನ್ಯಾಸವನ್ನು ಸುಧಾರಿಸಲು JavaScript ಮತ್ತು SPFx ಅನ್ನು ಬಳಸುವುದರ ಮೇಲೆ ಕೇಂದ್ರೀಕರಿಸುವ ಮೂಲಕ ಈ ವೈಶಿಷ್ಟ್ಯವನ್ನು ಅಭಿವೃದ್ಧಿಪಡಿಸಲು ಅಗತ್ಯವಿರುವ ಹಂತಗಳ ಮೂಲಕ ನಾವು ನಿಮಗೆ ತಿಳಿಸುತ್ತೇವೆ. ನಿಮ್ಮ ಶೇರ್ಪಾಯಿಂಟ್ ಸೈಟ್ ತಡೆರಹಿತ ಮತ್ತು ಬಳಕೆದಾರ ಸ್ನೇಹಿಯಾಗಿದೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ನಾವು ಪರಿಹಾರದ ಮೂಲಕ ನಡೆಯುವಾಗ ಟ್ಯೂನ್ ಮಾಡಿ.
| ಆಜ್ಞೆ | ಬಳಕೆಯ ಉದಾಹರಣೆ |
|---|---|
| window.open() | ಈ ಆಜ್ಞೆಯು ಹೊಸ ಬ್ರೌಸರ್ ವಿಂಡೋ ಅಥವಾ ಟ್ಯಾಬ್ ಅನ್ನು ತೆರೆಯುತ್ತದೆ. ಈ ವಿಧಾನವು ಅಗಲ, ಎತ್ತರ ಮತ್ತು ಸ್ಕ್ರಾಲ್‌ಬಾರ್‌ಗಳಂತಹ ಕೆಲವು ಆಯಾಮಗಳು ಮತ್ತು ಗುಣಲಕ್ಷಣಗಳೊಂದಿಗೆ ಪಾಪ್ಅಪ್ ವಿಂಡೋವನ್ನು ತೆರೆಯುತ್ತದೆ. |
| event.preventDefault() | ಕ್ಲಿಕ್ ಮಾಡಿದ ಲಿಂಕ್‌ನ ಡೀಫಾಲ್ಟ್ ನಡವಳಿಕೆಯನ್ನು ತಡೆಯುತ್ತದೆ, ಅದೇ ಅಥವಾ ಹೊಸ ಟ್ಯಾಬ್‌ನಲ್ಲಿ URL ಅನ್ನು ತೆರೆಯುವುದು. ಬದಲಿಗೆ ಪಾಪ್ಅಪ್ ತೆರೆಯುವಂತಹ ಲಿಂಕ್ ಹೇಗೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ ಎಂಬುದನ್ನು ಕಸ್ಟಮೈಸ್ ಮಾಡಲು ಇದು ನಮಗೆ ಅನುಮತಿಸುತ್ತದೆ. |
| querySelectorAll() | ಡೇಟಾ-ಪಾಪ್ಅಪ್ ಗುಣಲಕ್ಷಣವು ಎಲ್ಲಾ ಆಂಕರ್ ಅಂಶಗಳನ್ನು ಆಯ್ಕೆ ಮಾಡುತ್ತದೆ () ಈ ವಿಧಾನವು ನೋಡ್‌ಲಿಸ್ಟ್ ಅನ್ನು ಹಿಂತಿರುಗಿಸುತ್ತದೆ, ಇದು ಈವೆಂಟ್ ಕೇಳುಗರನ್ನು ಏಕಕಾಲದಲ್ಲಿ ಹಲವಾರು ಘಟಕಗಳಿಗೆ ಅನ್ವಯಿಸಲು ನಮಗೆ ಅನುಮತಿಸುತ್ತದೆ. |
| forEach() | querySelectorAll() ನಿಂದ ನಿರ್ಮಿಸಲಾದ ನೋಡ್‌ಲಿಸ್ಟ್‌ನಲ್ಲಿನ ಪ್ರತಿ ನಮೂದು ಒಂದು ಕ್ರಿಯೆಯನ್ನು ಪಡೆಯುತ್ತದೆ (ಉದಾಹರಣೆಗೆ, ಈವೆಂಟ್ ಕೇಳುಗರನ್ನು ಲಗತ್ತಿಸುವುದು). PnP ಮಾಡರ್ನ್ ಹುಡುಕಾಟದಲ್ಲಿ ಅನೇಕ ಡೈನಾಮಿಕ್ ಲಿಂಕ್ ಅಂಶಗಳನ್ನು ನಿರ್ವಹಿಸಲು ಇದು ಅನ್ವಯಿಸುತ್ತದೆ. |
| addEventListener() | ಈ ತಂತ್ರವು openInPopup() ಕಾರ್ಯವನ್ನು ಪ್ರಚೋದಿಸುವ ಪ್ರತಿಯೊಂದು ಲಿಂಕ್‌ಗೆ ಕ್ಲಿಕ್ ಈವೆಂಟ್ ಕೇಳುವವರನ್ನು ಸೇರಿಸುತ್ತದೆ. ಡೀಫಾಲ್ಟ್ ಕ್ಲಿಕ್ ನಡವಳಿಕೆಯನ್ನು ಅತಿಕ್ರಮಿಸಲು ಇದು ಅವಶ್ಯಕವಾಗಿದೆ. |
| import { override } | ಈ ಡೆಕೋರೇಟರ್ ಶೇರ್ಪಾಯಿಂಟ್ ಫ್ರೇಮ್‌ವರ್ಕ್ (SPFx) ನ ಭಾಗವಾಗಿದೆ ಮತ್ತು SPFx ವೆಬ್‌ಪಾರ್ಟ್‌ಗಳ ಡೀಫಾಲ್ಟ್ ನಡವಳಿಕೆಯನ್ನು ಅತಿಕ್ರಮಿಸಲು ಬಳಸಲಾಗುತ್ತದೆ. ಪಾಪ್ಅಪ್ ಕಾರ್ಯವನ್ನು ಒದಗಿಸಲು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅನ್ನು ಇಂಜೆಕ್ಟ್ ಮಾಡುವಂತಹ ನಿರ್ದಿಷ್ಟ ಗ್ರಾಹಕೀಕರಣಗಳನ್ನು ಇದು ಸಕ್ರಿಯಗೊಳಿಸುತ್ತದೆ. |
| @override | SPFx ನಲ್ಲಿ, ಒಂದು ವಿಧಾನ ಅಥವಾ ಆಸ್ತಿಯು ಕಾರ್ಯವನ್ನು ಅತಿಕ್ರಮಿಸುತ್ತದೆ ಎಂದು ಡೆಕೋರೇಟರ್ ಸೂಚಿಸುತ್ತದೆ. ಶೇರ್ಪಾಯಿಂಟ್ ಘಟಕಗಳ ನಡವಳಿಕೆಯನ್ನು ಮಾರ್ಪಡಿಸುವಾಗ ಇದು ಅವಶ್ಯಕವಾಗಿದೆ. |
| spyOn() | ಜಾಸ್ಮಿನ್‌ನೊಂದಿಗೆ ಘಟಕ ಪರೀಕ್ಷೆಯ ಸಮಯದಲ್ಲಿ ಕಾರ್ಯದ ಕರೆಗಳನ್ನು ಮೇಲ್ವಿಚಾರಣೆ ಮಾಡುತ್ತದೆ. ಈ ಸನ್ನಿವೇಶದಲ್ಲಿ, ಪರೀಕ್ಷೆಯ ಸಮಯದಲ್ಲಿ ಪಾಪ್ಅಪ್ ಅನ್ನು ಸೂಕ್ತವಾಗಿ ಪ್ರಾರಂಭಿಸಲಾಗಿದೆ ಎಂದು ಖಾತರಿಪಡಿಸಲು window.open() ನೊಂದಿಗೆ ಇದನ್ನು ಬಳಸಲಾಗುತ್ತದೆ. |
| expect() | ಈ ಆಜ್ಞೆಯನ್ನು ಜಾಸ್ಮಿನ್‌ನಲ್ಲಿ ಘಟಕ ಪರೀಕ್ಷೆಗೆ ಬಳಸಲಾಗುತ್ತದೆ. ಇದು window.open() ಅನ್ನು ಸರಿಯಾದ ಆರ್ಗ್ಯುಮೆಂಟ್‌ಗಳೊಂದಿಗೆ ಕರೆಯಲಾಗಿದೆಯೇ ಎಂದು ಪರಿಶೀಲಿಸುತ್ತದೆ, ಅಪೇಕ್ಷಿತ ಸೆಟ್ಟಿಂಗ್‌ಗಳೊಂದಿಗೆ ಪಾಪ್ಅಪ್ ಕಾಣಿಸಿಕೊಳ್ಳುತ್ತದೆ ಎಂದು ಖಾತರಿಪಡಿಸುತ್ತದೆ. |
SPFx ನಲ್ಲಿ ಪಾಪ್ಅಪ್ ವಿಂಡೋ ಪರಿಹಾರವನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು
ಮೇಲೆ ಪಟ್ಟಿ ಮಾಡಲಾದ ಸ್ಕ್ರಿಪ್ಟ್‌ಗಳು PnP ಮಾಡರ್ನ್ ಸರ್ಚ್ ವೆಬ್‌ಪಾರ್ಟ್‌ನಲ್ಲಿ (SPFx) ಲಿಂಕ್‌ಗಳ ಡೀಫಾಲ್ಟ್ ನಡವಳಿಕೆಯನ್ನು ಸರಿಹೊಂದಿಸುತ್ತದೆ. ಪೂರ್ವನಿಯೋಜಿತವಾಗಿ, ಲಿಂಕ್‌ಗಳು ಇದನ್ನು ಬಳಸುತ್ತವೆ ಗುರಿ="_ಖಾಲಿ" ಹೊಸ ಟ್ಯಾಬ್‌ನಲ್ಲಿ ತೆರೆಯಲು ಟ್ಯಾಗ್. ಆದಾಗ್ಯೂ, ಈ ಲಿಂಕ್‌ಗಳನ್ನು ಪಾಪ್ಅಪ್ ವಿಂಡೋದಲ್ಲಿ ತೆರೆಯುವುದು, ಆ ಮೂಲಕ ಬಳಕೆದಾರರ ಸಂವಹನವನ್ನು ಹೆಚ್ಚಿಸುವುದು ಇಲ್ಲಿನ ಉದ್ದೇಶವಾಗಿದೆ. ಇದನ್ನು ಸಾಧಿಸಲು, ನಾವು ಬಳಸಿದ್ದೇವೆ window.open() ಕಾರ್ಯ, ಇದು ಡೆವಲಪರ್‌ಗಳಿಗೆ ಹೊಸ ಬ್ರೌಸರ್ ವಿಂಡೋ ಅಥವಾ ಪಾಪ್‌ಅಪ್‌ನಲ್ಲಿ URL ಗಳನ್ನು ತೆರೆಯಲು ಅನುಮತಿಸುತ್ತದೆ. ಪಾಪ್ಅಪ್ ಉದ್ದೇಶಿಸಿದಂತೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ ಎಂಬುದನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು, ಅಗಲ, ಎತ್ತರ ಮತ್ತು ಇತರ ಗುಣಲಕ್ಷಣಗಳಂತಹ (ಸ್ಕ್ರೋಲ್‌ಬಾರ್‌ಗಳು ಅಥವಾ ಮರುಗಾತ್ರಗೊಳಿಸುವಿಕೆಯಂತಹ) ನಿರ್ದಿಷ್ಟ ನಿಯತಾಂಕಗಳೊಂದಿಗೆ ಈ ಕಾರ್ಯವನ್ನು ಸರಿಹೊಂದಿಸಬಹುದು.
ಆಂಕರ್ ಟ್ಯಾಗ್‌ಗಳ ಡೀಫಾಲ್ಟ್ ಕ್ಲಿಕ್ ನಡವಳಿಕೆಯನ್ನು ಅತಿಕ್ರಮಿಸುವುದು ವಿಧಾನದ ಪ್ರಮುಖ ಅಂಶವಾಗಿದೆ. ಇದರೊಂದಿಗೆ ಮಾಡಲಾಗುತ್ತದೆ event.preventDefault(), ಇದು ಹೊಸ ಟ್ಯಾಬ್‌ನಲ್ಲಿ ಲಿಂಕ್ ತೆರೆಯುವುದನ್ನು ತಡೆಯುತ್ತದೆ. ಬದಲಾಗಿ, ನಾವು ಈವೆಂಟ್ ಕೇಳುಗರನ್ನು ಲಿಂಕ್‌ಗೆ ಲಗತ್ತಿಸುತ್ತೇವೆ, ಅದು ಕಸ್ಟಮ್ ಕಾರ್ಯವನ್ನು ಸಕ್ರಿಯಗೊಳಿಸುತ್ತದೆ (ಈ ಸಂದರ್ಭದಲ್ಲಿ, openInPopup()) ಕ್ಲಿಕ್ ಈವೆಂಟ್ ಅನ್ನು ನಿರ್ವಹಿಸುತ್ತದೆ ಮತ್ತು ಪಾಪ್ಅಪ್ ವಿಂಡೋದಲ್ಲಿ URL ಅನ್ನು ತೆರೆಯುತ್ತದೆ. ಇದು ಡೆವಲಪರ್‌ಗಳಿಗೆ ಲಿಂಕ್‌ನ ನಡವಳಿಕೆಯ ಮೇಲೆ ಹೆಚ್ಚಿನ ನಿಯಂತ್ರಣವನ್ನು ಅನುಮತಿಸುತ್ತದೆ ಮತ್ತು PnP ಮಾಡರ್ನ್ ಹುಡುಕಾಟ ವೆಬ್‌ಪಾರ್ಟ್‌ನಲ್ಲಿ ಹೆಚ್ಚು ಸ್ಥಿರವಾದ ಬಳಕೆದಾರ ಅನುಭವವನ್ನು ನೀಡುತ್ತದೆ.
ಮುಂಭಾಗದ ನಡವಳಿಕೆಯೊಂದಿಗೆ ವ್ಯವಹರಿಸುವುದರ ಜೊತೆಗೆ, ನಾವು SPFx ನ ಅಂತರ್ನಿರ್ಮಿತ ಅಲಂಕಾರಕಾರರನ್ನು ಬಳಸಿಕೊಂಡು ಬ್ಯಾಕೆಂಡ್ ವಿಧಾನವನ್ನು ಸಹ ಪರಿಶೀಲಿಸಿದ್ದೇವೆ @ಅತಿಕ್ರಮಣ. ಈ ವಿಧಾನವು ಡೆವಲಪರ್‌ಗಳಿಗೆ ನೇರವಾಗಿ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅನ್ನು ಕಸ್ಟಮ್ ವೆಬ್‌ಪಾರ್ಟ್‌ಗಳಿಗೆ ಸೇರಿಸಲು ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ, ಹುಡುಕಾಟ ಫಲಿತಾಂಶಗಳ ನಡವಳಿಕೆಯನ್ನು ಮತ್ತಷ್ಟು ಮಾರ್ಪಡಿಸುತ್ತದೆ. SPFx ನಲ್ಲಿ ರೆಂಡರಿಂಗ್ ಪ್ರಕ್ರಿಯೆಯನ್ನು ಅತಿಕ್ರಮಿಸುವುದರಿಂದ ಲಿಂಕ್ ಕ್ಲಿಕ್‌ಗಳನ್ನು ನಿರ್ವಹಿಸುವ ಮತ್ತು ಪಾಪ್ಅಪ್ ವಿಂಡೋದಲ್ಲಿ ಅಗತ್ಯ ವಸ್ತುಗಳನ್ನು ತೆರೆಯುವ JavaScript ಕೋಡ್ ಅನ್ನು ಇಂಜೆಕ್ಟ್ ಮಾಡಲು ನಮಗೆ ಅನುಮತಿಸುತ್ತದೆ. ಈ ತಂತ್ರವು ಶೇರ್ಪಾಯಿಂಟ್ ಪರಿಸರದ ಬಹು ಪ್ರದೇಶಗಳಲ್ಲಿ ಪರಿಹಾರವನ್ನು ಹೆಚ್ಚು ಮಾಡ್ಯುಲರ್ ಮತ್ತು ಮರುಬಳಕೆ ಮಾಡುವಂತೆ ಮಾಡುತ್ತದೆ, ಆದ್ದರಿಂದ ನಿರ್ವಹಣೆಯನ್ನು ಸುಧಾರಿಸುತ್ತದೆ.
ಪಾಪ್ಅಪ್ ವೈಶಿಷ್ಟ್ಯವು ಬಹು ಪರಿಸರಗಳು ಮತ್ತು ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿ ಸರಿಯಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ಘಟಕ ಪರೀಕ್ಷೆಯು ನಿರ್ಣಾಯಕವಾಗಿದೆ. ಬಳಸುತ್ತಿದೆ ಸ್ಪೈಆನ್() ಜಾಸ್ಮಿನ್ ಪರೀಕ್ಷಾ ಚೌಕಟ್ಟಿನಲ್ಲಿ ಮೌಲ್ಯೀಕರಿಸುತ್ತದೆ window.open() ಸರಿಯಾದ ವಾದಗಳೊಂದಿಗೆ ವಿಧಾನವನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸಲಾಗುತ್ತದೆ. ಈ ರೀತಿಯ ಪರೀಕ್ಷೆಯು ಅಭಿವೃದ್ಧಿ ಪ್ರಕ್ರಿಯೆಯ ಆರಂಭದಲ್ಲಿ ಸಂಭಾವ್ಯ ಸಮಸ್ಯೆಗಳನ್ನು ಗುರುತಿಸುತ್ತದೆ ಮತ್ತು ಪಾಪ್ಅಪ್ ವಿಂಡೋಗಳು ಯೋಜಿಸಿದಂತೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ ಎಂದು ಖಾತರಿಪಡಿಸುತ್ತದೆ. ಈ ಪರಿಹಾರವು ಶೇರ್‌ಪಾಯಿಂಟ್‌ನ PnP ಮಾಡರ್ನ್ ಸರ್ಚ್ ವೆಬ್‌ಪಾರ್ಟ್‌ನಲ್ಲಿ ಫ್ರಂಟ್-ಎಂಡ್ ಈವೆಂಟ್ ಹ್ಯಾಂಡ್ಲಿಂಗ್, ಬ್ಯಾಕೆಂಡ್ ಕಸ್ಟಮೈಸೇಶನ್ ಮತ್ತು ಯೂನಿಟ್ ಟೆಸ್ಟಿಂಗ್ ಅನ್ನು ಸಂಯೋಜಿಸುವ ಮೂಲಕ ಬಳಕೆದಾರರ ಸಂವಹನಗಳನ್ನು ಬಲಪಡಿಸುತ್ತದೆ.
ಪರಿಹಾರ 1: ಪಾಪ್ಅಪ್ ವಿಂಡೋವನ್ನು ರಚಿಸಲು JavaScript `window.open` ಅನ್ನು ಬಳಸುವುದು
ಹೊಸ ಟ್ಯಾಬ್‌ನಲ್ಲಿ ಲಿಂಕ್ ತೆರೆಯುವ ಡೀಫಾಲ್ಟ್ ನಡವಳಿಕೆಯನ್ನು ಪಾಪ್ಅಪ್ ವಿಂಡೋದೊಂದಿಗೆ ಬದಲಾಯಿಸಲು ಈ ವಿಧಾನವು JavaScript ಅನ್ನು ಬಳಸುತ್ತದೆ, ಇದು ಶೇರ್ಪಾಯಿಂಟ್ ಸನ್ನಿವೇಶದಲ್ಲಿ SPFx ನೊಂದಿಗೆ ನಿರ್ಮಿಸಲಾದ ಡೈನಾಮಿಕ್ ಫ್ರಂಟ್-ಎಂಡ್ ಪರಿಹಾರಗಳಿಗೆ ಸೂಕ್ತವಾಗಿದೆ.
<script>function openInPopup(url) {// Define popup window featuresconst features = 'width=800,height=600,resizable=yes,scrollbars=yes';// Open URL in popupwindow.open(url, '_blank', features);}// Override link behaviordocument.querySelectorAll('a[data-popup="true"]').forEach(function (link) {link.addEventListener('click', function (event) {event.preventDefault(); // Prevent default link behavioropenInPopup(this.href); // Open in popup});});</script>// HTML for the link:<a href="{{slot item @root.slots.PreviewUrl}}" data-popup="true" style="color: {{@root.theme.semanticColors.link}}">{{slot item @root.slots.Destination}}</a>
ಪರಿಹಾರ 2: ಲಿಂಕ್ ಟ್ಯಾಗ್‌ಗೆ ನೇರವಾಗಿ ಇನ್‌ಲೈನ್ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಸೇರಿಸುವುದು
ಈ ವಿಧಾನವು HTML ಲಿಂಕ್ ಟ್ಯಾಗ್‌ನಲ್ಲಿ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಇನ್‌ಲೈನ್ ಅನ್ನು ಎಂಬೆಡ್ ಮಾಡುತ್ತದೆ, ಇದು ಕೆಲವು ಬಾಹ್ಯ ಅವಲಂಬನೆಗಳನ್ನು ಹೊಂದಿರುವ ಹಗುರವಾದ ಡೈನಾಮಿಕ್ ಫ್ರಂಟ್-ಎಂಡ್ ಸಿಸ್ಟಮ್‌ಗೆ ಸೂಕ್ತವಾಗಿದೆ.
<a href="{{slot item @root.slots.PreviewUrl}}"onclick="event.preventDefault(); window.open(this.href, '_blank', 'width=800,height=600');"style="color: {{@root.theme.semanticColors.link}}">{{slot item @root.slots.Destination}}</a>// The window.open parameters define the size and behavior of the popup.
ಪರಿಹಾರ 3: JavaScript ಇಂಜೆಕ್ಷನ್‌ನೊಂದಿಗೆ SPFx ಅನ್ನು ಬಳಸುವ ಬ್ಯಾಕೆಂಡ್ ಅಪ್ರೋಚ್
ಈ ವಿಧಾನವು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅನ್ನು ಕಸ್ಟಮ್ ವೆಬ್‌ಪಾರ್ಟ್‌ಗೆ ಸೇರಿಸಲು ಶೇರ್ಪಾಯಿಂಟ್ ಫ್ರೇಮ್‌ವರ್ಕ್ (SPFx) ಅನ್ನು ಬಳಸುತ್ತದೆ, ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ವಿಧಾನಗಳನ್ನು ಬಳಸಿಕೊಂಡು ಪಾಪ್ಅಪ್ ವಿಂಡೋದಲ್ಲಿ ಲಿಂಕ್‌ಗಳನ್ನು ತೆರೆಯಲು ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ.
import { override } from '@microsoft/decorators';import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';export default class PopupWebPart extends BaseClientSideWebPart {@overridepublic render(): void {this.domElement.innerHTML = `<a href="{{slot item @root.slots.PreviewUrl}}" onclick="openPopup(this.href)">{{slot item @root.slots.Destination}}</a>`;}}function openPopup(url: string): void {window.open(url, '_blank', 'width=800,height=600,resizable=yes');}
ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಪಾಪ್ಅಪ್ ನಡವಳಿಕೆಗಾಗಿ ಘಟಕ ಪರೀಕ್ಷೆ
ಯುನಿಟ್ ಪರೀಕ್ಷೆಗಳು ಪಾಪ್ಅಪ್ ಕಾರ್ಯಚಟುವಟಿಕೆಯು ಬ್ರೌಸರ್‌ಗಳು ಮತ್ತು ಪರಿಸರದಲ್ಲಿ ಸ್ಥಿರವಾಗಿದೆ ಎಂದು ಖಾತರಿಪಡಿಸುತ್ತದೆ. ಫ್ರಂಟ್-ಎಂಡ್ ಮೌಲ್ಯೀಕರಣಕ್ಕಾಗಿ ಮೂಲ ಜಾಸ್ಮಿನ್ ಪರೀಕ್ಷೆ ಇಲ್ಲಿದೆ.
describe('Popup Functionality', function() {it('should open the link in a popup window', function() {spyOn(window, 'open');const testUrl = 'http://example.com';openInPopup(testUrl);expect(window.open).toHaveBeenCalledWith(testUrl, '_blank', jasmine.any(String));});});
SPFx ನಲ್ಲಿ ಈವೆಂಟ್ ಹ್ಯಾಂಡ್ಲಿಂಗ್ ಮತ್ತು ಡೈನಾಮಿಕ್ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಇಂಜೆಕ್ಷನ್ ಎಕ್ಸ್‌ಪ್ಲೋರಿಂಗ್
PnP ಮಾಡರ್ನ್ ಸರ್ಚ್ ವೆಬ್‌ಪಾರ್ಟ್ (SPFx) ನೊಂದಿಗೆ ಕೆಲಸ ಮಾಡುವಾಗ, ಡೆವಲಪರ್‌ಗಳಿಗೆ ಒಂದು ಉಪಯುಕ್ತ ವೈಶಿಷ್ಟ್ಯವೆಂದರೆ ಲಿಂಕ್‌ಗಳಂತಹ ಅಂಶಗಳು ಹೇಗೆ ವರ್ತಿಸುತ್ತವೆ ಎಂಬುದನ್ನು ಕ್ರಿಯಾತ್ಮಕವಾಗಿ ಹೊಂದಿಸುವ ಸಾಮರ್ಥ್ಯ. JavaScript ಈವೆಂಟ್ ನಿರ್ವಹಣೆಯ ಬಳಕೆಯು ಬಳಕೆದಾರರ ಸಂವಹನಗಳನ್ನು ವೈಯಕ್ತೀಕರಿಸಲು ಹೆಚ್ಚಿನ ಆಯ್ಕೆಗಳನ್ನು ಒದಗಿಸುತ್ತದೆ. ಲಿಂಕ್ ಕ್ಲಿಕ್‌ಗಳನ್ನು ಸೆರೆಹಿಡಿಯಲು ಮತ್ತು ನಿಯಂತ್ರಿಸಲು ಈವೆಂಟ್ ಕೇಳುಗರನ್ನು ಬಳಸುವುದು ಹೆಚ್ಚು ಸಂವಾದಾತ್ಮಕ ಅನುಭವವನ್ನು ಸೃಷ್ಟಿಸುತ್ತದೆ. ಕ್ಲಿಕ್ ಈವೆಂಟ್‌ಗಳನ್ನು ಸೆರೆಹಿಡಿಯುವ ಮೂಲಕ, ನಾವು ಸಾಮಾನ್ಯ ನಡವಳಿಕೆಯನ್ನು ಅತಿಕ್ರಮಿಸಬಹುದು ಮತ್ತು ನಿಯಂತ್ರಿತ ಪಾಪ್ಅಪ್ ವಿಂಡೋದಲ್ಲಿ URL ಗಳನ್ನು ತೆರೆಯಬಹುದು. ಇದು ಬಳಕೆದಾರರ ಪ್ರಸ್ತುತ ಟ್ಯಾಬ್ ಅಥವಾ ವಿಂಡೋಗೆ ತೊಂದರೆಯಾಗದಂತೆ ಸುಗಮ ಪರಿವರ್ತನೆಯನ್ನು ಖಚಿತಪಡಿಸುತ್ತದೆ.
SPFx ವೆಬ್‌ಪಾರ್ಟ್‌ಗಳಲ್ಲಿ ಲಿಂಕ್‌ಗಳನ್ನು ಕಸ್ಟಮೈಸ್ ಮಾಡಲು ಕ್ರಿಯಾತ್ಮಕವಾಗಿ JavaScript ಕೋಡ್ ಅನ್ನು ಸೇರಿಸುವ ಅಗತ್ಯವಿದೆ. ಶೇರ್ಪಾಯಿಂಟ್ ಫ್ರೇಮ್‌ವರ್ಕ್ (SPFx) ವಿಧಾನಗಳನ್ನು ಒದಗಿಸುತ್ತದೆ @ಅತಿಕ್ರಮಣ ಮತ್ತು ನಿರೂಪಿಸು() ಇದನ್ನು ಸಾಧಿಸುವುದಕ್ಕಾಗಿ. ಕಸ್ಟಮ್ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅನ್ನು ಸೇರಿಸುವ ಮೂಲಕ, ಡೆವಲಪರ್‌ಗಳು ವೆಬ್‌ಪಾರ್ಟ್‌ಗೆ ಗಮನಾರ್ಹ ಮಾರ್ಪಾಡುಗಳನ್ನು ಮಾಡದೆಯೇ ಹುಡುಕಾಟ ಫಲಿತಾಂಶದ ಐಟಂಗಳ ನಡವಳಿಕೆಯನ್ನು ಬದಲಾಯಿಸಬಹುದು. ಈ ನಮ್ಯತೆಯು ಎಲ್ಲಾ ಹುಡುಕಾಟ ಫಲಿತಾಂಶದ ಲಿಂಕ್‌ಗಳಿಗೆ ಜಾಗತಿಕ ಹೊಂದಾಣಿಕೆಗಳನ್ನು ಮಾಡಲು ಸುಲಭಗೊಳಿಸುತ್ತದೆ, ಪಾಪ್ಅಪ್ ವಿಂಡೋದಲ್ಲಿ ತೆರೆಯುವಂತಹ ಅಪೇಕ್ಷಿತ ನಡವಳಿಕೆಯು ಪ್ಲಾಟ್‌ಫಾರ್ಮ್‌ನಾದ್ಯಂತ ಏಕರೂಪವಾಗಿದೆ ಎಂದು ಖಚಿತಪಡಿಸುತ್ತದೆ.
ಅಂತಿಮವಾಗಿ, ಯಾವುದೇ ವೆಬ್-ಆಧಾರಿತ ವ್ಯವಸ್ಥೆಯಲ್ಲಿ ಕಾರ್ಯಕ್ಷಮತೆ ಮತ್ತು ಬಳಕೆದಾರರ ಅನುಭವವು ನಿರ್ಣಾಯಕ ಅಂಶಗಳಾಗಿವೆ ಮತ್ತು ಇಲ್ಲಿಯೂ ಅದೇ ನಿಜ. ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಬಳಕೆಯನ್ನು ಉತ್ತಮಗೊಳಿಸುವ ಮೂಲಕ ಮತ್ತು ಸಂಪನ್ಮೂಲ-ತೀವ್ರ ಚಟುವಟಿಕೆಗಳನ್ನು ಸೀಮಿತಗೊಳಿಸುವ ಮೂಲಕ, ಈ ಗ್ರಾಹಕೀಕರಣಗಳು ಪುಟದ ಲೋಡ್ ಸಮಯ ಅಥವಾ ಸ್ಪಂದಿಸುವಿಕೆಯ ಮೇಲೆ ಯಾವುದೇ ಮಹತ್ವದ ಪ್ರಭಾವ ಬೀರುವುದಿಲ್ಲ ಎಂದು ನಾವು ಭರವಸೆ ನೀಡಬಹುದು. ಸಮರ್ಥವಾದ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಬಳಕೆ, ಬ್ಯಾಕೆಂಡ್ SPFx ಮಾರ್ಪಾಡುಗಳೊಂದಿಗೆ ಸಂಯೋಜಿಸಲ್ಪಟ್ಟಿದೆ, ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ತ್ಯಾಗ ಮಾಡದೆಯೇ ಹೆಚ್ಚಿನ ಮಟ್ಟದ ನಮ್ಯತೆಯನ್ನು ಒದಗಿಸುತ್ತದೆ, ಇದರ ಪರಿಣಾಮವಾಗಿ ಶೇರ್ಪಾಯಿಂಟ್ ಪ್ಲಾಟ್‌ಫಾರ್ಮ್‌ನಾದ್ಯಂತ ತಡೆರಹಿತ ಬಳಕೆದಾರ ಅನುಭವವನ್ನು ನೀಡುತ್ತದೆ.
ಪಾಪ್‌ಅಪ್‌ಗಳಿಗಾಗಿ SPFx ಗ್ರಾಹಕೀಕರಣದ ಕುರಿತು ಸಾಮಾನ್ಯವಾಗಿ ಕೇಳಲಾಗುವ ಪ್ರಶ್ನೆಗಳು
- JavaScript ನೊಂದಿಗೆ ಪಾಪ್ಅಪ್ ವಿಂಡೋದಲ್ಲಿ ನಾನು ಲಿಂಕ್ ಅನ್ನು ಹೇಗೆ ತೆರೆಯುವುದು?
- ನೀವು ಬಳಸಬಹುದು window.open() JavaScript ನಲ್ಲಿ ಕಾರ್ಯ. ಗಾತ್ರ ಮತ್ತು ಸ್ಕ್ರಾಲ್ ಬಾರ್‌ಗಳಂತಹ ನಿರ್ದಿಷ್ಟ ಗುಣಲಕ್ಷಣಗಳೊಂದಿಗೆ ಹೊಸ ಬ್ರೌಸರ್ ವಿಂಡೋ ಅಥವಾ ಪಾಪ್ಅಪ್ ತೆರೆಯಲು ಈ ಕಾರ್ಯವು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ.
- ಏನು ಮಾಡುತ್ತದೆ event.preventDefault() ಮಾಡುವುದೇ?
- ದಿ event.preventDefault() ಈವೆಂಟ್ ಅದರ ಡೀಫಾಲ್ಟ್ ಕ್ರಿಯೆಯನ್ನು ಮಾಡುವುದನ್ನು ವಿಧಾನವು ತಡೆಯುತ್ತದೆ. ಈ ಸಂದರ್ಭದಲ್ಲಿ, ಪಾಪ್ಅಪ್ ಅನ್ನು ಪ್ರದರ್ಶಿಸುವಂತಹ ನಿರ್ದಿಷ್ಟ ಕ್ರಿಯೆಗಳನ್ನು ಅನುಮತಿಸುವಾಗ ಹೊಸ ಟ್ಯಾಬ್‌ನಲ್ಲಿ ಲಿಂಕ್ ತೆರೆಯುವುದನ್ನು ತಡೆಯುತ್ತದೆ.
- SPFx ನಲ್ಲಿನ ಹಲವಾರು ಲಿಂಕ್‌ಗಳಿಗೆ ಕಸ್ಟಮ್ ನಡವಳಿಕೆಯನ್ನು ನಾನು ಹೇಗೆ ಅನ್ವಯಿಸಬಹುದು?
- ಬಳಸುತ್ತಿದೆ querySelectorAll() ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್‌ನಲ್ಲಿ, ನೀವು ಬಹು ಘಟಕಗಳನ್ನು ಆಯ್ಕೆ ಮಾಡಬಹುದು ಮತ್ತು ಈವೆಂಟ್ ಕೇಳುಗರನ್ನು ಲಗತ್ತಿಸಬಹುದು, ಅವರೆಲ್ಲರೂ ಒಂದೇ ನಡವಳಿಕೆಯನ್ನು ಅನುಸರಿಸುತ್ತಾರೆ ಎಂದು ಖಾತರಿಪಡಿಸಬಹುದು.
- SPFx ವೆಬ್‌ಪಾರ್ಟ್‌ಗಳ ಡೀಫಾಲ್ಟ್ ರೆಂಡರಿಂಗ್ ಅನ್ನು ನಾನು ಹೇಗೆ ಅತಿಕ್ರಮಿಸುವುದು?
- SPFx ವೆಬ್‌ಪಾರ್ಟ್‌ಗಳ ನಡವಳಿಕೆಯನ್ನು ಸರಿಹೊಂದಿಸಲು, ಬಳಸಿ @override ಅಲಂಕಾರಕಾರ. ವೆಬ್‌ಪಾರ್ಟ್‌ನ ರೆಂಡರಿಂಗ್ ಪ್ರಕ್ರಿಯೆಗೆ ಕಸ್ಟಮ್ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅನ್ನು ನೇರವಾಗಿ ಸೇರಿಸಲು ಇದು ನಿಮ್ಮನ್ನು ಶಕ್ತಗೊಳಿಸುತ್ತದೆ.
- ಪಾಪ್ಅಪ್ ವಿಂಡೋ ಸರಿಯಾಗಿ ತೆರೆಯುತ್ತದೆಯೇ ಎಂದು ನಿರ್ಧರಿಸಲು ಉತ್ತಮ ತಂತ್ರ ಯಾವುದು?
- ಜಾಸ್ಮಿನ್ ನಂತಹ ಚೌಕಟ್ಟಿನಲ್ಲಿ ಘಟಕ ಪರೀಕ್ಷೆಗಳನ್ನು ಬಳಸಿ, ನೀವು ಬಳಸಬಹುದು spyOn() ವೇಳೆ ಮೇಲ್ವಿಚಾರಣೆ ಮಾಡಲು window.open() ಕಾರ್ಯವನ್ನು ನಿರೀಕ್ಷಿತ ನಿಯತಾಂಕಗಳೊಂದಿಗೆ ಸೂಕ್ತವಾಗಿ ಕರೆಯಲಾಗುತ್ತದೆ.
SPFx ನಲ್ಲಿ ಪಾಪ್ಅಪ್ ವಿಂಡೋಸ್ ಅನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸಲು ಪ್ರಮುಖ ಟೇಕ್‌ಅವೇಗಳು
PnP ಮಾಡರ್ನ್ ಸರ್ಚ್ ವೆಬ್‌ಪಾರ್ಟ್‌ನಲ್ಲಿ (SPFx) ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಬಳಸಿ ಪಾಪ್ಅಪ್ ವಿಂಡೋದಲ್ಲಿ ಲಿಂಕ್‌ಗಳನ್ನು ತೆರೆಯುವ ವಿಧಾನವನ್ನು ಕಸ್ಟಮೈಸ್ ಮಾಡಬಹುದು. ಈ ಬದಲಾವಣೆಯು ನಿಯಂತ್ರಿತ ಪಾಪ್‌ಅಪ್‌ನಲ್ಲಿ ವಿವರವಾದ ವಿಷಯಕ್ಕೆ ಪ್ರವೇಶವನ್ನು ಒದಗಿಸುವಾಗ ಪ್ರಸ್ತುತ ಟ್ಯಾಬ್‌ನಲ್ಲಿ ತೊಡಗಿಸಿಕೊಳ್ಳುವ ಮೂಲಕ ಬಳಕೆದಾರರ ಸಂವಹನವನ್ನು ಸುಧಾರಿಸುತ್ತದೆ.
ಸ್ಥಿರವಾದ ನಡವಳಿಕೆಯನ್ನು ನಿರ್ವಹಿಸಲು, ತಂತ್ರಗಳನ್ನು ಬಳಸಿ event.preventDefault() ಮತ್ತು ಕ್ರಿಯಾತ್ಮಕವಾಗಿ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅನ್ನು SPFx ವೆಬ್‌ಪಾರ್ಟ್‌ಗಳಿಗೆ ಇಂಜೆಕ್ಟ್ ಮಾಡಿ. ಇದಲ್ಲದೆ, ಯುನಿಟ್ ಪರೀಕ್ಷೆಯು ಈ ಬದಲಾವಣೆಗಳು ಅನೇಕ ಸಂದರ್ಭಗಳಲ್ಲಿ ಉತ್ತಮವಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ, ಇದರ ಪರಿಣಾಮವಾಗಿ ಶೇರ್ಪಾಯಿಂಟ್ ಹುಡುಕಾಟ ಫಲಿತಾಂಶ ಗ್ರಾಹಕೀಕರಣಕ್ಕಾಗಿ ವಿಶ್ವಾಸಾರ್ಹ, ಬಳಕೆದಾರ ಸ್ನೇಹಿ ಪರಿಹಾರವಾಗಿದೆ.
ಉಲ್ಲೇಖಗಳು ಮತ್ತು ಸಂಪನ್ಮೂಲಗಳು
- PnP ಮಾಡರ್ನ್ ಸರ್ಚ್ ವೆಬ್‌ಪಾರ್ಟ್ (SPFx) ಮತ್ತು ಕಸ್ಟಮೈಸ್ ಮಾಡುವ ಲಿಂಕ್ ನಡವಳಿಕೆಗೆ ಸಂಬಂಧಿಸಿದ ಮಾಹಿತಿಯನ್ನು ಅಧಿಕೃತ ದಾಖಲೆಗಳಿಂದ ಪಡೆಯಲಾಗಿದೆ. ಹೆಚ್ಚಿನ ವಿವರಗಳಿಗಾಗಿ, ಭೇಟಿ ನೀಡಿ PnP ಮಾಡರ್ನ್ ಸರ್ಚ್ GitHub ರೆಪೊಸಿಟರಿ .
- ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ವಿಧಾನಗಳನ್ನು ಬಳಸುವ ಕುರಿತು ಮಾರ್ಗದರ್ಶನ window.open() ಮತ್ತು ಈವೆಂಟ್ ಕೇಳುಗರನ್ನು ನಿಂದ ಉಲ್ಲೇಖಿಸಲಾಗಿದೆ MDN ವೆಬ್ ಡಾಕ್ಸ್ JavaScript ಗಾಗಿ.
- ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಇಂಜೆಕ್ಷನ್ ಮತ್ತು ಸೇರಿದಂತೆ ಶೇರ್ಪಾಯಿಂಟ್ ಫ್ರೇಮ್‌ವರ್ಕ್ (SPFx) ಕಸ್ಟಮೈಸೇಶನ್‌ಗಳ ಬಗ್ಗೆ ವಿವರಗಳು @ಅತಿಕ್ರಮಣ, ನಲ್ಲಿ ಕಾಣಬಹುದು ಶೇರ್ಪಾಯಿಂಟ್ ಫ್ರೇಮ್‌ವರ್ಕ್ ಅವಲೋಕನ .