SPEAK Component Reference

Transcription

1 Sitecore Experience Platform SPEAK Component Reference Rev: 13 October 2014 Sitecore Experience Platform SPEAK Component Reference

2 Sitecore Experience Platform Table of Contents Chapter 1 Introduction Organization of SPEAK Components Changes in this version... 6 Chapter 2 Authentications AccountInformation... 8 Chapter 3 Behaviors MultiSelectList Scrollbar Chapter 4 Charts Error Handling in Chart Components, in Data Providers and in the Value Label AreaChart BarChart ColumnChart DoughnutChart JourneyChart LineChart PieChart RadarChart Configuration Item Templates for Chart Controls Chapter 5 Common ActionControl Button CheckBox ChildRenderer ComboBox DatePicker DropDownButton GlobalLogo HyperlinkButton IconButton IconHyperlinkButton Image ItemRenderer Label ListBox MessageBar Properties PageCode ProgressIndicator RadioButton Separator Slider SubAppRenderer SubPageCode Text TextArea TextBox ToggleButton ToolTip Chapter 6 Containers Page 2 of 274

3 SPEAK Component Reference 6.1 Accordion Border ColumnPanel Expander Frame LoadOnDemandPanel ProtectedBorder Repeater RowPanel Section SmartPanel TabControl Chapter 7 Data ChartDataProvider GenericDataProvider QueryDataSource SearchDataSource WebServiceDataSource Chapter 8 Dialogs DialogWindow Chapter 9 Forms Uploader UploaderInfo Chapter 10 Indicators ArrowIndicator ValueLabel Chapter 11 Lists and Grids Carousel ListControl TreeView Chapter 12 Navigation ApplicationLauncher Breadcrumb HyperlinkButtonsGroup Chapter 13 Resources Rule SettingsDictionary StringDictionary Chapter 14 Searching and Filtering FilterControl SearchPanel Chapter 15 Services EntityDataSource StoredQueryDataSource Chapter 16 Silverlight SilverlightFrame Chapter 17 Structures Substructures Page Structures - Applications Page Structures - Dialogs Page Structures - Framework Chapter 18 Alphabetical index Page 3 of 274

4 Sitecore Experience Platform Chapter 1 Introduction This chapter briefly describes how the SPEAK components are organized. Page 4 of 274

5 SPEAK Component Reference 1.1 Organization of SPEAK Components The SPEAK components are stored in two different places in the Sitecore content tree: Core components are in sitecore/client/speak/layouts/renderings, in these subfolders: o o o Common Data Resources Components for Sitecore.Services.Client are in the Sitecore/client/Services/Layouts/Renderings folder. The rest of the components are stored in sitecore/client/business Component Library/Layouts/Renderings, in these subfolders: o o o o o o o o o o o o o Authentications Behaviors Charts Common Containers Dialogs Forms Indicators Lists and Grids Navigation Searching and Filtering Silverlight Structures Two of these subfolders have the name, Common. The Add Rendering dialog box merges the components from these subfolders. Page 5 of 274

6 Sitecore Experience Platform 1.2 Changes in this version Accordion ActionControl ActionControl ActionControl Behavior property Border Chart- and GenericDataProviders ComboBox DatePicker EntityDataSource Image ListBox ListControl ListControl MultiSelectList behavior ProtectedBorder QueryDataSource Repeater Services SilverlightFrame SmartPanel StoredQueryDataSource Tooltip TreeView TreeView Uploader and UploaderInfo Uploader Added ImageUrl property. Additional Model and View Members. Favorites are now stored for the current page in each user profile. Spelling errors in some model member names corrected. All descriptions of the Behavior property changed to say "spaceseparated" instead of "comma-separated". Height property added. Descriptions now mentions getdata(). Changes in properties; new rebind function. Many changes. Added in the Services group. Changed list of model members. Changes in properties; new rebind function. Changed description of the Sorting property; added "sorting" model member. New property: AllowMultipleColumnSorting. Added check/uncheck methods to the description of the MultiSelectList behavior. Component added. Formatting property added. Clarified description. A new folder where the data sources that use Sitecore.Services.Client are located. Component added. Dimension property renamed to Dimensions. Added in the Service group. Animation property removed. Added ShowHiddenItems property. Expanded description of the ShowHidden property. New properties: BrowseButtonText, ShortDescriptionText; ShowAlternateTextField, ShowDescriptionField, ShowNameField. DestinationUrl property added. Page 6 of 274

7 SPEAK Component Reference Chapter 2 Authentications Page 7 of 274

