Πώς να ανοίξετε συνδέσμους σε ένα αναδυόμενο παράθυρο στο PnP Modern Search WebPart (SFx)

Βελτίωση της εμπειρίας χρήστη με προσαρμοσμένους αναδυόμενους συνδέσμους στο SPFx

Στη σύγχρονη ανάπτυξη του SharePoint, η χρήση του PnP Modern Search WebPart (SPFx) για την παροχή διαμορφώσιμων αποτελεσμάτων αναζήτησης μπορεί να βελτιώσει σημαντικά την εμπειρία του χρήστη. Ο έλεγχος του τρόπου ανοίγματος των συνδέσμων είναι μια δημοφιλής δυνατότητα μεταξύ των προγραμματιστών, ειδικά με τη διάταξη "Λεπτομερής λίστα". Κανονικά, οι σύνδεσμοι ανοίγουν σε μια νέα καρτέλα, αλλά τι γίνεται αν θέλουμε να τους ανοίξουμε σε ένα αναδυόμενο παράθυρο;

Σε αυτήν την ανάρτηση, θα δούμε πώς να εφαρμόσετε αυτήν τη λειτουργία αλλάζοντας τη συμπεριφορά συνδέσμου του PnP Modern Search WebPart. Αντί να ανοίγουμε τα αποτελέσματα αναζήτησης σε μια νέα καρτέλα, θα δείξουμε πώς να εξαναγκάσουμε το άνοιγμα του συνδέσμου σε ένα προσαρμοσμένο αναδυόμενο παράθυρο, με αποτέλεσμα μια πιο ολοκληρωμένη εμπειρία χρήστη.

Η πρόκληση προκύπτει όταν χρησιμοποιείτε έναν τύπο όπως "", ο οποίος ορίζεται από προεπιλογή σε μια νέα καρτέλα. Ωστόσο, χρησιμοποιώντας JavaScript, μπορούμε να παρακάμψουμε αυτήν τη συμπεριφορά και να ανοίξουμε τη σύνδεση σε ένα ελεγχόμενο αναδυόμενο παράθυρο. Αυτό επιτρέπει μεγαλύτερη ευελιξία στην εμφάνιση περιεχομένου στην ίδια περίοδο περιήγησης.

Θα σας καθοδηγήσουμε στα βήματα που απαιτούνται για την ανάπτυξη αυτής της δυνατότητας, με έμφαση στη χρήση JavaScript και SPFx για τη βελτίωση της διάταξης της λεπτομερούς λίστας. Μείνετε συντονισμένοι καθώς προχωράμε στη λύση για να διασφαλίσουμε ότι η τοποθεσία σας στο SharePoint είναι απρόσκοπτη και φιλική προς το χρήστη.

Εντολή	Παράδειγμα χρήσης
window.open()	Αυτή η εντολή θα ανοίξει ένα νέο παράθυρο ή καρτέλα προγράμματος περιήγησης. Αυτή η μέθοδος ανοίγει ένα αναδυόμενο παράθυρο με ορισμένες διαστάσεις και ιδιότητες, όπως πλάτος, ύψος και γραμμές κύλισης.
event.preventDefault()	Αποτρέπει την προεπιλεγμένη συμπεριφορά ενός συνδέσμου στον οποίο γίνεται κλικ, δηλαδή το άνοιγμα της διεύθυνσης URL στην ίδια ή νέα καρτέλα. Αυτό μας επιτρέπει να προσαρμόσουμε τον τρόπο λειτουργίας του συνδέσμου, όπως το άνοιγμα ενός αναδυόμενου παραθύρου.
querySelectorAll()	Το χαρακτηριστικό data-popup επιλέγει όλα τα στοιχεία αγκύρωσης (). Αυτή η μέθοδος επιστρέφει ένα NodeList, το οποίο μας επιτρέπει να εφαρμόζουμε προγράμματα ακρόασης συμβάντων σε πολλά στοιχεία ταυτόχρονα.
forEach()	Κάθε καταχώρηση στο NodeList που παράγεται από το querySelectorAll() λαμβάνει μια ενέργεια (για παράδειγμα, επισύναψη ενός προγράμματος ακρόασης συμβάντων). Αυτό ισχύει για τη διαχείριση πολλών στοιχείων δυναμικού συνδέσμου στη σύγχρονη αναζήτηση PnP.
addEventListener()	Αυτή η τεχνική προσθέτει ένα πρόγραμμα ακρόασης συμβάντων κλικ σε κάθε σύνδεσμο που ενεργοποιεί τη συνάρτηση openInPopup(). Είναι απαραίτητο για την παράκαμψη της προεπιλεγμένης συμπεριφοράς κλικ.
import { override }	Αυτός ο διακοσμητής αποτελεί μέρος του SharePoint Framework (SPFx) και χρησιμοποιείται για την παράκαμψη της προεπιλεγμένης συμπεριφοράς του SPFx WebParts. Επιτρέπει συγκεκριμένες προσαρμογές, όπως η εισαγωγή JavaScript για την παροχή αναδυόμενων λειτουργιών.
@override	Στο SPFx, ένας διακοσμητής υποδεικνύει ότι μια μέθοδος ή μια ιδιότητα υπερισχύει της λειτουργικότητας. Αυτό είναι απαραίτητο κατά την τροποποίηση της συμπεριφοράς των στοιχείων του SharePoint.
spyOn()	Παρακολουθεί τις κλήσεις λειτουργίας κατά τη διάρκεια της δοκιμής μονάδας με το Jasmine. Σε αυτό το σενάριο, χρησιμοποιείται με το window.open() για να εγγυηθεί ότι το αναδυόμενο παράθυρο εκκινείται σωστά κατά τη διάρκεια της δοκιμής.
expect()	Αυτή η εντολή χρησιμοποιείται για τη δοκιμή μονάδας στο Jasmine. Ελέγχει ότι η window.open() κλήθηκε με τα σωστά ορίσματα, διασφαλίζοντας ότι το αναδυόμενο παράθυρο εμφανίζεται με τις επιθυμητές ρυθμίσεις.

