Βήμα 4: Εμφάνιση της νέας ιδιότητας στο συστατικό στοιχείο

Στο τέλος αυτής της ενότητας, θα μπορείτε να εισαγάγετε μια τιμή για μια νέα ιδιότητα στον πίνακα "Ρυθμίσεις" και να δείτε την αλλαγή προσαρμοσμένου συστατικού στοιχείου να αντικατοπτρίζει τη νέα τιμή. Οι ενημερώσεις στην ιδιότητα θα αποθηκεύονται επίσης αυτόματα μαζί με τη σελίδα.

Στο αρχείο render.js , πρέπει να ενημερώσετε δύο αντικείμενα JavaScript στο συστατικό στοιχείο:

  • SampleComponentViewModel

  • sampleComponentTemplate

Επεξεργαστείτε το render.js και ενημερώστε το συστατικό στοιχείο SampleComponentViewModel για να συμπεριλάβει τη νέα ιδιότητα. Αλλάξτε αυτήν την ιδιότητα:

self.showStoryLayout = ko.observable();

Χρησιμοποιήστε αυτήν στη θέση της:

self.showStoryLayout = ko.observable();
self.imageBannerText = ko.observable();

Ενημερώστε το SampleComponentViewModel για να ληφθούν οι αλλαγές στις τιμές. Αλλάξτε αυτήν την ιδιότητα:

self.imageWidth(customData && customData.width);

Χρησιμοποιήστε αυτήν στη θέση της:

self.imageWidth(customData && customData.width);
self.imageBannerText(customData && customData.imageBannerText);

Αλλάξτε το sampleComponentTemplate για να εμφανιστεί η νέα ιδιότητα. Αλλάξτε αυτήν την ιδιότητα:

'<div data-bind="text: \'image width is: \' + imageWidth()"></div>' +

Χρησιμοποιήστε αυτήν στη θέση της:

'<div data-bind="text: imageBannerText"></div>' +

Συγχρονίστε ή αποστείλετε το συστατικό στοιχείο στον Oracle Content Management server.

Έχετε πλέον τροποποιήσει το συστατικό στοιχείο, ώστε να εμφανίζει τη νέα ιδιότητα. Σε αντίθεση με τον πίνακα "Ρυθμίσεις" που εμπεριέχεται σε ένα ενσωματωμένο πλαίσιο στη σελίδα, το συστατικό στοιχείο εισάγεται απευθείας στη σελίδα, και έτσι όταν αυξάνεται σε μέγεθος αυτόματα αυξάνεται και η διαθέσιμη περιοχή του.

Έλεγχος αποτελεσμάτων για το βήμα 4

Για να δείτε τη νέα ιδιότητα να εμφανίζεται:

  1. Ανανεώστε τη σελίδα σας στην τοποθεσία σας, ώστε το Εργαλείο δημιουργίας τοποθεσιών να μπορεί να επιλέξει τις αλλαγές στο συστατικό στοιχείο.

  2. Αλλάξτε τη σελίδα στην κατάσταση επεξεργασίας.

  3. Μεταφέρετε και αποθέστε το συστατικό στοιχείο σας στη σελίδα.

  4. Ανοίξτε τον πίνακα "Ρυθμίσεις" για το συστατικό στοιχείο σας.

  5. Κάντε κλικ στο κουμπί Προσαρμοσμένες ρυθμίσεις.

  6. Αλλάξτε το Μπάνερ εικόνας σε Χώρο εργασίας.

    Θα δείτε την ενημέρωση συστατικού στοιχείου στη σελίδα του Χώρου εργασίας να εμφανίζεται πάνω από την εικόνα.

Συνεχίστε στην ενότητα Βήμα 5: Εγγραφή εναυσμάτων.