8 Sitecore Experience Platform 2.1 AccountInformation The AccountInformation control shows two things: The name of the user that is logged in A logout link When users click the link, Sitecore logs them out Properties Name Description Default Appearance Behaviors A Behavior extends the default functionality of a component. You activate a behavior by entering the name of the behavior. You can enter several behaviors as a space-separated list. IsVisible If true, the control is visible. True ToolTip Behavior AccessKey DataSource Parameters PlaceholderKey Caching Cacheable VaryByData VaryByDevice VaryByLogin The control displays this text when users hover the mouse over the control. Lets you specify a single character that SPEAK renders as the HTML5 AccessKey attribute of the control. Points to a configuration item. By convention, you create the configuration item in the PageSettings folder under the page definition item. Text string with name-value pairs. An alternative method for assigning property values. Sitecore renders the control in the placeholder that has this ID. If true, Sitecore caches the HTML generated by this component, with entries varying based on the following VaryBy parameters set to true. Sitecore generates SPEAK component HTML on the server side and these settings influence how Sitecore caches the generated HTML. For more information on caching, refer to the SDN. Lets you specify whether output caching varies based on the data source of the control. Lets you specify whether caching varies based on the name of the context device. Lets you specify whether output caching varies based on whether the user has authenticated. None. Page 8 of 274

9 SPEAK Component Reference VaryByParameters Lets you specify whether output caching varies based on rendering parameters passed to the presentation component. VaryByQueryString Lets you specify whether output caching varies based on query string parameters passed in the URL. VaryByUser Data Database Lets you specify whether output caching varies by the domain and username of the context user. Specify the database that the Uploader control uploads files to: The exact name of a database, for example core, or master. $context_database: context database. $context_contentdatabase: content database. The context database. The control places the files in the Media Library of the database you specify. Design Id Lets you set the ID of the control Model Members There are no model members for this control View Members There are no view members for this control Configuration There are no configuration item templates for this control. Page 9 of 274

10 Sitecore Experience Platform Chapter 3 Behaviors Page 10 of 274

11 SPEAK Component Reference 3.1 MultiSelectList The MultiSelectList is only a relevant behavior for the ListControl control. The MultiSelectList behavior extends the ListControl with two properties: checkeditems - contains an array of the raw objects that the user has checked. checkeditemids - contains an array of the IDs of the items that the user has checked Methods The MultiSelect behavior also extends the ListControl with eight methods. You use these methods to control how and when items are checked and unchecked when the default functionality is not enough for your requirements. The methods and their arguments are: Usage: checkitem(item) checkitem(itemid) checkitems(array of items) checkitems(array of itemids) uncheckitem(item) uncheckitem(itemid) uncheckitems(array of items) uncheckitems(array of itemids) ListControl.viewModel.checkItem("{EB443C0B-F E-85F3-E7893C8C30C2}") When you call the checkitem() method like this, the MultiSelectList behavior 1. adds the ID of the specified item to the checkeditemids array, and 2. if ListControl contains a row for the specified item, then it adds this item to the checkeditems array and marks the row as checked. The MultiSelectList behavior scans the checkeditemids array when a new row is added to the ListControl, and it marks the appropriate rows as checked. It also updates the checkeditems array. This means that the checkeditemids array contains ID of items that have been requested to be checked, and the checkeditems array refers to items that are actually checked and shown in the ListControl. Page 11 of 274

12 Sitecore Experience Platform 3.2 Scrollbar The Scrollbar is only a relevant behavior for the ListControl control. The Scrollbar behavior adds a scrollbar to ListControl. Page 12 of 274

13 SPEAK Component Reference Chapter 4 Charts Page 13 of 274

14 Sitecore Experience Platform 4.1 Error Handling in Chart Components, in Data Providers and in the Value Label The chart components, the data providers, and the value label can all trigger an error event. When they trigger this event, they pass an object to the event. You can handle the error in different ways: you can use a MessageBar control, for example, or you can write to a console log. This PageCode JavaScript example writes an error object from an AreaChart control to a console log: this.areachart.on("error", function (errorobject) { console.log(errorobject); }); This errorobject contains two mandatory properties, name and message, and an optional property called response. Name This property identifies the kind of error, for example info, warning, or error. Message This is typically the error message itself. Response If the error is spawned by an AJAX call to a DataProvider, this is the response. Page 14 of 274

15 SPEAK Component Reference 4.2 AreaChart The AreaChart control shows an area chart. An area chart is very similar to a line chart. The difference is that in an area chart, the control fills the area below the line that connects the data points with color. The AreaChart control supports multiseries charts. When an AreaChart control shows a multiseries chart, you can specify if it shows the series stacked or unstacked. The AreaChart control supports showing a sequence of charts when the data it receives from the data provider contains multiple data sets Properties Name Description Default Appearance Behaviors A Behavior extends the default functionality of a component. You activate a behavior by entering the name of the behavior. You can enter several behaviors as a space-separated list. IsVisible If false, the control does not True take up space on the page. ShowAxis If true, the control shows True axes. ShowLegend If true, the control shows a True legend for the chart. ShowValues If true, the control shows the values of the data points inside the graph itself. SingleChartHeight Specify the height in pixels 400 of the chart. If the chart is part of sequence of charts, the control gives each individual chart this height. SingleChartWidth If you specify 100%, the chart takes up the available width. If you specify a number, the control gives the chart this width in pixels. If the chart is part of sequence of charts, 100% means each chart has the entire available width, and the chart sequence becomes a vertical sequence. If the chart is part of sequence of charts, and you specify an integer, the 100% Page 15 of 274

