Table of contents<\/h3>\n\n\n- Desired Output<\/a><\/li>\n
- Template<\/a><\/li>\n
- Adding Content<\/a><\/li>\n
- Transformation<\/a><\/li>\n
- Try it Out!<\/a><\/li>\n\n<\/ol>\n<\/div>\n\n\n\n
Desired Output<\/h2>\n\n\n\n
We are going to create an output looking like below image:<\/p>\n\n\n\n![\"\"](\"https:\/\/info.documotor.com\/wp-content\/uploads\/2022\/03\/image-8-1024x578.png\")
<\/figure>\n\n\n\nSample data<\/h3>\n\n\n\n
A copy of the sample data used in this tutorial can be downloaded from here:<\/p>\n\n\n\n
Table-Data-3<\/a>Download<\/a><\/div>\n\n\n\nOverview<\/h3>\n\n\n\n
There are X steps to creating the template:<\/p>\n\n\n\n
- Define the table. This is done within PowerPoint itself. All formatting should be applied here. It is always best to start with a finished design, so it is clear what the desired output should be.<\/li>
- Add and format the content which should be presented within the table.<\/li>
- Create the Transformation required to populate the table.<\/li>
- Apply the relevant binding to ensure that the transformed data is applied to the table<\/li><\/ol>\n\n\n\n
Dynamic table model<\/h3>\n\n\n\n
A full specification of the dynamic table model can be found here<\/a>. This tutorial will not refer to each possible option available within the model, but the sample data and slides found here can be uploaded to Documotor for you to experiment with. The options in the model are all available to be applied to the data and the template here. <\/p>\n\n\n\nTemplate<\/h2>\n\n\n\nWe can achieve the desired output using the following template, a copy of which can be downloaded from here for convenience.<\/a>Download<\/a><\/div>\n\n\n\n![\"\"](\"https:\/\/info.documotor.com\/wp-content\/uploads\/2022\/03\/image-10-1024x578.png\")
<\/figure>\n\n\n\nNote that this slide contains only 2 rows. It is possible to populate as many rows as you need using just one row.<\/p>\n\n\n\n
Adding Content<\/h3>\n\n\n\n
We need to create fields for all possible different content types within that row and format them as appropriate. NOTE: for each different type of content we must create a different field. We then use our transformations to define the data we need per row and then pass the data to the correct field. <\/p>\n\n\n\n
For more information on creating fields in PowerPoint read the article on Fields in PowerPoint<\/a>. Note dynamic tables differ from static tables in this regard as we do not place a field for each individual data point.<\/p>\n\n\n\nLet’s take a look at the attached table in depth.<\/p>\n\n\n\n
Row 1:<\/strong> <\/p>\n\n\n\n- Contains no fields in any cell. <\/li>
- All cells are formatted identically. <\/li>
- Dynamic tables work by repeating ONLY the last row so this row will not be repeated.<\/li><\/ul>\n\n\n\n
Row 2:<\/strong><\/p>\n\n\n\n- All cells contain unique fields references<\/a>.<\/li>
- Cell one contains two different fields each formatted differently, ProductHeader and Date.<\/li>
- This row will be repeated for each data point we need to display.<\/li><\/ul>\n\n\n\n
Design Considerations<\/h3>\n\n\n\n
Table Length<\/strong> <\/p>\n\n\n\nNative PowerPoint does not support splitting tables automatically across multiple slides. When building tables that may contain lots of data it is worth considering this. However, it is possible to repeat slides<\/a> so that we can present the data across a number of different copies of the same slide. <\/p>\n\n\n\nTable and Column<\/strong> width<\/strong><\/p>\n\n\n\nParticularly for Word, it is worth mentioning that in the Table Properties (accessible by right-clicking on the table) the “Preferred width” should be set to 100%, and the columns’ “Preferred width” should be measured in centimeters\/pixels. Setting the columns’ “Preferred width” to be measured in percentage, might affect the final table layout in the generated document.<\/p>\n\n\n\n
Field Variations<\/strong><\/p>\n\n\n\nIt is possible to include as many variations of fields as possible within a single cell. And any characters not within the field will also be repeated per row, so it is possible to add specific non-dynamic text. <\/p>\n\n\n\n
However, this also applies to non-printing characters such as carriage returns. In our example, we have placed both fields on the same line. If instead, we had separated the two fields with a carriage return, each new row would begin with a carriage return and so the spacing would be incorrect.<\/p>\n\n\n\n
Transformation<\/h2>\n\n\n\n
The complete transformation used in this tutorial can be seen below.<\/p>\n\n\n\n
{\n ProductsTable: {\n Options: {\n \"KeepTotalWidth\": `true`\n },\n \"Headers\": @.DataToShow.[\n {\n \"Visible\": Date\n },\n {\n \"Visible\": Region\n },\n {\n \"Visible\": SalesRep\n },\n {\n \"Visible\": Product\n },\n {\n \"Visible\": Units\n },\n {\n \"Visible\": PricePerUnit\n },\n {\n \"Visible\": TotalCost\n }\n ],\n Rows: group_adjacent<\/strong>(sort_by<\/strong>(SalesData, &Product),&Product)[*].[\n { \n placeholder: 'placeholder'\n },\n {\n ProductHeader: @[0].Product\n },\n [*].{\n Date: Date,\n Region: Region,\n SalesRep: SalesRep,\n Product: Product,\n Units: Units,\n PricePerUnit: format<\/strong>(to_number<\/strong>(PricePerUnit, 'en-US'), 'c', 'en-US'), \/\/Convert to dollarsTotalCost\n TotalCost: format<\/strong>(to_number<\/strong>(TotalCost, 'en-US'), 'c', 'en-US') \/\/Convert to dollarsTotalCost\n }\n ][][]\n }\n\n}<\/code><\/pre>\n\n\n\nTransformation Explained<\/h3>\n\n\n\n
The object that holds the entire table data is called ProductsTable<\/code>. Within this we have:<\/p>\n\n\n\nOptions <\/code>– This object is optional. In this case, KeepTotalWidth<\/code> is simply set to be true. This means that if columns are hidden as part of our transformation, the table will automatically resize to fit. Note that this does not refer to the sample data at all, but of course it can do.<\/p>\n\n\n\nOptions: {\n \"KeepTotalWidth\": `true`\n}<\/code><\/pre>\n\n\n\nHeaders <\/code>– Here we are referring to the DataToShow<\/code> node in our sample data and creating a single object for each element in the node to pass each relevant data point to a value called visible. This is where we control the visibility of each column. If the result is true, the column will be shown, if the result is false it will be hidden.<\/p>\n\n\n\n\"Headers\": @.DataToShow.[\n {\n \"Visible\": Date\n },\n {\n \"Visible\": Region\n },\n .\n .\n .\n {\n \"Visible\": TotalCost\n }\n]<\/code><\/pre>\n\n\n\nRows <\/code>– Here we define the data to be presented in each row. The transformation creates an array where each object refers to a single row.<\/p>\n\n\n\n![\"\"](\"https:\/\/info.documotor.com\/wp-content\/uploads\/2022\/03\/image-13.png\")
<\/figure>\n\n\n\nLet’s take a look at this in detail.<\/p>\n\n\n\n
Firstly, we are sorting the data as we need to in point 1<\/strong>. The sample data is not sorted in any particular order. So we apply a simple transformation to it using group_adjacent(sort_by(SalesData, &Product),&Product)[*]<\/code>. In short, sort-by<\/code> sorts all of the data into a single array by the Product data node in each object. group_adjacent<\/code> then splits this single array into separate arrays for each product, 3 in this case. [*]<\/strong><\/code> then ensures that rest of the transformation is applied to each of these arrays in turn.<\/p>\n\n\n\nFor more information on the sort_by<\/code> function see here.<\/a><\/p>\n\n\n\nFor more information on the group_adjacent<\/code> function see here<\/a>.<\/p>\n\n\n\nIn point 2<\/strong>, we define our first row object. Note that in this case, we are not transforming any sample data at all. When we bind the table to the data, even though the first row is not repeated, it still needs to be considered when defining the data, so we simply create a placeholder object here to create a row.<\/p>\n\n\n\nIn point 3<\/strong>, we define our header row. Comparing this to the template, you will notice that the sample data is transformed into a new ProductHeader<\/code> data point which is defined as a field within the template. The template will use this data in the row and because none of the other fields exist in the output data, they will not be populated when the presentation is generated.<\/p>\n\n\n\n![\"\"](\"https:\/\/info.documotor.com\/wp-content\/uploads\/2022\/03\/image-12.png\")
<\/figure>\n\n\n\nIn point 4<\/strong>, we define our remaining rows. The use of [*]<\/code> indicates that for every object in our data, we will transform this to become a new object with each data point referenced within that object. Note that this entire point could be achieved with a simpler transformation, i.e., [*]<\/code> which would simply pass all of the data unformatted from the sample data. However, we more often than not want to apply other transformations to the data, as in this example where we format the PricePerUnit<\/code> and TotalCost data points in US Dollars. For information on how to achieve this, see here<\/a>.<\/p>\n\n\n\nIn point 5<\/strong>, we simply flatten the data we have transformed into a single array. Information on flattening projections can be found here<\/a>.<\/p>\n\n\n\nCustom Functions<\/h4>\n\n\n\n
The transformation required to create dynamic tables can often be quite comprehensive. It is often a good idea to consider using custom functions to help with this. A guide on creating custom functions can be found here<\/a>.<\/p>\n\n\n\nTable Binding<\/h3>\n\n\n\n
The binding for the table is:<\/p>\n\n\n\n
<<DynamicTable:[AltText]$tableData<\/em>>><\/code><\/p>\n\n\n\n[AltText]<\/code> refers to a string. This text will appear as the alt text of the table after it has been created. In our example, this is simply DynamicTableExample.<\/p>\n\n\n\ntableData<\/code> refers to the data point in the output data that contains all the relevant information for the table.<\/p>\n\n\n\nTo add the binding, simply select the table, open the alt text pane<\/a> and add.<\/p>\n\n\n\nTry it out!<\/h2>\n\n\n\n
Now that we created our dynamic table let’s look at what can be improved or amended about it. Below are just a few examples but feel free to experiment with different options. The specific transformations required to produce these outcomes have not been included in this tutorial but everything you need to create them can be found here.<\/p>\n\n\n\n
Hiding the total cost column<\/strong><\/p>\n\n\n\nBy changing the sample DataToShow.TotalCost<\/code> value in the sample data we are able to hide the Total cost column so that our output now looks like:<\/p>\n\n\n\n![\"\"](\"https:\/\/info.documotor.com\/wp-content\/uploads\/2022\/03\/image-14.png\")
<\/figure>\n\n\n\nHighlighting High and low performers with cell shading<\/strong><\/p>\n\n\n\nIn this example we have:<\/p>\n\n\n\n
- Added a
cells <\/code>array to each row as per the dynamic table model<\/a>.<\/li>- Converted the
units<\/code> data point to a number format<\/a> within the 4th object of the array (corresponding to the 4th column in the template)<\/li>- Used an if statement<\/a> to calculate if the value is greater than 90 and if so applied a
BackgroundColor<\/code> of green.<\/li>- Used another if statement to calculate if the value is less than 60 and applied a
BackgroundColor<\/code> of red. <\/li><\/ol>\n\n\n\nThe result is:<\/p>\n\n\n\n![\"\"](\"https:\/\/info.documotor.com\/wp-content\/uploads\/2022\/03\/image-16.png\")
<\/figure>\n\n\n\nMerging and Aligning cells<\/strong><\/p>\n\n\n\nIn this example we have:<\/p>\n\n\n\n
- Used the
__mergeCells <\/code>method on the header rows to merge all cells in that row into a single cell<\/li>- Used
__alignment <\/code>method on the header row to align the text to the center.<\/li>- Set a background colour for the header rows.<\/li><\/ol>\n\n\n\n
![\"\"](\"https:\/\/info.documotor.com\/wp-content\/uploads\/2022\/03\/image-17.png\")
<\/figure>\n\n\n\nDynamic Tables in Word<\/h2>\n\n\n\n
As mentioned in the introduction, creating a dynamic table in Word is very similar to PowerPoint. The key differences are:<\/p>\n\n\n\n
- Bindings are applied via content controls:
{\"BindingType\": \"DynamicTable\", \"BindingKey\": \"tableData\" }<\/code><\/li>- The same cell functionality is not currently supported.<\/li><\/ul>\n\n\n\n
More information on the dynamic table model for Word can be found here<\/a>.<\/p>\n\n\n\n\n
Desired Output<\/h2>\n\n\n\n
We are going to create an output looking like below image:<\/p>\n\n\n\n A copy of the sample data used in this tutorial can be downloaded from here:<\/p>\n\n\n\n There are X steps to creating the template:<\/p>\n\n\n\n A full specification of the dynamic table model can be found here<\/a>. This tutorial will not refer to each possible option available within the model, but the sample data and slides found here can be uploaded to Documotor for you to experiment with. The options in the model are all available to be applied to the data and the template here. <\/p>\n\n\n\n Note that this slide contains only 2 rows. It is possible to populate as many rows as you need using just one row.<\/p>\n\n\n\n We need to create fields for all possible different content types within that row and format them as appropriate. NOTE: for each different type of content we must create a different field. We then use our transformations to define the data we need per row and then pass the data to the correct field. <\/p>\n\n\n\n For more information on creating fields in PowerPoint read the article on Fields in PowerPoint<\/a>. Note dynamic tables differ from static tables in this regard as we do not place a field for each individual data point.<\/p>\n\n\n\n Let’s take a look at the attached table in depth.<\/p>\n\n\n\n Row 1:<\/strong> <\/p>\n\n\n\n Row 2:<\/strong><\/p>\n\n\n\n Table Length<\/strong> <\/p>\n\n\n\n Native PowerPoint does not support splitting tables automatically across multiple slides. When building tables that may contain lots of data it is worth considering this. However, it is possible to repeat slides<\/a> so that we can present the data across a number of different copies of the same slide. <\/p>\n\n\n\n Table and Column<\/strong> width<\/strong><\/p>\n\n\n\n Particularly for Word, it is worth mentioning that in the Table Properties (accessible by right-clicking on the table) the “Preferred width” should be set to 100%, and the columns’ “Preferred width” should be measured in centimeters\/pixels. Setting the columns’ “Preferred width” to be measured in percentage, might affect the final table layout in the generated document.<\/p>\n\n\n\n Field Variations<\/strong><\/p>\n\n\n\n It is possible to include as many variations of fields as possible within a single cell. And any characters not within the field will also be repeated per row, so it is possible to add specific non-dynamic text. <\/p>\n\n\n\n However, this also applies to non-printing characters such as carriage returns. In our example, we have placed both fields on the same line. If instead, we had separated the two fields with a carriage return, each new row would begin with a carriage return and so the spacing would be incorrect.<\/p>\n\n\n\n The complete transformation used in this tutorial can be seen below.<\/p>\n\n\n\n The object that holds the entire table data is called Let’s take a look at this in detail.<\/p>\n\n\n\n Firstly, we are sorting the data as we need to in point 1<\/strong>. The sample data is not sorted in any particular order. So we apply a simple transformation to it using For more information on the For more information on the In point 2<\/strong>, we define our first row object. Note that in this case, we are not transforming any sample data at all. When we bind the table to the data, even though the first row is not repeated, it still needs to be considered when defining the data, so we simply create a placeholder object here to create a row.<\/p>\n\n\n\n In point 3<\/strong>, we define our header row. Comparing this to the template, you will notice that the sample data is transformed into a new In point 4<\/strong>, we define our remaining rows. The use of In point 5<\/strong>, we simply flatten the data we have transformed into a single array. Information on flattening projections can be found here<\/a>.<\/p>\n\n\n\n The transformation required to create dynamic tables can often be quite comprehensive. It is often a good idea to consider using custom functions to help with this. A guide on creating custom functions can be found here<\/a>.<\/p>\n\n\n\n The binding for the table is:<\/p>\n\n\n\n To add the binding, simply select the table, open the alt text pane<\/a> and add.<\/p>\n\n\n\n Now that we created our dynamic table let’s look at what can be improved or amended about it. Below are just a few examples but feel free to experiment with different options. The specific transformations required to produce these outcomes have not been included in this tutorial but everything you need to create them can be found here.<\/p>\n\n\n\n Hiding the total cost column<\/strong><\/p>\n\n\n\n By changing the sample Highlighting High and low performers with cell shading<\/strong><\/p>\n\n\n\n In this example we have:<\/p>\n\n\n\n The result is:<\/p>\n\n\n\n Merging and Aligning cells<\/strong><\/p>\n\n\n\n In this example we have:<\/p>\n\n\n\n As mentioned in the introduction, creating a dynamic table in Word is very similar to PowerPoint. The key differences are:<\/p>\n\n\n\n More information on the dynamic table model for Word can be found here<\/a>.<\/p>\n\n\n\n<\/figure>\n\n\n\nSample data<\/h3>\n\n\n\n
Overview<\/h3>\n\n\n\n
Dynamic table model<\/h3>\n\n\n\n
Template<\/h2>\n\n\n\n
<\/figure>\n\n\n\nAdding Content<\/h3>\n\n\n\n
Design Considerations<\/h3>\n\n\n\n
Transformation<\/h2>\n\n\n\n
{\n ProductsTable: {\n Options: {\n \"KeepTotalWidth\": `true`\n },\n \"Headers\": @.DataToShow.[\n {\n \"Visible\": Date\n },\n {\n \"Visible\": Region\n },\n {\n \"Visible\": SalesRep\n },\n {\n \"Visible\": Product\n },\n {\n \"Visible\": Units\n },\n {\n \"Visible\": PricePerUnit\n },\n {\n \"Visible\": TotalCost\n }\n ],\n Rows: group_adjacent<\/strong>(sort_by<\/strong>(SalesData, &Product),&Product)[*].[\n { \n placeholder: 'placeholder'\n },\n {\n ProductHeader: @[0].Product\n },\n [*].{\n Date: Date,\n Region: Region,\n SalesRep: SalesRep,\n Product: Product,\n Units: Units,\n PricePerUnit: format<\/strong>(to_number<\/strong>(PricePerUnit, 'en-US'), 'c', 'en-US'), \/\/Convert to dollarsTotalCost\n TotalCost: format<\/strong>(to_number<\/strong>(TotalCost, 'en-US'), 'c', 'en-US') \/\/Convert to dollarsTotalCost\n }\n ][][]\n }\n\n}<\/code><\/pre>\n\n\n\nTransformation Explained<\/h3>\n\n\n\n
ProductsTable<\/code>. Within this we have:<\/p>\n\n\n\nOptions <\/code>– This object is optional. In this case, KeepTotalWidth<\/code> is simply set to be true. This means that if columns are hidden as part of our transformation, the table will automatically resize to fit. Note that this does not refer to the sample data at all, but of course it can do.<\/p>\n\n\n\nOptions: {\n \"KeepTotalWidth\": `true`\n}<\/code><\/pre>\n\n\n\nHeaders <\/code>– Here we are referring to the DataToShow<\/code> node in our sample data and creating a single object for each element in the node to pass each relevant data point to a value called visible. This is where we control the visibility of each column. If the result is true, the column will be shown, if the result is false it will be hidden.<\/p>\n\n\n\n\"Headers\": @.DataToShow.[\n {\n \"Visible\": Date\n },\n {\n \"Visible\": Region\n },\n .\n .\n .\n {\n \"Visible\": TotalCost\n }\n]<\/code><\/pre>\n\n\n\nRows <\/code>– Here we define the data to be presented in each row. The transformation creates an array where each object refers to a single row.<\/p>\n\n\n\n<\/figure>\n\n\n\ngroup_adjacent(sort_by(SalesData, &Product),&Product)[*]<\/code>. In short, sort-by<\/code> sorts all of the data into a single array by the Product data node in each object. group_adjacent<\/code> then splits this single array into separate arrays for each product, 3 in this case. [*]<\/strong><\/code> then ensures that rest of the transformation is applied to each of these arrays in turn.<\/p>\n\n\n\nsort_by<\/code> function see here.<\/a><\/p>\n\n\n\ngroup_adjacent<\/code> function see here<\/a>.<\/p>\n\n\n\nProductHeader<\/code> data point which is defined as a field within the template. The template will use this data in the row and because none of the other fields exist in the output data, they will not be populated when the presentation is generated.<\/p>\n\n\n\n<\/figure>\n\n\n\n[*]<\/code> indicates that for every object in our data, we will transform this to become a new object with each data point referenced within that object. Note that this entire point could be achieved with a simpler transformation, i.e., [*]<\/code> which would simply pass all of the data unformatted from the sample data. However, we more often than not want to apply other transformations to the data, as in this example where we format the PricePerUnit<\/code> and TotalCost data points in US Dollars. For information on how to achieve this, see here<\/a>.<\/p>\n\n\n\nCustom Functions<\/h4>\n\n\n\n
Table Binding<\/h3>\n\n\n\n
<<DynamicTable:[AltText]$tableData<\/em>>><\/code><\/p>\n\n\n\n[AltText]<\/code> refers to a string. This text will appear as the alt text of the table after it has been created. In our example, this is simply DynamicTableExample.<\/p>\n\n\n\ntableData<\/code> refers to the data point in the output data that contains all the relevant information for the table.<\/p>\n\n\n\nTry it out!<\/h2>\n\n\n\n
DataToShow.TotalCost<\/code> value in the sample data we are able to hide the Total cost column so that our output now looks like:<\/p>\n\n\n\n<\/figure>\n\n\n\ncells <\/code>array to each row as per the dynamic table model<\/a>.<\/li>units<\/code> data point to a number format<\/a> within the 4th object of the array (corresponding to the 4th column in the template)<\/li>BackgroundColor<\/code> of green.<\/li>BackgroundColor<\/code> of red. <\/li><\/ol>\n\n\n\n<\/figure>\n\n\n\n__mergeCells <\/code>method on the header rows to merge all cells in that row into a single cell<\/li>__alignment <\/code>method on the header row to align the text to the center.<\/li><\/figure>\n\n\n\nDynamic Tables in Word<\/h2>\n\n\n\n
{\"BindingType\": \"DynamicTable\", \"BindingKey\": \"tableData\" }<\/code><\/li>