Κατανόηση της λύσης αναδυόμενου παραθύρου στο SPFx

Τα σενάρια που αναφέρονται παραπάνω προσαρμόζουν την προεπιλεγμένη συμπεριφορά των συνδέσμων μέσα σε ένα PnP Modern Search WebPart (SPFx). Από προεπιλογή, οι σύνδεσμοι χρησιμοποιούν το ετικέτα για άνοιγμα σε νέα καρτέλα. Ωστόσο, ο σκοπός εδώ είναι να ανοίξετε αυτούς τους συνδέσμους σε ένα αναδυόμενο παράθυρο, αυξάνοντας έτσι την αλληλεπίδραση των χρηστών. Για να το πετύχουμε αυτό χρησιμοποιήσαμε το λειτουργία, η οποία επιτρέπει στους προγραμματιστές να ανοίγουν διευθύνσεις URL σε ένα νέο παράθυρο ή αναδυόμενο παράθυρο προγράμματος περιήγησης. Αυτή η λειτουργία μπορεί να ρυθμιστεί με συγκεκριμένες παραμέτρους, όπως πλάτος, ύψος και άλλα χαρακτηριστικά (όπως γραμμές κύλισης ή δυνατότητα αλλαγής μεγέθους), για να διασφαλιστεί ότι το αναδυόμενο παράθυρο λειτουργεί όπως προβλέπεται.

Η παράκαμψη της προεπιλεγμένης συμπεριφοράς κλικ των ετικετών αγκύρωσης είναι ένα ζωτικό στοιχείο της προσέγγισης. Αυτό γίνεται με , που εμποδίζει το άνοιγμα του συνδέσμου σε νέα καρτέλα. Αντίθετα, επισυνάπτουμε ένα πρόγραμμα ακρόασης συμβάντων στον σύνδεσμο, το οποίο ενεργοποιεί μια προσαρμοσμένη λειτουργία (σε αυτήν την περίπτωση, ) που χειρίζεται το συμβάν κλικ και ανοίγει τη διεύθυνση URL σε ένα αναδυόμενο παράθυρο. Αυτό επιτρέπει στους προγραμματιστές περισσότερο έλεγχο της συμπεριφοράς του συνδέσμου και έχει ως αποτέλεσμα μια πιο συνεπή εμπειρία χρήστη στο PnP Modern Search WebPart.

