Create an auto slide (Auto-Paging) for Data bleeding over

[shaunvdp]

Hi all...

Been trying to figure out a way to automatically create a slide for data that bleeds over the bottom of the slide (Auto-Paging)... when I have too many "rows" in a slide it simply bleeds onto the next slide without carrying over the styling from the first slide. so I sit with a second slide that just has data floating in from the top of the slide. I made a workaround and split my data in half and dynamically created two slides, but in my situation with the chart created, the proportion of each bar depends on the proportion of the top most bar in the chart. if I need to create a new slide and a new bar for the data that bleeds over, it means that the bars are no longer in proportion with the chart in the first slide. please see my example attached... I have seen the Auto-Paging feature for table data... is there anything like this when not using tables?

thanks in advance for your help
Shaun
Charts test (21).pptx
@gitbrent

[gitbrent]

Hi @shaunvdp ,

Have you used the auto-paging demo? examples/pptxgenjs-demo.html

The examples span slides and carry styling.

[shaunvdp]

Ah... thanks so much... it works great... one thing though... As attached in "Charts Test 40" ... the tables on the second and third slide do not start at the given y position... the documentation says "Tables will auto-page by default and the table on new Slides will use the current Slide's top margin value as the starting point for y" ... but as you can see in... this is not the case... when I give it a "newPageStartY" to match the first slide the table starts bleeding again. as seen in Charts Test 39 on slide 2...
Charts Test (40).pptx
Charts Test (39).pptx

@gitbrent

[shaunvdp]

anybody have a solution for this issue or come across it?

[shaunvdp]

is it a bug or am I doing something wrong? @gitbrent

[gitbrent]

Hi @shaunvdp ,

Please provide the code you're using.

Do the demo slides with newPageStartY work for you?

[shaunvdp]

Hi @gitbrent The demos do the same thing... if you play around with them you will see... I have attached the Demo download with this code on Slide 10 Auto Paging:

var slide = pptx.addNewSlide('MASTER_SLIDE', {bkgd:'CCFFCC'});
slide.addText( [{text:'Table Examples: ', options:gDemoTitleText},{text:'Master Page with Auto-Paging', options:gDemoTitleOpts}], {x:0.5, y:0.13, w:'90%'} );
slide.addTable( arrRows, { x:1.0, y:2.6, newPageStartY:2.5, colW:[0.75,1.75, 7], margin:5, border:'CFCFCF' } );

You can see I added a newPageStartY point... and the second slide (slide 11) bleeds over... when I take the newPageStartT out... the second slide does not start on the orignal Y point as the documentation suggests, but at the top of the slide... you can see this happening on Slide 7... with the following code:

var slide = pptx.addNewSlide();
slide.addText( [{text:'Table Examples: ', options:gDemoTitleText},{text:'Test: { newPageStartY: 1.5 }', options:gDemoTitleOpts}], {x:0.5, y:0.13, w:'90%'} );
slide.addTable( arrRows, { x:3.0, y:4.0, colW:[0.75,1.75, 7], margin:5, border:'CFCFCF' } );

Demo-Table_201711060954.pptx

[shaunvdp]

Hi @gitbrent ... any feedback for me?

[gitbrent]

Hi @shaunvdp ,

So, it turns out the newPageStartY option was only being used by addTable() and not in
addSlidesForTable().

It's fixed now. Your example shows you using addTable(), but that and addSlidesForTable work for me. Try the demo and provide the complete code and some screencaps if you're still having issues.

[shaunvdp]

Thanks for That @gitbrent ... that didn't seem to fix the issue... there are a few issues I have noticed...

1:) The "Y" Position: {y:4.0}
This works on the first slide of the auto page. it puts the table in the correct position... but the autopaged slides do not start at that original "Y" position... I am using your demo code (just changed the "Y" position... The documentation says: "Tables will auto-page by default and the table on new Slides will use the current Slide's top margin value as the starting point for y"...

this is not doing that... you can see the table on the second slide is at the top of the page... and not matching the position of the table on the first slide.

here is the first slide:

here is the second slide:

Here is the code...
var slide = pptx.addNewSlide();
slide.addText( [{text:'Table Examples: ', options:gDemoTitleText},{text:'Test: Correct starting Y location
upon paging', options:gDemoTitleOpts}], {x:0.5, y:0.13, w:'90%'} );
slide.addTable( arrRows, { x:3.0, y:4.0, colW:[0.75,1.75, 7], margin:5, border:'CFCFCF' } );

2:) Adding a rowHeight to the table {rowH: 1.5}
This still has the "Y" position in place... same code as above, just with the {rowH: 1.5} added to the options... the slides starts bleeding from the first slide...

here is the first slide:

here is the second slide:

here is the third slide:

you can see at the bottom of each slide... the table is bleeding over...

here is the code for this...

var slide = pptx.addNewSlide();
slide.addText( [{text:'Table Examples: ', options:gDemoTitleText},{text:'Test: Correct starting Y location
upon paging', options:gDemoTitleOpts}], {x:0.5, y:0.13, w:'90%'} );
slide.addTable( arrRows, { x:3.0, y:4.0, colW:[0.75,1.75, 7], rowH: 1.5,margin:5, border:'CFCFCF' } );

3:) Adding a newStartPageY {newPageStartY:4.0}
the first slide is unaffected by this as it uses original y Position which is correct... but any autopaged slide bleeds over...

here is the first slide:

here is the second slide:

all slide below the second look the same... adding rowH to this give the same result...

here is the code for this:
var slide = pptx.addNewSlide();
slide.addText( [{text:'Table Examples: ', options:gDemoTitleText},{text:'Test: Correct starting Y location
upon paging', options:gDemoTitleOpts}], {x:0.5, y:0.13, w:'90%'} );
slide.addTable( arrRows, { x:3.0, y:4.0, colW:[0.75,1.75, 7], newPageStartY:4.0,rowH: 2.5, margin:5, border:'CFCFCF' } );

for all of these examples I have lowered the word count in the cells and have added more name to gArrNamesF...

var gArrNamesF = ['Markiplier','Jack','Brian','Paul','Ev','Ann','Michelle','Jenny','Lara','Kathryn','Markiplier','Jack','Brian','Paul','Ev','Ann','Michelle','Jenny','Lara','Kathryn'];

I changed work count like this...

for (var idx=0; idx<gArrNamesF.length; idx++) {
var strText = ( idx == 0 ? gStrLoremIpsum.substring(0,50) : gStrLoremIpsum.substring(idx70,idx50) );
arrRows.push( [idx, gArrNamesF[idx], strText] );
arrText.push( [strText] );
}

I have changed nothing else in the example code you have uploaded...

thanks....
if there is anything else you need from me please let me know...

[gitbrent]

Hi @shaunvdp ,

1. Correct. Tables after the first slide dont use y - they use either the newPageStartY or the slide margin (see Issue Allow more than a single 'x' and/or 'y' table location during Table Paging #43, Issue Table location and pagination #47, Issue Meta: Improve auto-paging in 'addTable()' #48)
2. Determining line heights is not an exact science. You'll need to set lineWeight and maybe adjust the margins.
3. Same as above.