getPrintHTML() of Timeline

[Isomorphic]

Yes, there are a couple of teething problems with the forums since we upgraded the software this week - we're looking into it.

[SimonF]

Thanks, i will test it as soon as i can download the lates nightly.
By the way, i have subscribed this thread, but it seems that the email-motification system is not working. I haven't got an email about your latest posts.

[Isomorphic]

Ok, we've fixed both of these for builds dated September 10 and later - you can remove the descriptionField hack and set showEventDescriptions back to false once you have such a build.

[SimonF]

Hi there,

the reason for hiding the description and header is that I got too much information to show on a timeline event.
Instead of showing the descriptions on events directly, I am adding these informations to the event hover using getEventHoverHTML method.
Herefor your workaround with enabling showEventDescriptions and setting the descriptionField to an empty string works, but doesn't feel elegant.

Further I have an issue when showing weekends in a designated color. Showing these in the timeline works fine by overriding getDateCSSText as follows:

getDateCSSText : function (date, rowNum, colNum, viewer) {
    if (colNum != 0 && (date.getDay() == 6 || date.getDay() == 0))
        return "background-color: #AAA";
    else
        return this.Super("getDateCSSText", arguments);
}

The issue appears when its about printing these differently colored days. The set color (getDateCSSText) will be ignored.

Following my example code with added getDateCSSText method:

isc.VLayout.create({
    "ID" : "rootLayout",
    "width" : 1000,
    "height" : "100%",
    "autoDraw" : true,
    "hideUsingDisplayNone" : false,
    "leaveScrollbarGap" : false,
    "members" :
    [
        isc.Button.create({
            "width" : 200,
            "click" : function () {
                timelines0.getPrintHTML({
                    printForExport : true
                }, function (data) {
                    timelineContent.setContents(data);

                    console.log(data);
                });
            },
            "title" : "Convert to html",
        }),
        isc.Timeline.create({
            ID : "timelines0",
            startDate : new Date(2015, 0, 1),
            endDate : new Date(2015, 0, 15),
            showControlsBar : false,
            canCreateEvents : false,
            alternateLaneStyles : true,
            canEditEvents : false,
            todayBackgroundColor : '#E0E0E0',
            showEventDescriptions : true,
            showEventHeaders : false,
            descriptionField : "",
            lanes : [{
                    name : "1",
                    title : "January",
                    height : 30
                }
            ],
            getDateCSSText : function (date, rowNum, colNum, viewer) {
                if (colNum != 0 && (date.getDay() == 6 || date.getDay() == 0))
                    return "background-color: #AAA";
                else
                    return this.Super("getDateCSSText", arguments);
            },
            "data" :
            [{
                    "lane" : "1",
                    "description" : "Important event1",
                    "startDate" : new Date(2015, 0, 2, 0, 0),
                    "backgroundColor" : "#CF0",
                    "showDate" : true,
                    "endDate" : new Date(2015, 0, 5, 23, 59),
                    "name" : "&nbsp"
                }, {
                    "lane" : "1",
                    "description" : "Important event2",
                    "startDate" : new Date(2015, 0, 7, 0, 0),
                    "backgroundColor" : "#CF0",
                    "showDate" : true,
                    "endDate" : new Date(2015, 0, 10, 23, 59),
                    "name" : "&nbsp"
                }
            ]
        }),
        isc.HTMLPane.create({
            ID : "timelineContent"
        })
    ]
});

Best regards

[Isomorphic]

What is it that you're trying to do by showing neither the header nor the body of the event?

Do you just want to show rectangles of color, with no text? If so, you can fix your code by switching showEventDescriptions back on, but setting descriptionField to some non-existant fieldName, like:

descriptionField: "notARealField"

That will result in no text in eventCanvases, but correct backgroundColor styling in printed output.

Alternatively, if you set styleName instead of backgroundColor, that will also work correctly in printed output.

If that's no good to you, or not what you meant, please clarify what it is you're trying to achieve.

The 1 or 2px offset issue you mention, in printed output, is noted and queued to be looked at - it's cosmetic only.

[SimonF]

Hi there again,
I'm trying to make my previous example run without visible headers and descriptions.
Therefor the timeline events doesn't disappear anymore, but are losing their color.