Εκτός από την αντιμετώπιση της συμπεριφοράς στο μπροστινό μέρος, εξετάσαμε επίσης μια προσέγγιση backend χρησιμοποιώντας ενσωματωμένους διακοσμητές του SPFx, όπως . Αυτή η προσέγγιση επιτρέπει στους προγραμματιστές να εισάγουν απευθείας JavaScript σε προσαρμοσμένα WebParts, τροποποιώντας περαιτέρω τη συμπεριφορά των αποτελεσμάτων αναζήτησης. Η παράκαμψη της διαδικασίας απόδοσης στο SPFx μας επιτρέπει να εισάγουμε κώδικα JavaScript που χειρίζεται τα κλικ σε συνδέσμους και ανοίγει το απαραίτητο υλικό σε ένα αναδυόμενο παράθυρο. Αυτή η τεχνική κάνει τη λύση πιο αρθρωτή και επαναχρησιμοποιήσιμη σε πολλαπλές περιοχές ενός περιβάλλοντος SharePoint, βελτιώνοντας έτσι τη συντήρηση.

Η δοκιμή μονάδας είναι κρίσιμης σημασίας για τη διασφάλιση ότι η δυνατότητα αναδυόμενου παραθύρου λειτουργεί σωστά σε πολλά περιβάλλοντα και προγράμματα περιήγησης. Χρησιμοποιώντας σε ένα πλαίσιο δοκιμής Jasmine επικυρώνει ότι το η μέθοδος εκτελείται με τα σωστά ορίσματα. Αυτή η μορφή δοκιμής εντοπίζει πιθανά ζητήματα νωρίς στη διαδικασία ανάπτυξης και εγγυάται ότι τα αναδυόμενα παράθυρα λειτουργούν όπως έχει προγραμματιστεί. Αυτή η λύση ενισχύει τις αλληλεπιδράσεις των χρηστών στο PnP Modern Search WebPart του SharePoint ενσωματώνοντας τη διαχείριση συμβάντων στο front-end, την προσαρμογή του backend και τη δοκιμή μονάδας.

<script>
function openInPopup(url) {
   // Define popup window features
   const features = 'width=800,height=600,resizable=yes,scrollbars=yes';
   // Open URL in popup
   window.open(url, '_blank', features);
}
// Override link behavior
document.querySelectorAll('a[data-popup="true"]').forEach(function (link) {
   link.addEventListener('click', function (event) {
      event.preventDefault(); // Prevent default link behavior
      openInPopup(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>

<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.

import { override } from '@microsoft/decorators';
import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';
export default class PopupWebPart extends BaseClientSideWebPart {
   @override
   public 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));
   });
});

Εξερεύνηση του χειρισμού συμβάντων και της δυναμικής ένεσης JavaScript στο SPFx

Όταν εργάζεστε με το PnP Modern Search WebPart (SPFx), ένα χρήσιμο χαρακτηριστικό για τους προγραμματιστές είναι η δυνατότητα δυναμικής προσαρμογής του τρόπου συμπεριφοράς των στοιχείων, όπως οι σύνδεσμοι. Η χρήση του χειρισμού συμβάντων JavaScript παρέχει μια πληθώρα επιλογών για την εξατομίκευση των αλληλεπιδράσεων των χρηστών. Η χρήση των ακροατών συμβάντων για τη λήψη και τον έλεγχο των κλικ συνδέσμων δημιουργεί μια πιο διαδραστική εμπειρία. Καταγράφοντας συμβάντα κλικ, ενδέχεται να παρακάμψουμε την κανονική συμπεριφορά και να ανοίξουμε διευθύνσεις URL σε ένα ελεγχόμενο αναδυόμενο παράθυρο. Αυτό εξασφαλίζει μια ομαλή μετάβαση χωρίς να ενοχλεί την τρέχουσα καρτέλα ή το παράθυρο του χρήστη.

Η προσαρμογή συνδέσμων στο SPFx WebParts απαιτεί επίσης τη δυναμική εισαγωγή κώδικα JavaScript. Το SharePoint Framework (SPFx) παρέχει μεθόδους όπως και για την επίτευξη αυτού. Με την εισαγωγή προσαρμοσμένης JavaScript, οι προγραμματιστές μπορούν να αλλάξουν τη συμπεριφορά των στοιχείων των αποτελεσμάτων αναζήτησης χωρίς να χρειάζεται να κάνουν σημαντικές τροποποιήσεις στο ίδιο το WebPart. Αυτή η ευελιξία καθιστά εύκολη την πραγματοποίηση καθολικών προσαρμογών σε όλους τους συνδέσμους αποτελεσμάτων αναζήτησης, διασφαλίζοντας ότι η επιθυμητή συμπεριφορά —όπως το άνοιγμα σε ένα αναδυόμενο παράθυρο— είναι ομοιόμορφη σε όλη την πλατφόρμα.