16 Sitecore Experience Platform StackSeries Tooltip VisibleCategoriesRange Behaviors AccessKey DataSource Parameters PlaceholderKey Caching Cacheable VaryByData control gives each chart this width in pixels, and the sequence of charts wraps horizontally. If true, the control stacks the distinctive series in a multiseries chart. Specify the text that you want displayed when the user hovers the mouse over the chart. If a multi-series chart and this number is > 0, the control will show this number of categories along the horizontal axis. If the data contains more categories, users have to scroll horizontally. If this number is 0, the control shows all categories. Lets you specify a single character that SPEAK renders as the HTML5 AccessKey attribute of the control. Text string with name value pairs. An alternative method for assigning property values Sitecore renders the control in the placeholder that has this ID. If true, Sitecore caches the HTML generated by this component, with entries varying based on the following VaryBy parameters set to true. Sitecore generates SPEAK component HTML on the server side and these settings influence how Sitecore caches the generated HTML. For more information on caching, refer to the SDN. Lets you specify whether output caching varies based on the data source None 0 Page 16 of 274

17 SPEAK Component Reference VaryByDevice VaryByLogin VaryByParameters VaryByQueryString VaryByUser Data Data DataMapping CategoryChartField CategoryFilter SeriesChartField SeriesFilter of the control. Lets you specify whether caching varies based on the name of the context device. Lets you specify whether output caching varies based on whether the user has authenticated. Lets you specify whether output caching varies based on rendering parameters passed to the presentation component. Lets you specify whether output caching varies based on query string parameters passed in the URL. Lets you specify whether output caching varies by the domain and username of the context user. Bind to the data the control uses, for example: {Binding.DataProvider.Data} Point to a ChartField item. The control uses this field as the X (horizontal) axis of the chart. Specify one or more values like this: {value1,value2}. The control uses each of these values to filter the data column the CategoryChartField points to. Point to a ChartField. The control uses this field as the definition of the series it shows. Specify one or more values like this: {value1,value2}. The control uses each of these values as a facet of the data column the SeriesChartField points to. If you do not enter anything, the control will create a facet for each distinct value in the data column. Page 17 of 274

18 Sitecore Experience Platform ValueChartFields Design Id Point to a ChartField item. The control uses this field as the Y (vertical) axis of the chart. Lets you set the ID of the control Configuration You can create a configuration item for an AreaChart by creating an item based on the AreaChart Parameters template. The configuration item has these inherited fields: ShowAxis ValueChartFields SingleChartWidth CategoryChartField ShowLegend Data ShowValues CategoryFilter SingleChartHeight IsVisible AccessKey Tooltip Behaviors Id VisibleCategoriesRange SeriesChartField SeriesFilter StackSeries Page 18 of 274

19 SPEAK Component Reference 4.3 BarChart The BarChart control shows a bar chart. A bar chart shows rectangular bars with lengths proportional to the values that they represent. The control plots the bars horizontally. The ColumnChart control is very similar, except that this control plots the bars ( columns ) vertically. The BarChart supports multiseries charts. When a BarChart control shows a multiseries chart, you can decide if it shows the series stacked or unstacked. The BarChart control supports showing a sequence of charts when the data it receives from the data provider contains multiple data sets Properties Name Description Default Appearance Behaviors A Behavior extends the default functionality of a component. You activate a behavior by entering the name of the behavior. You can enter several behaviors as a space-separated list. IsVisible If false, the control does not True take up space on the page. ShowAxis If true, the control shows True axes. ShowLegend If true, the control shows a True legend for the chart. ShowValues If true, the control shows the values of the data points inside the graph itself. SingleChartHeight Specify the height in pixels 400 of the chart. If the chart is part of sequence of charts, the control gives each individual chart this height. SingleChartWidth If you specify 100%, the chart takes up the available width. If you specify a number, the control gives the chart this width in pixels. If the chart is part of sequence of charts, 100% means each chart has the entire available width, and the chart sequence becomes a vertical sequence. If the chart is part of sequence of charts, and 100% Page 19 of 274

20 Sitecore Experience Platform StackSeries Tooltip VisibleCategoriesRange Behaviors AccessKey DataSource Parameters PlaceholderKey Caching Cacheable VaryByData you specify an integer, the control gives each chart this width in pixels, and the sequence of charts wraps horizontally. If true, the control stacks the distinctive series in a multiseries chart. Specify the text that you want displayed when the user hovers the mouse over the chart. If a multi-series chart and this number is > 0, the control will show this number of categories along the horizontal axis. If the data contains more categories, users have to scroll horizontally. If this number is 0, the control shows all categories. Lets you specify a single character that SPEAK renders as the HTML5 AccessKey attribute of the control. Text string with name value pairs. An alternative method for assigning property values Sitecore renders the control in the placeholder that has this ID. If true, Sitecore caches the HTML generated by this component, with entries varying based on the following VaryBy parameters set to true. Sitecore generates SPEAK component HTML on the server side and these settings influence how Sitecore caches the generated HTML. For more information on caching, refer to the SDN. Lets you specify whether output caching varies None 0 Page 20 of 274