I've tested this against every browser and the latest nightly SmartClient_v100p_2015-09-07_Pro.
Following my example code with added lines for showEventDescriptions and showEventHeaders.

Also there seems to be a slight miss-alignment at the generated html near the begin and end of the events.

   isc.VLayout.create({
    "ID" : "rootLayout",
    "width" : "100%",
    "height" : "100%",
    "autoDraw" : true,
    "hideUsingDisplayNone" : false,
    "leaveScrollbarGap" : false,
    "members" :
    [
        isc.Button.create({
            "width" : 200,
            "click" : function () {
                timelines0.getPrintHTML({printForExport :true},function(data){
                    timelineContent.setContents(data);
                    
                    console.log(data);
                });
            },
            "title" : "Convert to html",
        }),
        isc.Timeline.create({
            ID : "timelines0",
            startDate : new Date(2015, 0, 1),
            endDate : new Date(2015, 0, 15),
            showControlsBar: false,
            canCreateEvents: false,
            alternateLaneStyles: true,
            canEditEvents: false,
            todayBackgroundColor: '#E0E0E0',
            showEventDescriptions: false,
            showEventHeaders: false,
            lanes : [{
                    name : "1",
                    title : "January",
                    height : 30
                }
            ],
            "data" :
            [{
                    "lane" : "1",
                    "description" : "Important event1",
                    "startDate" : new Date(2015, 0, 2, 0, 0),
                    "backgroundColor" : "#CF0",
                    "showDate" : true,
                    "endDate" : new Date(2015, 0, 5, 23, 59),
                    "name" : "&nbsp"
                },{
                    "lane" : "1",
                    "description" : "Important event2",
                    "startDate" : new Date(2015, 0, 7, 0, 0),
                    "backgroundColor" : "#CF0",
                    "showDate" : true,
                    "endDate" : new Date(2015, 0, 10, 23, 59),
                    "name" : "&nbsp"
                }
            ]
        }),
        isc.HTMLPane.create({
            ID : "timelineContent"
            })
    ]
});

Best regards

[SimonF]

Hi,
tested with SmartClient_v100p_2015-09-07_Pro, it's working now.
thanks for the fast repsonse

[Isomorphic]

This has been fixed for builds dated September 6 and later.

[SimonF]

Hi there,

I'm trying to call the printHtml of a Timeline.

It seems that all events are left out of the export, even if I set the printForExport to true.


I've tested this against every browser and the latest nightly SmartClient_v100p_2015-09-04_Pro.

Here is the example code:

isc.VLayout.create({
	"ID" : "rootLayout",
	"width" : "100%",
	"height" : "100%",
	"autoDraw" : true,
	"hideUsingDisplayNone" : false,
	"leaveScrollbarGap" : false,
	"members" :
	[
		isc.Button.create({
			"width" : 200,
			"click" : function () {
				timelines0.getPrintHTML({printForExport :true},function(data){
					timelineContent.setContents(data);
					
					console.log(data);
				}); 
			},
			"title" : "Convert to html",
		}),
		isc.Timeline.create({
			ID : "timelines0",
			startDate : new Date(2015, 0, 1),
			endDate : new Date(2015, 0, 15),
			showControlsBar: false,
			canCreateEvents: false,
			alternateLaneStyles: true,
			canEditEvents: false,
			todayBackgroundColor: '#E0E0E0',
			lanes : [{
					name : "1",
					title : "January",
					height : 30
				}
			],
			"data" :
			[{
					"lane" : "1",
					"description" : "Important event1",
					"startDate" : new Date(2015, 0, 2, 0, 0),
					"backgroundColor" : "#CF0",
					"showDate" : true,
					"endDate" : new Date(2015, 0, 5, 23, 59),
					"name" : "&nbsp"
				},{
					"lane" : "1",
					"description" : "Important event2",
					"startDate" : new Date(2015, 0, 7, 0, 0),
					"backgroundColor" : "#CF0",
					"showDate" : true,
					"endDate" : new Date(2015, 0, 10, 23, 59),
					"name" : "&nbsp"
				}
			]
		}),
		isc.HTMLPane.create({
			ID : "timelineContent"
			})
	]
});

Best regards