Finalmente anche l'interfaccia utente di SharePoint 2010 vede l'introduzione dei ribbon.
Anche in SP 2010 i ribbon sono gestiti come una serie di "Tab", ogni tab contiene uno o più "Gruppi", identificati visualmente da una label, dove vengono posizionati i controlli.
I tipi di controllo che vengono gestiti sono all'interno dei gruppi sono: Button, Checkbox, Color Picker, Combo Box, Drop Down, Flyout Anchor, Insert Table, Label, Menu, Menu Section, MRU Split Button, Spinner, Split Button, Text Box, Toggle Button.
A ogni controllo può essere associato un solo comando.
Similmente a Office 2007 e 2010, anche in SP 2010 possiamo andare a personalizzare ogni aspetto dei ribbon, dall'aggiunta di tab, all'aggiunta di gruppi o controlli, fino alla modifica di quelli già presenti.
Di seguito un esempio di file Elements.xml con il CustomAction contenente la definizione del Tab custom:
1: <?xml version="1.0" encoding="utf-8"?>
2: <Elements xmlns="http://schemas.microsoft.com/sharepoint/">
3: <CustomAction
4: Id="MyCustomRibbonTab"
5: Location="CommandUI.Ribbon.ListView"
6: RegistrationId="101"
7: RegistrationType="List">
8: <CommandUIExtension>
9: <CommandUIDefinitions>
10: <CommandUIDefinition
11: Location="Ribbon.Tabs._children">
12: <Tab
13: Id="Ribbon.CustomTabExample"
14: Title="My Custom Tab"
15: Description="My Custom Tab"
16: Sequence="501">
17: <Groups Id="Ribbon.CustomTabExample.Groups">
18: <Group
19: Id="Ribbon.CustomTabExample.CustomGroupExample"
20: Description="Custom Group"
21: Title="Custom Group"
22: Sequence="52">
23: <Controls Id="Ribbon.CustomTabExample.CustomGroupExample.Controls">
24: <Button
25: Id="Ribbon.CustomTabExample.CustomGroupExample.HelloWorld"
26: Command="CustomTabExample.HelloWorldCommand"
27: Sequence="15"
28: Description="Hello, World!"
29: LabelText="Hello, World!"/>
30: </Controls>
31: </Group>
32: </Groups>
33: </Tab>
34: </CommandUIDefinition>
35: </CommandUIDefinitions>
36: <CommandUIHandlers>
37: <CommandUIHandler
38: Command="CustomTabExample.HelloWorldCommand"
39: CommandAction="javascript:alert('Hello, world!');" /> 40: </CommandUIHandlers>
41: </CommandUIExtension>
42: </CustomAction>
43: </Elements>
Come si può notare, nella definizione della CustomAction, l’azione vera e propria (“CustomTabExample.HelloWorldCommand”) non è nient’altro che una funzione JavaScript.
Nei prossimi post, scenderò nel dettaglio di ogni singola funzionalità.
Stay tuned!!
Sottoscrivi