21 SPEAK Component Reference VaryByDevice VaryByLogin VaryByParameters VaryByQueryString VaryByUser Data Data DataMapping CategoryChartField CategoryFilter SeriesChartField SeriesFilter based on the data source of the control. Lets you specify whether caching varies based on the name of the context device. Lets you specify whether output caching varies based on whether the user has authenticated. Lets you specify whether output caching varies based on rendering parameters passed to the presentation component. Lets you specify whether output caching varies based on query string parameters passed in the URL. Lets you specify whether output caching varies by the domain and username of the context user. Bind to the data the control uses, for example: {Binding.DataProvider.Data} Point to a ChartField item. The control uses this field as the X (horizontal) axis of the chart. Specify one or more values like this: {value1,value2}. The control uses each of these values to filter the data column the CategoryChartField points to. Point to a ChartField. The control uses this field as the definition of the series it shows. Specify one or more values like this: {value1,value2}. The control uses each of these values as a facet of the data column the SeriesChartField points to. If you do not enter anything, the control will create a facet for each distinct value Page 21 of 274

22 Sitecore Experience Platform ValueChartFields Design Id in the data column. Point to a ChartField item. The control uses this field as the Y (vertical) axis of the chart. Lets you set the ID of the control Configuration You can create a configuration item for a BarChart by creating an item based on the BarChart Parameters template. The configuration item has these inherited fields: ShowAxis ValueChartFields SingleChartWidth CategoryChartField ShowLegend Data ShowValues CategoryFilter SingleChartHeight IsVisible AccessKey Tooltip Behaviors Id VisibleCategoriesRange SeriesChartField SeriesFilter StackSeries Page 22 of 274

23 SPEAK Component Reference 4.4 ColumnChart The ColumnChart control shows a column chart. A colums chart shows rectangular columns with lengths proportional to the values that they represent. The control plots the columns vertically. The BarChart control is very similar, except that this control plots the columns ( bars ) horizontally. The ColumnChart supports multiseries charts. When a ColumnChart control shows a multiseries chart, you can decide if it shows the series stacked or unstacked. The ColumnChart control supports showing a sequence of charts when the data it receives from the data provider contains multiple data sets Properties Name Description Default Appearance Behaviors A Behavior extends the default functionality of a component. You activate a behavior by entering the name of the behavior. You can enter several behaviors as a space-separated list. IsVisible If false, the control does not True take up space on the page. ShowAxis If true, the control shows True axes. ShowLegend If true, the control shows a True legend for the chart. ShowValues If true, the control shows the values of the data points inside the graph itself. SingleChartHeight Specify the height in pixels 400 of the chart. If the chart is part of sequence of charts, the control gives each individual chart this height. SingleChartWidth If you specify 100%, the chart takes up the available width. If you specify a number, the control gives the chart this width in pixels. If the chart is part of sequence of charts, 100% means each chart has the entire available width, and the chart sequence becomes a vertical sequence. If the chart is part of sequence of charts, and 100% Page 23 of 274

24 Sitecore Experience Platform StackSeries Tooltip VisibleCategoriesRange Behaviors AccessKey DataSource Parameters PlaceholderKey Caching Cacheable VaryByData you specify an integer, the control gives each chart this width in pixels, and the sequence of charts wraps horizontally. If true, the control stacks the distinctive series in a multiseries chart. Specify the text that you want displayed when the user hovers the mouse over the chart. If a multi-series chart and this number is > 0, the control will show this number of categories along the horizontal axis. If the data contains more categories, users have to scroll horizontally. If this number is 0, the control shows all categories. Lets you specify a single character that SPEAK renders as the HTML5 AccessKey attribute of the control. Text string with name value pairs. An alternative method for assigning property values Sitecore renders the control in the placeholder that has this ID. If true, Sitecore caches the HTML generated by this component, with entries varying based on the following VaryBy parameters set to true. Sitecore generates SPEAK component HTML on the server side and these settings influence how Sitecore caches the generated HTML. For more information on caching, refer to the SDN. Lets you specify whether output caching varies None 0 Page 24 of 274

25 SPEAK Component Reference VaryByDevice VaryByLogin VaryByParameters VaryByQueryString VaryByUser Data Data DataMapping CategoryChartField CategoryFilter SeriesChartField SeriesFilter based on the data source of the control. Lets you specify whether caching varies based on the name of the context device. Lets you specify whether output caching varies based on whether the user has authenticated. Lets you specify whether output caching varies based on rendering parameters passed to the presentation component. Lets you specify whether output caching varies based on query string parameters passed in the URL. Lets you specify whether output caching varies by the domain and username of the context user. Bind to the data the control uses, for example: {Binding.DataProvider.Data} Point to a ChartField item. The control uses this field as the X (horizontal) axis of the chart. Specify one or more values like this: {value1,value2}. The control uses each of these values to filter the data column the CategoryChartField points to. Point to a ChartField. The control uses this field as the definition of the series it shows. Specify one or more values like this: {value1,value2}. The control uses each of these values as a facet of the data column the SeriesChartField points to. If you do not enter anything, the control will create a facet for each distinct value Page 25 of 274