Τέλος, η απόδοση και η εμπειρία χρήστη είναι κρίσιμοι παράγοντες σε οποιοδήποτε σύστημα που βασίζεται στο web, και το ίδιο ισχύει και εδώ. Με τη βελτιστοποίηση της χρήσης JavaScript και τον περιορισμό των δραστηριοτήτων έντασης πόρων, μπορούμε να διαβεβαιώσουμε ότι αυτές οι προσαρμογές δεν έχουν σημαντική επίδραση στους χρόνους φόρτωσης ή την ανταπόκριση της σελίδας. Η αποτελεσματική χρήση JavaScript, σε συνδυασμό με τις τροποποιήσεις του backend SPFx, παρέχει υψηλό επίπεδο ευελιξίας χωρίς να θυσιάζει την απόδοση, με αποτέλεσμα μια απρόσκοπτη εμπειρία χρήστη σε όλη την πλατφόρμα του SharePoint.

1. Πώς μπορώ να ανοίξω έναν σύνδεσμο σε ένα αναδυόμενο παράθυρο με JavaScript;
2. Μπορείτε να χρησιμοποιήσετε το λειτουργία σε JavaScript. Αυτή η λειτουργία σάς επιτρέπει να ανοίξετε ένα νέο παράθυρο ή αναδυόμενο παράθυρο του προγράμματος περιήγησης με συγκεκριμένες ιδιότητες, όπως το μέγεθος και τις γραμμές κύλισης.
3. Τι κάνει κάνω;
4. Ο μέθοδος εμποδίζει ένα συμβάν να κάνει την προεπιλεγμένη του ενέργεια. Σε αυτήν την περίπτωση, αποτρέπει το άνοιγμα του συνδέσμου σε μια νέα καρτέλα, ενώ επιτρέπει συγκεκριμένες ενέργειες, όπως η εμφάνιση ενός αναδυόμενου παραθύρου.
5. Πώς μπορώ να εφαρμόσω προσαρμοσμένη συμπεριφορά σε πολλούς συνδέσμους στο SPFx;
6. Χρησιμοποιώντας στο JavaScript, μπορείτε να επιλέξετε πολλά στοιχεία και να επισυνάψετε προγράμματα ακρόασης συμβάντων σε αυτά, διασφαλίζοντας ότι όλα θα ακολουθήσουν την ίδια συμπεριφορά.
7. Πώς μπορώ να παρακάμψω την προεπιλεγμένη απόδοση του SPFx WebParts;
8. Για να προσαρμόσετε τη συμπεριφορά του SPFx WebParts, χρησιμοποιήστε το διακοσμητής. Αυτό σας δίνει τη δυνατότητα να εισάγετε προσαρμοσμένη JavaScript απευθείας στη διαδικασία απόδοσης του WebPart.
9. Ποια είναι η καλύτερη τεχνική για να προσδιορίσετε εάν ένα αναδυόμενο παράθυρο ανοίγει σωστά;
10. Χρησιμοποιώντας δοκιμές μονάδας σε ένα πλαίσιο όπως το Jasmine, μπορείτε να χρησιμοποιήσετε να παρακολουθεί εάν το η συνάρτηση καλείται κατάλληλα με τις αναμενόμενες παραμέτρους.

Ο τρόπος με τον οποίο ανοίγουν οι σύνδεσμοι σε ένα αναδυόμενο παράθυρο μπορεί να προσαρμοστεί χρησιμοποιώντας JavaScript στο PnP Modern Search WebPart (SPFx). Αυτή η αλλαγή βελτιώνει την αλληλεπίδραση των χρηστών, διατηρώντας τους αφοσιωμένους στην τρέχουσα καρτέλα, ενώ παρέχει πρόσβαση σε λεπτομερές περιεχόμενο σε ένα ελεγχόμενο αναδυόμενο παράθυρο.

Για να διατηρήσετε συνεπή συμπεριφορά, χρησιμοποιήστε τεχνικές όπως και εισάγετε δυναμικά JavaScript στα SPFx WebParts. Επιπλέον, η δοκιμή μονάδας βοηθά να διασφαλιστεί ότι αυτές οι αλλαγές λειτουργούν καλά σε πολλά περιβάλλοντα, με αποτέλεσμα μια αξιόπιστη, φιλική προς το χρήστη λύση για την προσαρμογή των αποτελεσμάτων αναζήτησης του SharePoint.