μορφοποίηση αντικειμένου επιτρέπει στους χρήστες να τροποποιούν γρήγορα και εύκολα τη μορφή των απεικονίσεων επιλέγοντας απευθείας τα στοιχεία που θέλουν να τροποποιήσουν. Όταν επιλέγεται ένα στοιχείο, το τμήμα παραθύρου μορφοποίησης μεταβαίνει αυτόματα και αναπτύσσει τη συγκεκριμένη ρύθμιση μορφοποίησης για το επιλεγμένο στοιχείο.
Για περισσότερες πληροφορίες σχετικά με τη μορφοποίηση αντικειμένων, ανατρέξτε στο θέμα μορφοποίησης αντικειμένων on στο Power BI Desktop.
Για να προσθέσετε αυτές τις λειτουργίες στην απεικόνισή σας, κάθε απεικόνιση πρέπει να παρέχει μια επιλογή στυλ δευτερεύουσας επιλογής και συντόμευση για κάθε περιοχή με δυνατότητα δευτερεύουσας επιλογής.
Σημείωση
Οι απεικονίσεις που υποστηρίζουν μορφοποίηση στο αντικείμενο πρέπει να υλοποιήσουν το getFormattingModel API το οποίο είναι διαθέσιμο από την έκδοση API 5.1.
Εάν χρησιμοποιείτε το powerbi-visuals-utils-formattingmodel, χρησιμοποιήστε την έκδοση 6.0.0 τουλάχιστον.
Δημιουργία εμπειρίας on-object
Χρησιμοποιήστε την υπηρεσία δευτερεύουσας επιλογής όταν ο χρήστης επιλέγει ένα στοιχείο με δυνατότητα δευτερεύουσας επιλογής για να στείλει στο Power BI την υποεπιλογή. Εισαγάγετε τα στυλ και τις συντομεύσεις της δευτερεύουσας επιλογής χρησιμοποιώντας το API δευτερεύουσας επιλογής . Η βοηθητικής υποεπιτροπής μπορεί να χρησιμοποιηθεί για την απλοποίηση της διαδικασίας.
Λειτουργία μορφοποίησης
Η λειτουργία μορφοποίησης είναι μια νέα λειτουργία όπου ο χρήστης μπορεί να ενεργοποιήσει και να απενεργοποιήσει τη μορφοποίηση onObject όταν βρίσκεται σε λειτουργία σύνταξης. Η απεικόνιση ενημερώνεται με την κατάσταση της λειτουργίας μορφοποίησης στις επιλογές ενημέρωσης. Οι επιλογές ενημέρωσης περιλαμβάνουν επίσης την τρέχουσα υποεπιλεγμένη δευτερεύουσαεπιλογή ως CustomVisualSubSelection.
Πώς να υλοποιήσετε το API μορφοποίησης επί αντικειμένου
Αρχείο δυνατοτήτων
Στο αρχείο capabilites.json, προσθέστε τις παρακάτω ιδιότητες για να δηλώσετε ότι η απεικόνιση υποστηρίζει μορφοποίηση στο αντικείμενο:
Κάθε απεικόνιση απαιτείται για την υλοποίηση μιας μεθόδου getSubSelectionStyles, η οποία καλείται όταν γίνεται δευτερεύουσα επιλογή ενός στοιχείου. Η μέθοδος getSubSelectionStyles παρέχεται με τα τρέχοντα στοιχεία της δευτερεύουσας επιλογής ως πίνακα CustomVisualSubSelection και αναμένεται να επιστρέψει είτε ένα αντικείμενο SubSelectionStyles, είτε undefined.
Υπάρχουν τρεις κατηγορίες στυλ δευτερεύουσας επιλογής που καλύπτουν τα περισσότερα σενάρια:
Κείμενο
Αριθμητικό κείμενο
Σχήμα
Κάθε αντικείμενο SubSelectionStyles παρέχει μια διαφορετική εμπειρία για τον χρήστη για την τροποποίηση του στυλ ενός στοιχείου.
getSubSelectionShortcuts
Για να παρέχει περισσότερες επιλογές για τον χρήστη, η απεικόνιση πρέπει να εφαρμόσει τη μέθοδο getSubSelectionShortcuts. Αυτή η μέθοδος επιστρέφει είτε VisualSubSelectionShortcuts, είτε undefined. Επιπλέον, εάν παρέχονται SubSelectionShortcuts, πρέπει να παρέχεται επίσης μια VisualNavigateSubSelectionShortcut, έτσι ώστε όταν ένας χρήστης δευτερεύουσα επιλογή ενός στοιχείου και το τμήμα παραθύρου μορφοποίησης είναι ανοιχτό, το τμήμα παραθύρου γίνεται αυτόματα κύλιση στην κατάλληλη κάρτα.
Υπάρχουν πολλές συντομεύσεις δευτερεύουσας ενότητας για να τροποποιήσετε την κατάσταση της απεικόνισης. Κάθε ένα ορίζει ένα στοιχείο μενού στο μενού περιβάλλοντος με την κατάλληλη ετικέτα.
Sub-Selection Μενού αποσαφήνισης: το μενού αποσαφήνισης on-object παρέχει μια μέθοδο για να επιλέγουν οι χρήστες την επιθυμητή δευτερεύουσα επιλογή όταν δεν είναι σαφές ποιο οπτικό στοιχείο καταργείται. Αυτό συμβαίνει συχνά όταν ο χρήστης δευτερεύει την επιλογή του φόντου της απεικόνισης. Για να παρουσιάσει περισσότερες υποεπιλογές το αποσαφήνιση μενού, η απεικόνιση πρέπει να παρέχει όλες τις υποεπιλογές μέσω της μεθόδου getSubSelectables.
getSubSelectables
Για την παροχή υποεπιλογών στο μενού αποσαφήνισης, η απεικόνιση πρέπει να υλοποιήσει τη μέθοδο getSubSelectables. Αυτή η μέθοδος παρέχεται ένα προαιρετικό όρισμα filterType, τύπου SubSelectionStylesType και επιστρέφει έναν πίνακα CustomVisualSubSelection ή undefined.
Εάν το HTMLSubSelectionHelper χρησιμοποιείται για τη δημιουργία μιας δευτερεύουσας επιλογής, η HTMLSubSelectionHelper.getSubSelectables() μέθοδος μπορεί να χρησιμοποιηθεί για τη συλλογή στοιχείων με δυνατότητα δευτερεύουσας επιλογής από το DOM.
Sub-Selection Επεξεργασία άμεσου κειμένου: Με μορφοποίηση on-Object, μπορείτε να κάνετε διπλό κλικ στο κείμενο ενός στοιχείου με δυνατότητα επιλογής για απευθείας επεξεργασία.
Για να παρέχετε τη δυνατότητα απευθείας επεξεργασίας, πρέπει να παρέχετε ένα RectangleSubSelectionOutline με την κατάλληλη ιδιότητα cVDirectEdit συμπληρωμένη με ένα αντικείμενο SubSelectableDirectEdit. Η διάρθρωση μπορεί να παρέχεται είτε ως προσαρμοσμένη διάρθρωση είτε, εάν χρησιμοποιείτε το HTMLSubSelectionHelper μπορείτε να χρησιμοποιήσετε το χαρακτηριστικό SubSelectableDirectEdit. (Δείτε τα χαρακτηριστικά που παρέχονται από το HTMLSubSelectionHelper)
Η προσθήκη μιας απευθείας επεξεργασίας για ένα συγκεκριμένο σημείο δεδομένων (με τη χρήση επιλογέων) δεν υποστηρίζεται ακόμα.
Διασύνδεση FormattingId
Η ακόλουθη διασύνδεση χρησιμοποιείται για αναφορά στις subSelection συντομεύσεις και στυλ.
objectName: το όνομα αντικειμένου όπως δηλώνεται στον capabilities.json.
propertyName: το όνομα ιδιότητας ενός αντικειμένου, όπως δηλώνεται στον capabilities.json.
επιλογέας: εάν το σημείο δεδομένων έχει selectionId, χρησιμοποιήστε το selectionId.getSelector(), αυτός ο επιλογέας πρέπει να είναι ο ίδιος με τον παρεχόμενο για τον αναλυτή μοντέλου μορφοποίησης.
Παραδείγματα
Σε αυτό το παράδειγμα, δημιουργούμε μια προσαρμοσμένη απεικόνιση που έχει δύο αντικείμενα, colorSelector και directEdit. Χρησιμοποιούμε την HTMLSubSelectionHelper από τα βοηθητικά προγράμματα onobjectFormatting, για τον χειρισμό των περισσότερων εργασιών δευτερεύουσαςεπιλογής.
Για περισσότερες πληροφορίες, ανατρέξτε στο θέμα βοηθητικών προγραμμάτων on-object.
Πρώτα, δημιουργούμε κάρτες για το τμήμα παραθύρου μορφοποίησης και παρέχουμε subSelectionShortcuts και στυλ για κάθε με δυνατότητα δευτερεύουσας επιλογής.
Ορισμός των αντικειμένων
Καθορίστε τα αντικείμενα και δηλώστε ότι η απεικόνιση υποστηρίζει τη Μορφοποίηση OnObject στον capabilities.json:
Προσθέστε μια μέθοδο στη μορφοποίησηΡυθμίσεις ώστε να μπορούμε να συμπληρώσουμε τις φέτες δυναμικά για το αντικείμενο colorSelector (τα σημεία δεδομένων μας).
Μεταβιβάζουμε τον επιλογέα του συγκεκριμένου σημείου δεδομένων στο πεδίο επιλογέα. Αυτός ο επιλογέας είναι αυτός που χρησιμοποιείται κατά την υλοποίηση της λήψης API του OnObject.
Ρυθμίσεις κάρτας απευθείας επεξεργασίας
class DirectEditSettings extends Card {
displayName = 'Direct Edit';
name = 'directEdit';
private minFontSize: number = 8;
private defaultFontSize: number = 11;
show = new formattingSettings.ToggleSwitch({
name: "show",
displayName: undefined,
value: true,
});
topLevelSlice = this.show;
textProperty = new formattingSettings.TextInput({
displayName: "Text Property",
name: "textProperty",
value: "What is your quest?",
placeholder: ""
});
position = new formattingSettings.ItemDropdown({
name: 'position',
items: [{ displayName: 'Left', value: 'Left' }, { displayName: 'Right', value: 'Right' }],
value: { displayName: 'Right', value: 'Right' }
});
font = new formattingSettings.FontControl({
name: "font",
displayName: 'Font',
fontFamily: new formattingSettings.FontPicker({
name: "fontFamily",
displayName: "Font Family",
value: "Segoe UI, wf_segoe-ui_normal, helvetica, arial, sans-serif"
}),
fontSize: new formattingSettings.NumUpDown({
name: "fontSize",
displayName: "Font Size",
value: this.defaultFontSize,
options: {
minValue: {
type: powerbi.visuals.ValidatorType.Min,
value: this.minFontSize,
}
}
}),
bold: new formattingSettings.ToggleSwitch({
name: 'bold',
displayName: "Font Size",
value: true
}),
italic: new formattingSettings.ToggleSwitch({
name: 'italic',
displayName: "Font Size",
value: true
}),
underline: new formattingSettings.ToggleSwitch({
name: 'underline',
displayName: "Font Size",
value: true
})
});
fontColor = new formattingSettings.ColorPicker({
name: "fontColor",
displayName: "Color",
value: { value: "#000000" }
});
background = new formattingSettings.ColorPicker({
name: "background",
displayName: "Color",
value: { value: "#FFFFFF" }
});
slices = [this.show, this.textProperty, this.font, this.fontColor, this.background, this.position];
}
Χρήση χαρακτηριστικών βοηθητικής υποεπιτροπής
Προσθέστε τα χαρακτηριστικά HTMLSubSelectionHelper στα αντικείμενά μας. Για να δείτε ποια χαρακτηριστικά παρέχει το HTMLSubSelectionHelper, ελέγξτε την τεκμηρίωση των βοηθητικών προγραμμάτων αντικειμένων .
Η HTMLSubSelectionHelper χρησιμοποιεί το χαρακτηριστικό SubSelectableDirectEditAttr για να παρέχει την αναφορά directEdit της διάρθρωσης directEdit, ώστε να ξεκινά μια απευθείας επεξεργασία όταν ένας χρήστης κάνει διπλό κλικ στο στοιχείο.
Καθορίστε την παρακάτω διασύνδεση για να απλοποιήσετε τα παραδείγματα:
Σημείωση
Οι cardUid που παρέχετε θα πρέπει να είναι ίδιες με αυτές που παρέχονται για το API getFormattingModel. Για παράδειγμα, εάν χρησιμοποιείτε το powerbi-visuals-utils-formattingmodel, εισαγάγετε το cardUid ως κάρτας Visual-cardName , όπου το cardName είναι το όνομα που αντιστοιχίζετε σε αυτήν την κάρτα στις ρυθμίσεις μοντέλου μορφοποίησης. Διαφορετικά, καταχωρήστε την ως κάρτα απεικόνισηςUid που αντιστοιχίσατε σε αυτήν την κάρτα.
Η παραπάνω συντόμευση επιστρέφει το σχετικό στοιχείο μενού στο μενού περιβάλλοντος και προσθέτει τις ακόλουθες λειτουργίες:
VisualShortcutType.Navigate: όταν ένας χρήστης επιλέξει σε μία από τις ράβδους (σημείο δεδομένων) και το τμήμα παραθύρου μορφοποίησης είναι ανοιχτό, το τμήμα παραθύρου μορφοποίησης κάνει κύλιση στην κάρτα επιλογέα χρώματος και το ανοίγει
VisualShortcutType.Reset: προσθέτει μια συντόμευση επαναφοράς στο μενού περιβάλλοντος. Είναι ενεργοποιημένη εάν άλλαξε το χρώμα γεμίσματος.
Αυτή η συντόμευση προσθέτει ένα σχετικό στοιχείο μενού στο μενού περιβάλλοντος και προσθέτει τις ακόλουθες λειτουργίες:
VisualShortcutType.Reset: προσθέτει μια επαναφορά στο προεπιλεγμένο στοιχείο στο μενού περιβάλλοντος, όταν μία από τις ιδιότητες που παρέχονται στον πίνακα relatedResetFormattingIds αλλάζει.
VisualShortcutType.Toggle: προσθέτει μια επιλογή Διαγραφή στο μενού περιβάλλοντος. Όταν γίνεται κλικ, απενεργοποιείται ο διακόπτης εναλλαγής για την κάρτα directEdit.
VisualShortcutType.Picker: Προσθέτει μια επιλογή στο μενού περιβάλλοντος για επιλογή μεταξύ Δεξιά και Αριστερά, καθώς προσθέσαμε τον αναλυτή θέσης στην κάρτα μορφοποίησης για το directEdit.
VisualShortcutType.Navigate: Όταν το τμήμα παραθύρου μορφοποίησης είναι ανοιχτό και ο χρήστης επιλέγει το directEdit στοιχείο, γίνεται κύλιση στο τμήμα παραθύρου μορφοποίησης και ανοίγει η directEdit κάρτα.
Παρείχαμε τις σχετικές ιδιότητες όπως τις προσθέσαμε στη μορφοποίησηΡυθμήσεις.
Η παρακάτω εικόνα απεικονίζει την εμφάνιση του περιβάλλοντος εργασίας χρήστη όταν κάνετε δεξί κλικ στο στοιχείο directEdit:
Εντοπισμός
Η απεικόνιση θα πρέπει να χειρίζεται την τοπική προσαρμογή και να παρέχει μεταφρασμένες συμβολοσειρές.
Πόροι GitHub
Μπορείτε να βρείτε όλες τις διασυνδέσεις μορφοποίησης αντικειμένων στο (σύνδεση που θα παρέχεται μετά την κυκλοφορία του API) στο on-object-formatting-api.d.ts
Συνιστούμε τη χρήση του [on object utils], το οποίο περιλαμβάνει το [HTMLSubSelectionHelper](σύνδεση που θα παρέχεται μετά την κυκλοφορία του API)
Μπορείτε να βρείτε ένα παράδειγμα προσαρμοσμένης απεικόνισης sampleBarChart που χρησιμοποιεί την έκδοση API 5.8.0 και υλοποιεί την υποστήριξη για τη μορφοποίηση αντικειμένων στο (σύνδεση που θα παρέχεται μόλις κυκλοφορήσει το API)
Η απόλυτη εκδήλωση Power BI, Fabric, SQL και AI υπό την ηγεσία της κοινότητας. 31 Μαρτίου - 2 Απριλίου. Χρησιμοποιήστε τον κωδικό MSCUST για έκπτωση 150 $. Οι τιμές αυξήθηκαν στις 11 Φεβρουαρίου.