26 Sitecore Experience Platform ValueChartFields Design Id in the data column. Point to a ChartField item. The control uses this field as the Y (vertical) axis of the chart. Lets you set the ID of the control Configuration You can create a configuration item for a ColumnChart by creating an item based on the ColumnChart Parameters template. The configuration item has these inherited fields: ShowAxis ValueChartFields SingleChartWidth CategoryChartField ShowLegend Data ShowValues CategoryFilter SingleChartHeight IsVisible AccessKey Tooltip Behaviors Id VisibleCategoriesRange SeriesChartField SeriesFilter StackSeries Page 26 of 274

27 SPEAK Component Reference 4.5 DoughnutChart The DoughnutChart control shows a doughnut chart. A doughnut chart displays values as percentages of a whole, and each value is an individual slice of the whole. Doughnut charts are functionally identical to pie charts. The DoughnutChart control does not support multiseries charts. The DoughnutChart control supports showing a sequence of charts when the data it receives from the data provider contains multiple data sets Properties Name Description Default Appearance Behaviors A Behavior extends the default functionality of a component. You activate a behavior by entering the name of the behavior. You can enter several behaviors as a space-separated list. IsVisible If false, the control does not True take up space on the page. ShowLegend If true, the control shows a True legend for the chart. ShowValues If true, the control shows the values of the data points inside the graph itself. SingleChartHeight Specify the height in pixels 400 of the chart. If the chart is part of sequence of charts, the control gives each individual chart this height. SingleChartWidth If you specify 100%, the chart takes up the available width. If you specify a number, the control gives the chart this width in pixels. If the chart is part of sequence of charts, 100% means each chart has the entire available width, and the chart sequence becomes a vertical sequence. If the chart is part of sequence of charts, and you specify an integer, the control gives each chart this width in pixels, and the 100% Page 27 of 274

28 Sitecore Experience Platform Tooltip Behaviors AccessKey DataSource Parameters PlaceholderKey Caching Cacheable VaryByData VaryByDevice VaryByLogin VaryByParameters sequence of charts wraps horizontally. Specify the text that you want displayed when the user hovers the mouse over the chart. Lets you specify a single character that SPEAK renders as the HTML5 AccessKey attribute of the control. Text string with name value pairs. An alternative method for assigning property values Sitecore renders the control in the placeholder that has this ID. If true, Sitecore caches the HTML generated by this component, with entries varying based on the following VaryBy parameters set to true. Sitecore generates SPEAK component HTML on the server side and these settings influence how Sitecore caches the generated HTML. For more information on caching, refer to the SDN. Lets you specify whether output caching varies based on the data source of the control. Lets you specify whether caching varies based on the name of the context device. Lets you specify whether output caching varies based on whether the user has authenticated. Lets you specify whether output caching varies based on rendering parameters passed to the presentation component. None VaryByQueryString Lets you specify whether Page 28 of 274

29 SPEAK Component Reference VaryByUser Data Data DataMapping CategoryChartField CategoryFilter ValueChartFields Design Id output caching varies based on query string parameters passed in the URL. Lets you specify whether output caching varies by the domain and username of the context user. Bind to the data the control uses, for example: {Binding.DataProvider.Data} Point to a ChartField item. The control uses this field labels for the slices. Specify one or more values like this: {value1,value2}. The control uses each of these values to filter the data column the CategoryChartField points to. Point to a ChartField item. The control uses this field as values of the slices. Lets you set the ID of the control Configuration You can create a configuration item for a DoughnutChart by creating an item based on the DoughnutChart Parameters template. The configuration item has these inherited fields: ShowAxis ValueChartFields SingleChartWidth CategoryChartField ShowLegend Data ShowValues CategoryFilter SingleChartHeight IsVisible AccessKey Page 29 of 274

30 Sitecore Experience Platform Tooltip Behaviors Id Page 30 of 274

31 SPEAK Component Reference 4.6 JourneyChart The JourneyChart control shows an extended ColumnChart chart. The JourneyChart control adds the following features to the ColumnChart: Users can select the time range ( duration ) of the data the control shows in the chart. Users can page back and forth. The control checks if there is data available for date ranges before or after the one that it currently shows. If so, the control shows page back and page forward buttons as appropriate. You can specify that users can drill up and drill down through time ranges. You can specify that users can open a Details Panel for the segments of the chart Duration and Units The Duration and Unit concepts are important for understanding how the JourneyChart control works. The Duration is the time range of the data the control displays. A Unit is the time range of a single segment of the chart. You create durations by creating Duration configuration items. You put the items you create in a folder under PageSettings, and you specify this folder in the DurationItems property of the Journey control You create a Duration item by creating an item based on the JourneyDuration template. The item has these fields: Field Duration Unit UnitStep CanDrillUp CanDrill Down Description Specify the time range of the data the control shows. The possible values: Day, Week, Month, Quarter, and Year. Specify the time range of single segment of the chart. The possible values: Hour, Day, Week, Month, Quarter, and Year. Specify how many units the control displays at a time (in a page ). If true, the control shows the Drill-Up button, and users can drill up. If true, the control shows the Drill-Down button, and users can drill down. SPEAK has a number of already configured DurationItems: There are Duration items for Hour, Day, Week, Month, Quarter, and Year. The Year item has CanDrillUp. The Hour item has CanDrillDown. All other settings of CanDrillUp and CanDrillDown are True. You specify Duration and Unit like this: DurationItem Duration Unit Hour None Hour Day Day Hour Week Week Day Month Month Day Quarter Quarter Week Page 31 of 274

