Δημιουργία AJAX master-detail interface με custom SQL Queries σε σελίδα του dotNETNuke με τη χρήση του ListX Module
Προειδοποίηση: Το άρθρο αυτό προϋποθέτει ότι γνωρίζετε την ύπαρξη και το βασικό χειρισμό του ListX module από την Bi4ce και οτι γνωρίζετε ορισμένα βασικά πράγματα σε σχέση με το DotNetNuke (όπως π.χ. το πώς να εγκαταστήσετε modules). Για να εφαρμόσετε τα όσα αναφέρονται στο άρθρο θα πρέπει να έχετε εγκατεστημένο το ListX module στο DotNetNuke portal σας.
(Το πρωτότυπο άρθρο δημοσιεύτηκε από εμένα στα Αγγλικά, εδώ: http://dnnuke.blogspot.com/2007/09/using-listx-component-to-create.html. Το παρόν αποτελεί προσαρμογή στα Ελληνικά, με σχεδόν το ίδιο περιεχομένο).
Για όσους δεν το γνωρίζουν, το ListX σας επιτρέπει να "τραβάτε" και να παρουσιάζετε δεδομένα από τη βάση του dotNEtNuke, ή από κάποια τρίτη εξωτερική βάση δεδομένων και να τα παρουσιάζετε εντός του dotNetNuke, και υποστηρίζει εκτενώς AJAX.
Με την πρώτη ματιά, ο τίτλος της δημοσίευσης μπορεί σας φαίνεται περίπλοκος. Αυτό όμως που θέλω να σας δείξω είναι η λειτουργικότητα του ListX με τη βοήθεια της οποίας όχι μόνο μπορείτε να κάνετε queries σε κάποια database και να δείξετε αποτελεσματα σε grid-style ή repeater-style, αλλά ακόμα και να έχετε detail σελίδες. Ουσιαστικά, θα επιχειρήσουμε να φτιάξουμε ένα master-detail interface τραβώντας δεδομένα από κάποιο πίνακα και χρησιμοποιώντας για αυτό το σκοπό το ListX.
Πρώτα από όλα, θα χρειαστούμε κάποιον πίνακα από τον οποίο θα πρέπει να αντλήσουμε δεδομένα. Για λόγους απλότητας, θα χρησιμοποιήσουμε έναν υπάρχοντα πίνακα του DotNetNuke, ο οποίος περιέχει δεδομένα ακόμα και στην default εγκατάσταση: Τον πίνακα Tabs. Ο πίνακας αυτός περιέχει πληροφορίες για τις σελίδες του DNN (όπως τον τίτλο, το id της σελίδας κλπ). Στην default εγκατάσταση, ο πίνακας περιέχει στοιχεία για όλες τις σελίδες του Admin και του Host καθώς και για την default (home) σελίδα μας. Φυσικά, μπορείτε να χρησιμοποιήσετε κάποιο δικό σας πίνακα για τον ίδιο σκοπό, μέσα στην βάση του DNN ή σε εξωτερική βάση δεδομένων.
Ας δούμε τα δύο SQL queries που θα χρησιμοποιήσουμε για να εμφανίσουμε τα master και detail κομμάτια του interface μας:
Query 1: Το query που θα χρησιμοποιήσουμε για να δείξουμε τις εγγραφές του πίνακα Tabs συγκεντρωτικά (master)
SELECT tabid AS pageid, tabname FROM tabs ORDER BY tabname DESC
Query 2: Το query που θα χρησιμοποιήσουμε για το detail μέρος.
SELECT tabname, title, isvisible, iconfile, tabpath FROM tabs WHERE tabid = @pageid
Αν σας μπερδεύει το @pageid, να σας πω οτι θα δείτε παρακάτω, όταν θα χρησιμοποιήσουμε το query στο ListX module, οτι αυτό θα αντιπροσωπεύει μια παράμετρο η οποία θα αντικατασταθεί στο runtime με το tab id της σελίδας των οποίων τα details θέλουμε να δούμε, ουσιαστικά δηλαδή με το primary key της εγγραφής της οποίας θα δείξουμε τα details.
Επίσης να σημειώσουμε οτι στο Query 1 χρησιμοποιούμε το alias "pageid" για τη στήλη "tabid". Αυτό το κάνουμε γιατί το "tabid" αποτελεί ήδη παράμετρο του querystring στο dotnetnuke και, λόγω του τρόπου με τον οποίο τα διάφορα ListX modules επικοινωνούν μεταξύ τους (χρησιμοποιώντας το querystring, αν δεν πιάσατε το υποννοούμενο), δεν θέλουμε να μπερδευτεί η δική μας παράμετρος με το querystring που χρησιμοποιείται από το DNN.
Ας βάλουμε λοιπόν το πρώτο μας ListX module instance (το "master" κομμάτι του master-detail interface). Προσθέστε ένα ListX instance σε όποια σελίδα θέλετε (αν δεν ξέρετε πώς να το κάνετε αυτό, μην συνεχίσετε να διαβάζετε!).
- Κάντε κλικ στο "View Options" του drop-down μενού του νέου σας module για να μεταφερθείτε στη σελίδα ρυθμίσεων.
- Κάντε κλικ στο εικονίδιο "Query" για να εμφανίσετε την αντίστοιχη ενοτητα και προσθέστε το query no.1:
- Κάντε κλικ στο "Save and Continue".
- Κάντε κλικ στο εικονίδιο "Format" (μπορείτε να ΄ξανακάνετε κλικ στο εικονίδιο "Query" για να κρύψετε την προηγούμενη ενότητα, αν θέλετε).
Το επόμενο βήμα μας είναι ο ορισμός του template βάσει του οποίου θα παρουσιάζονται τα δεδομένα μας. Κάντε κλικ στο εικονίδιο με το μολύβι δίπλα στο "List Item Detail" για να επεξεργαστείτε το list item detail template και να ορίσετε ένα πολύ απλό template όπως το παρακάτω:
Προσέξτε οτι το template αυτό, στην αρχική του μορφή, δεν περιέχει κάποιο ουσιώδες link για να επικοινωνήσουμε με το "detail" τμήμα του interface μας (το οποίο δεν έχουμε ούτως η άλλως φτιάξει ακόμα). Θα προσθέσουμε τον σχετικό κώδικα αργότερα. .
- Κάντε κλικ στο
"Save and Continue".
- Κάντε κλικ στο εικονίδιο
"Format" ξανά για να κρύψετε, αν θέλετε, αυτή την ενότητα.
Τελειώνοντας την προετοιμασία του πρώτου μας module, θα τσεκάρουμε την επιλογή
"Show all records" στην ενότητα General της σελίδας View Options για να μπορέσουμε να δούμε όλες τις εγγραφές, όπως παρακάτω:
- Κάντε κλικ στο
"Save Configuration" για να επιστρέψετε στη σελίδα σας.
Να πώς θα φαίνονται τα αποτελέσματα του "master" module:
Εχουμε λοιπόν μια λίστα που προέρχεται από ένα query που κάναμε στον πίνακα tabs, η οποία περιέχει links που (ακομα) δεν οδηγούν πουθενά. Ας ξεκινήσουμε την ετοιμασία του δεύτερου (detail) ListX module και θα επανέλθουμε αργότερα στο πρώτο. Προσθέστε άλλο ένα ListX instance στη σελίδα σας, κάτω από το πρώτο.
Για να μην γίνει τεράστιο αυτό το άρθρο, από εδώ και κάτω δεν θα δίνω οδηγίες για το πώς μπορείτε να μεταβείτε στις διάφορες ενότητες της σελίδας View Options του ListX module. Απλα φροντίστε να κάνετε κλικ στο "Save and Continue" κάθε φορά που ολοκληρώνετε μια ομάδα ρυθμίσεων έτσι ωστε να μην χάσετε κατα λάθος τις ρυθμίσεις σας.
Στο δεύτερο ListX instance μας (το "detail"), πρέπει επίσης να ορίσουμε ένα query για να αντλούμε δεδομένα από τον πίνακα tabs. Θα χρησιμοποιήσουμε το Query no.2:
και θα ορίσουμε επίσης ένα απλό template παρουσίασης στην ενότητα Format:
Μην ξεχάσετε να τσεκάρετε την επιλογή "Show all records" στην ενότητα General της σελίδας View Options.
Αυτό που κάναμε στο δεύτερο module μας θα μας παρουσιάσει τα details μιας εγγραφής που θα επιλέξουμε από το πρώτο μας ListX module. Για να δουλέψει όμως αυτό, πρέπει να κανουμε άλλη μια ρύθμιση στο "detail" listX module μας: Να ορίσουμε την παράμετρο @pageid. Αυτή θα προέρχεται από το QueryString (είναι ο τρόπος με τον οποίο δουλεύει το ListX σε αυτή την περίπτωση), έτσι πρέπει να ορίσουμε κάτι όπως το παρακάτω στην ενότητα Variables της σελίδας View Options στο δεύτερο ListX module μας:
Αν θυμάστε τι είπα για τις παραμέτρους του querystring νωρίτερα, ίσως τώρα κατανοείτε καλύτερα γιατί χρησιμοποιούμε το όνομα pageid αντί του tabidf. Αν χρησιμοποιείτε URLs θα δείτε την παράμετρο κάπως έτσι: /tabid/xxx οπου xxx είναι το id της σελίδας σας ενώ αν δεν χρησιμοποιείτε friendly URLs θα δείτε την παράμετρο να εμφανίζεται κάπως έτσι: /default.aspx?tabid=xxx. Οπως και να έχει, εφόσον αυτή η παράμετρος χρησιμοποιείται για ΚΑΘΕ σελίδα στην οποία μεταβαίνουμε εντός του DNN, πρέπει να ΜΗΝ χρησιμοποιήσουμε αυτό το όνομα για την querystring parameter μέσω της οποίας θα επικοινωνούν τα δύο ListX modules μας. (Ελπίζω να μην σας μπέρδεψα χειρότερα).
- Κάντε κλικ στο "Save Configuration" όταν τελειώσετε με όλες τις ρυθμίσεις για να επιστρέψετε στη σελίδα σας. .
Αυτό που κάναμε ήταν οτι ορίσαμε μια μεταβλητή η οποία θα περιέχεται στο querystring με το όνομα "pageid". Η τιμή της μεταβλητής αυτής θα δοθεί στην παράμετρο @pageid (του δεύτερου query μας) ωστε το WHERE του να φέρει μόνο μια εγγραφή (αυτή με το συγκεκριμένο id).
Περιμένετε όμως. Δεν πρέπει να κάνουμε το πρώτο μας (master) module να επικοινωνεί με κάποιο τρόπο με το δεύτερο (detail) module μας και να "περνάει" αυτή τη μεταβλητή;
Φυσικά. Εφόσον έχουμε μια μοναδική τιμή id για κάθε εγγραφή, είναι η ώρα να τη χρησιιμοποιήσουμε. Μετατρέπουμε το template του ΠΡΩΤΟΥ μας (master) module ως εξής:
Η
lxFetch function είναι μια JavaScript function του ListX η οποία, με λίγα λόγια, κάνει refresh ένα module (με AJAX) περνώντας του όσα name/value pairs χρειάζονται, στο querystring.
Η πρώτη παράμετρος είναι το module ID του module που θέλουμε να φορτώσουμε (fetch). Το module id μπορείτε να το βρείτε με διάφορους τρόπους (ο πιό εύκολος είναι να κοιτάξετε την τιμή της παραμέτρου mid στο querystring, όταν βρίσκεστε στα settings του συγκεκριμένου module - στο listX μπορείτε να χρησιμοποιήσετε και τη λειτουργία debug για να το δειτε). Στην περίπτωσή μας, το id του "detail" module είναι το 375.
Η δεύτερη παράμετρος δεν ειναι και τόσο σημαντική για τους σκοπούς αυτού του άρθρου - στο documentation του listX μπορείτε να βρείτε περισσότερα. Δινουμε την default τιμή 0.
Η τρίτη παράμετρος είναι τα name/value pairs που θέλουμε να περάσουμε στο module που κάνουμε refresh. (Το "detail" listX module στην περίπτωσή μας). Το[pageid] θα αντικατασταθεί με την τιμή του πεδίου tabid της συγκεκριμένης κάθε φορά εγγραφής, και έτσι θα έχουμε μια διαφορετική τιμή για κάθε μας εγγραφή. Η τιμή αυτή θα περάσει στο δεύτερο ListX module μας (detail) ως μεταβλητή του querystring (αν και, λόγω του AJAX, η ίδια η σελίδα μας δεν θα ξαναφορτωθεί, οπότε μην περιμένετε να δείτε την μεταβλητή αυτή στο query string που σας δείχνει ο browser σας) και θα χρησιμοποιηθεί στο detail query μας.
Το αποτέλεσμα είναι ένα master/detail interface στο οποίο τα περιεχόμενα του "detail" module αλλάζουν ανάλογα με τις επιλογές μας στο "master" module ΧΩΡΙΣ να ξαναφορτώνεται η σελίδα. Φυσικά, το layout μας εδώ είναι "παιδικό" και σίγουρα μπορείτε να κάνετε καλύτερη δουλειά από εμένα! :)
Κάπως έτσι θα φαίνεται το τελικό μας αποτέλεσμα:
Κάνοντας κλικ σε οποιδήποτε link του πρώτου listX module, τα περιεχόμενα του δεύτερου ListX module αλλάζουν χωρίς να ξαναφορτώνεται η σελίδα.
Υπάρχουν φυσικα και άλλα ζητήματα, όπως π.χ. το τι μπορείτε να δειχνετε την πρώτη φορά που φορτώνεται η σελίδα (και που δεν έχετε επιλέξει κάτι από το πρώτο listX module), όμως είναι εκτός scope για αυτό το άρθρο. Είναι πάντως εύκολο να εμφανίσετε κάποιο μήνυμα ή ακόμα και να έχετε αρχικά κρυμμένο το δεύτερο module.
Happy ListX'ing!