Single page application api

Web Export
1

we are currently using webexport to export a page template and add interactions with additional JavaScript. it is really useful to simulate things that are currently not possible within xd.

our current workflow is to export as single page application and simply add out custom code to the exported html header.

to switch between screens, we show / hide them via display:block|none. unfortunately, this only works in Firefox, not in chrome.

is there a way to use the exported application JavaScript object to switch pages? i noticed the application.showView(), but i was unable to pass to it working parameters.

so an api / documentation on how to use the apllication would be very uselful.

1 Like
2

Yes. You can switch pages with API. The documentation needs to be updated.

In a Single Page Application the CSS the root tag has the list of artboard views:

:root {
	--web-view-ids: Cats,Whiskers,Mittens,Snowball,Ending;
	--web-view-name: Cats;
	--web-view-id: Cats;
	--web-scale-to-fit: false;
	--web-scale-to-fit-type: default;
	--web-enable-scale-up: false;
	--web-scale-on-resize: false;
	--web-show-scale-controls: false;
	--web-scale-on-double-click: false;
	--web-center-horizontally: false;
	--web-center-vertically: false;
	--web-actual-size-on-double-click: false;
	--web-navigate-on-keypress: false;
	--web-refresh-for-changes: false;
	--web-add-image-compare: false;
	--web-application: true;
	--web-show-navigation-controls: false;
	--web-enable-deep-linking: true;
}

When the page loads it looks for media queries that contains a rule with an ID that matches the name of the artboard:

@media (min-width: 0px) {
	#Cats {
		width: 960px;
		height: 630px;
		background-color: rgba(247,247,247,1);
		overflow: hidden;
		margin: 0;
		padding: 0;
		--web-view-name: Cats;
		--web-view-id: Cats;
		--web-center-horizontally: true;
		--web-application: true;
		--web-enable-deep-linking: true;
	}
}

When the page loads it shows the view defined in the root selector.

You can go to different views by using the goToState() method.

application.goToState("Cats");

To get a list of views use the getViewIds():

application.getViewIds();

To get a reference to a view use getViewById():

var view = application.getViewById("Whiskers")

To show a view (without hiding the others) use:

var view = application.getViewById("Whiskers")
application.showView(view);

The views contains a dictionary of the view name and element:

var views = application.views;
var view = views["Cats"];

To hide all views use the hideViews() method:

application.hideViews();

To get the current or selected view use getVisibleView():

var view = self.getVisibleView();

When you change views a viewChange event is dispatched.

window.addEventListener(self.NAVIGATION_CHANGE, myViewChangeHandler);

When the application is ready an applicationComplete event is dispatched:

window.dispatchEvent(new Event(self.APPLICATION_COMPLETE));

To update the URL fragment use the updateURL() method;

 var view = application.getViewById("Cats");
 application.updateURL(view);

Or use the syncronizeViewToURL() to load the view that is in the URL fragment:

 application.syncronizeViewToURL();

You can go to the next or previous view using the nextView() and previousView() methods. The views are ordered in the --web-view-ids CSS variable:

application.nextView();
application.previousView();

You may be able to add your own views or nest states via media queries but I haven’t tried it.

3

thank you. this should be very useful