32 Sitecore Experience Platform Year Year Month Drilling up and down Drilling down means that the control changes the duration to the current unit. For example, if the current duration is Week and the current unit is Day, the control drills down by setting the duration to Day and refreshing the data it shows. The control always shows a drill-down button, but it only enables this button in these conditions: The CanDrillDown of the current DurationItem is true The user has selected a segment Drilling up means that the control changes the duration to the duration that is one magnitude higher. For example, if the current duration is Week, the control drills up by setting the duration to Month and refreshing the data it shows. The control always shows a drill-up button, but it only enables it when there is a duration of a higher magnitude. Note that the sequence of durations can be different when users drill up and when they drill down. This happens, for example, when you use the preconfigured DurationItems. If a user drills down while the duration is Month, the duration will change to Day. When the user drills up while the duration is Day, the duration will change to Week Details Panel You can specify that SPEAK shows a Details Panel when users click on a segment in the JourneyChart control. Set the SegmentSelectedAction property of the JourneyChart control to ShowDetails Add a control, for example a ListControl, to the DetailsPanel placeholder You have to populate the control you have put in the DetailsPanel placeholder yourself. You can do this in PageCode. The following statement checks that then user has selected a segment and that the SegmentSelectedAction is ShowDetails : if (selectedsegment && selectedsegment.action === "ShowDetails") { // Log to the console the data object for selected segment console.log(selectedsegment.dataobject); } Properties Name Description Default Appearance Behaviors A Behavior extends the default functionality of a component. You activate a behavior by entering the name of the behavior. You can enter several behaviors as a space-separated list. IsVisible If false, the control does not take up True space on the page. ShowAxis If true, the control shows axes. True ShowLegend If true, the control shows a legend for the True Page 32 of 274

33 SPEAK Component Reference chart. ShowValues If true, the control shows the values of the data points inside the graph itself. SingleChartHeight Specify the height in pixels of the chart. If the chart is part of sequence of charts, the control gives each individual chart this height. SingleChartWidth If you specify 100% the chart takes up the available width. If you specify a number, the control gives the chart this width in pixels. If the chart is part of sequence of charts, 100% means each chart has the entire available width, and the chart sequence becomes a vertical sequence. If the chart is part of sequence of charts, and you specify an integer, the control gives each chart this width in pixels, and the sequence of charts wraps horizontally. StackSeries If true, the control stacks the distinctive series in a multiseries chart. Tooltip Specify the text that you want displayed when the user hovers the mouse over the chart. VisibleCategoriesRange If a multi-series chart and this number is > 0, the control will show this number of categories along the horizontal axis. If the data contains more categories, users have to scroll horizontally. If this number is 0, the control shows all categories. Behaviors AccessKey DataSource DurationItems IsDurationButtonsPanelVisible Parameters PlaceholderKey SegmentSelectedAction Lets you specify a single character that SPEAK renders as the HTML5 AccessKey attribute of the control. Specify a folder with DurationItems. The control has a Duration for each DurationItem in the folder. Is true, the control shows a panel with a button for each Duration. The control uses the Display Name of a DurationItem as a label for the button for that DurationItem. Text string with name value pairs. An alternative method for assigning property values Sitecore renders the control in the placeholder that has this ID. Specify what happens when users click a segment in the chart: % None 0 NoAction: nothing happens DrillDown: the control drills down Page 33 of 274

34 Sitecore Experience Platform to the next duration level. See the description of drill-down for further information. ShowDetails: the control shows a Details Panel for the segment. SelectedDurationItemId Caching Cacheable VaryByData VaryByDevice VaryByLogin VaryByParameters VaryByQueryString VaryByUser Data Data DataMapping CategoryChartField CategoryFilter SeriesChartField SeriesFilter Specify the DurationItem selected by the control when the page it is in opens. If true, Sitecore caches the HTML generated by this component, with entries varying based on the following VaryBy parameters set to true. Sitecore generates SPEAK component HTML on the server side and these settings influence how Sitecore caches the generated HTML. For more information on caching, refer to the SDN. Lets you specify whether output caching varies based on the data source of the control. Lets you specify whether caching varies based on the name of the context device. Lets you specify whether output caching varies based on whether the user has authenticated. Lets you specify whether output caching varies based on rendering parameters passed to the presentation component. Lets you specify whether output caching varies based on query string parameters passed in the URL. Lets you specify whether output caching varies by the domain and username of the context user. Bind to the data the control uses, for example: {Binding.ChartDataProvider.Data} Point to a ChartField item. The control uses this field as the X (horizontal) axis of the chart. Specify one or more values like this: {value1,value2}. The control uses each of these values to filter the data column the CategoryChartField points to. Point to a ChartField. The control uses this field as the definition of the series it shows. Specify one or more values like this: {value1,value2}. The control uses each of these values as a facet of the data Page 34 of 274

35 SPEAK Component Reference ValueChartFields Design Id column the SeriesChartField points to. If you do not enter anything, the control will create a facet for each distinct value in the data column. Point to a ChartField item. The control uses this field as the Y (vertical) axis of the chart. Lets you set the ID of the control Configuration You can create a configuration item for a JourneyChart by creating an item based on the JourneyFCChart Parameters template. The configuration item has these specific fields: SegmentSelectedAction DurationItems SelectedDurationItemId IsDurationButtonsPanelVisible It inherits these fields: ShowAxis ValueChartFields SingleChartWidth CategoryChartField ShowLegend Data ShowValues CategoryFilter SingleChartHeight IsVisible AccessKey Tooltip Behaviors Id VisibleCategoriesRange SeriesChartField SeriesFilter StackSeries Page 35 of 274

36 Sitecore Experience Platform 4.7 LineChart The LineChart control shows a line chart. A line chart displays information as a series of data points connected by straight-line segments. The LineChart control supports multi-axis charts. A multi-axis chart is a line chart that plots different values against the same category. Because each line in a multi-axis line chart is a different category, there is an axis for each value. The LineChart control shows a multi-axis line chart if you point it to a folder with multiple ChartField items in the ValueChartFields property. You can specify in the ChartField items if the LineChart control shows the axis for the value on the left or on right side of the chart. The LineChart control supports multiseries charts. The AreaChart control supports showing a sequence of charts when the data it receives from the data provider contains multiple data sets Properties Name Description Default Appearance Behaviors A Behavior extends the default functionality of a component. You activate a behavior by entering the name of the behavior. You can enter several behaviors as a space-separated list. IsVisible If false, the control does not True take up space on the page. ShowAxis If true, the control shows True axes. ShowLegend If true, the control shows a True legend for the chart. ShowValues If true, the control shows the values of the data points inside the graph itself. SingleChartHeight Specify the height in pixels 400 of the chart. If the chart is part of sequence of charts, the control gives each individual chart this height. SingleChartWidth If you specify 100%, the chart takes up the available width. If you specify a number, the control gives the chart this width in pixels. If the chart is part of sequence of charts, 100% means each chart has the entire available width, and the chart sequence 100% Page 36 of 274

37 SPEAK Component Reference Tooltip VisibleCategoriesRange Behaviors AccessKey DataSource Parameters PlaceholderKey Caching Cacheable VaryByData becomes a vertical sequence. If the chart is part of sequence of charts, and you specify an integer, the control gives each chart this width in pixels, and the sequence of charts wraps horizontally. Specify the text that you want displayed when the user hovers the mouse over the chart. It this number is > 0, the control will show this number of categories along the horizontal axis. If the data contains more categories, users have to scroll horizontally. If this number is 0, the control shows all categories. Lets you specify a single character that SPEAK renders as the HTML5 AccessKey attribute of the control. Text string with name value pairs. An alternative method for assigning property values Sitecore renders the control in the placeholder that has this ID. If true, Sitecore caches the HTML generated by this component, with entries varying based on the following VaryBy parameters set to true. Sitecore generates SPEAK component HTML on the server side and these settings influence how Sitecore caches the generated HTML. For more information on caching, refer to the SDN. Lets you specify whether output caching varies None 0 Page 37 of 274

38 Sitecore Experience Platform VaryByDevice VaryByLogin VaryByParameters VaryByQueryString VaryByUser Data Data DataMapping CategoryChartField CategoryFilter SeriesChartField SeriesFilter based on the data source of the control. Lets you specify whether caching varies based on the name of the context device. Lets you specify whether output caching varies based on whether the user has authenticated. Lets you specify whether output caching varies based on rendering parameters passed to the presentation component. Lets you specify whether output caching varies based on query string parameters passed in the URL. Lets you specify whether output caching varies by the domain and username of the context user. Bind to the data the control uses, for example: {Binding.DataProvider.Data} Point to a ChartField item. The control uses this field as the X (horizontal) axis of the chart. Specify one or more values like this: {value1,value2}. The control uses each of these values to filter the data column the CategoryChartField points to. Point to a ChartField. The control uses this field as the definition of the series it shows. Specify one or more values like this: {value1,value2}. The control uses each of these values as a facet of the data column the SeriesChartField points to. If you do not enter anything, the control will create a facet for each distinct value Page 38 of 274

39 SPEAK Component Reference ValueChartFields Design Id in the data column. Point to a ChartField item. The control uses this field as the Y (vertical) axis of the chart. You can specify multiple ChartField items as a comma-separated list. The LineChart control will show a graph and an axis for each value. Lets you set the ID of the control Configuration You can create a configuration item for a LineChart by creating an item based on the LineChart Parameters template. The configuration item has these inherited fields: ShowAxis ValueChartFields SingleChartWidth CategoryChartField ShowLegend Data ShowValues CategoryFilter SingleChartHeight IsVisible AccessKey Tooltip Behaviors Id VisibleCategoriesRange SeriesChartField SeriesFilter Page 39 of 274

40 Sitecore Experience Platform 4.8 PieChart The PieChart control shows a pie chart. A pie chart displays values as percentages of a whole, and each value is an individual slice of the whole. Pie charts are functionally identical to doughnut charts. The PieChart control does not support multiseries charts. The PieChart control supports showing a sequence of charts when the data it receives from the data provider contains multiple data sets Properties Name Description Default Appearance Behaviors A Behavior extends the default functionality of a component. You activate a behavior by entering the name of the behavior. You can enter several behaviors as a space-separated list. IsVisible If false, the control does not True take up space on the page. ShowLegend If true, the control shows a True legend for the chart. ShowValues If true, the control shows the values of the data points inside the graph itself. SingleChartHeight Specify the height in pixels 400 of the chart. If the chart is part of sequence of charts, the control gives each individual chart this height. SingleChartWidth If you specify 100%, the chart takes up the available width. If you specify a number, the control gives the chart this width in pixels. If the chart is part of sequence of charts, 100% means each chart has the entire available width, and the chart sequence becomes a vertical sequence. If the chart is part of sequence of charts, and you specify an integer, the control gives each chart this width in pixels, and the sequence of charts wraps 100% Page 40 of 274

41 SPEAK Component Reference Tooltip Behaviors AccessKey DataSource Parameters PlaceholderKey Caching Cacheable VaryByData VaryByDevice VaryByLogin VaryByParameters VaryByQueryString horizontally. Specify the text that you want displayed when the user hovers the mouse over the button. Lets you specify a single character that SPEAK renders as the HTML5 AccessKey attribute of the control. Text string with name value pairs. An alternative method for assigning property values Sitecore renders the control in the placeholder that has this ID. If true, Sitecore caches the HTML generated by this component, with entries varying based on the following VaryBy parameters set to true. Sitecore generates SPEAK component HTML on the server side and these settings influence how Sitecore caches the generated HTML. For more information on caching, refer to the SDN. Lets you specify whether output caching varies based on the data source of the control. Lets you specify whether caching varies based on the name of the context device. Lets you specify whether output caching varies based on whether the user has authenticated. Lets you specify whether output caching varies based on rendering parameters passed to the presentation component. Lets you specify whether output caching varies None Page 41 of 274

42 Sitecore Experience Platform VaryByUser Data Data DataMapping CategoryChartField CategoryFilter ValueChartFields Design Id based on query string parameters passed in the URL. Lets you specify whether output caching varies by the domain and username of the context user. Bind to the data the control uses, for example: {Binding.DataProvider.Data} Point to a ChartField item. The control uses this field labels for the slices. Specify one or more values like this: {value1,value2}. The control uses each of these values to filter the data column the CategoryChartField points to. Point to a ChartField item. The control uses this field as values of the slices. Lets you set the ID of the control Configuration You can create a configuration item for a PieChart by creating an item based on the PieChart Parameters template. The configuration item has these inherited fields: ShowAxis ValueChartFields SingleChartWidth CategoryChartField ShowLegend Data ShowValues CategoryFilter SingleChartHeight IsVisible AccessKey Tooltip Page 42 of 274

43 SPEAK Component Reference Behaviors Id Page 43 of 274

44 Sitecore Experience Platform 4.9 RadarChart The RadarChart control shows a radar chart. A radar chart consists of a sequence of equi-angular spokes, with each spoke representing a category. The data length of each spoke is proportional to the value of the data point for that category. A radar chart is also known as a web chart, a spider chart, a star chart, a star plot, and other names. The RadarChart control supports multiseries charts. The RadarChart control supports showing a sequence of charts when the data it receives from the data provider contains multiple data sets Properties Name Description Default Appearance Behaviors A Behavior extends the default functionality of a component. You activate a behavior by entering the name of the behavior. You can enter several behaviors as a space-separated list. IsVisible If false, the control does not True take up space on the page. ShowAxis If true, the control shows True axes. ShowLegend If true, the control shows a True legend for the chart. ShowValues If true, the control shows the values of the data points inside the graph itself. SingleChartHeight Specify the height in pixels 400 of the chart. If the chart is part of sequence of charts, the control gives each individual chart this height. SingleChartWidth If you specify 100%, the chart takes up the available width. If you specify a number, the control gives the chart this width in pixels. If the chart is part of sequence of charts, 100% means each chart has the entire available width, and the chart sequence becomes a vertical sequence. If the chart is part of 100% Page 44 of 274