Skip to main content

Toggling and reordering slides

There are three places where sections and slides can be toggled and reordered programatically:

At preso creation / edit​

After a presentation has been created - the context is generated and feeds have been fetched, the content is given the opportunity to toggle and reorder the preso's slides using the available content and feeds data. For example, you may wish to prevent a slide without data from being turned on, or reorder several sections to match the results of an orderable list in fieldsets.

For this, we will be using the application hook, selections. Selections are run after an appointment has been saved (whether creating or editing).

Add selections interface to hooks​

Let's set it up so that the CDK and LivePreso recognise that you want to deal with selections. First you will want to create a hooks file, use the hooks object in the project.yaml to define where in your deck your hooks.js file is located.

project.yaml

hooks: js/hooks.js

Second, we'll need a selections file. In general, you place this in js/hooks/selections.js. To this file you will add the bare minimum for selections to be loaded.

selections.js

export default {
	onSave({ sections }) {
		return sections;
	},
};

hooks.js

Going back to our hooks.js file, you need to export the hook:

import Selections from "./hooks/selections.js";

export default {
	selections: Selections,
};

That's it! The CDK and LivePreso now read selections.

Toggling and reordering​

An example turning off the first section's visibility, and modifying the order of the first section's slides:

export default {
	onSave({ sections }) {
		// Change the visibility of sections and slides
		sections[0].visible = false;
		sections[0].slides.forEach((slide) => {
			slide.visible = false;
		});

		// Reverse the order of the slides in this section
		const totalSlides = sections[0].slides.length;
		sections[0].slides.forEach((slide) => {
			slide.sequence = totalSlides - 1 - slide.sequence;
		});

		return sections;
	},
};
info

Slide sequence is determined by the variable sequence, reordering sections and slides within their respective arrays will not update their sequence in the deck.

warning

Removing sections/slides/subslides and altering unintended values may make visual changes in the CDK, but the actual alteration will not be permanent. Future iterations of the selections feature will check that the expected result return value is correct.

When a preso is edited​

selections.js is run each time a new presentation is created, and each time an existing presentation is edited and saved. Keep this in mind and consider how your code should behave in each instance.

Use-case example:

On presentation creation several slides are turned off based on the user's fieldsets selections. The user opens the slide sorter, toggling several of the affected slides. On presentation edit, the user changes one fieldset selection, but leaves the others untouched.

We can use a combination of data.isNewAppointment and data.initialContext to determine if selections is being run in response to creating a new preso or editing and existing, and which values in the fieldset selections have changed (assuming the results of these selections were saved to the context). In response we can choose to update the slide toggle states of any of the changed fieldset selections, but leave any other slides' states as they were prior to the preso edit.

During slide sorting​

Selection rules code is run during the slide sorting process in response to the user making a change. When this happens, we have the opportunity to make further changes to the current preso's structure, as well as return a relevant message to inform the user of our changes (when required).

For example, your client's content may contain product slides that cannot be presented together. Selection rules can be used in this situation to prevent the any affected product slides from being turned on while incompatible products are still active.

Add selection rules interface to hooks​

Let's set it up so that the CDK and LivePreso recognise that you want to deal with selection rules. First you will want to create a hooks file, use the hooks object in the project.yaml to define where in your deck your hooks.js file is located.

project.yaml

hooks: js/hooks.js

Second you will want to create a selection rules file. In general, you place this in js/hooks/selectionRules.js. To this file you will add the bare minimum for selection rules to be loaded.

selectionRules.js

export default {
	onChange({ sections }) {
		return sections;
	},
};

hooks.js

Going back to our hooks.js file, you need to export the hook:

import SelectionRules from "./hooks/selection-rules.js";

export default {
	selectionRules: SelectionRules,
};

That's it! The CDK and LivePreso now read selection rules.

Reorder slides and adjust visibility​

An example turning off the first section's visibility, and modifying the order of the first section's slides:

export default {
	onChange({ sections }) {
		// Change the visibility of sections and slides
		sections[0].visible = false;
		sections[0].slides.forEach((slide) => {
			slide.visible = false;
		});

		// Reverse the order of the slides in this section
		const totalSlides = sections[0].slides.length;
		sections[0].slides.forEach((slide) => {
			slide.sequence = totalSlides - 1 - slide.sequence;
		});

		return sections;
	},
};
info

Slide sequence is determined by the variable sequence, reordering sections and slides within their respective arrays will not update their sequence in the deck.

warning

Removing sections/slides/subslides and altering unintended values may make visual changes in the CDK, but the actual alteration will not be permanent. Future iterations of the selections feature will check that the expected result return value is correct.

Return messages to the user​

It's possible to also message the user on selection rule changes. For example, if the user attempts to click a slide you will immediately turn off, it might be worth letting the user know a reason why. You can return an object instead, with a list of messages alongside your section changes.

export default {
	onChange({ sections }) {
		// Reverse the order of the slides in this section
		const totalSlides = sections[0].slides.length;
		sections[0].slides.forEach((slide) => {
			slide.sequence = totalSlides - slide.sequence - 1;
		});

		return {
			sections,
			messages: ["We've reversed some slides!"],
		};
	},
};

Take care here not to return too many messages, as the notifications can get a little by spammy.

During a presentation​

Guide coming soon! 🚧

In the meantime see the Bridge.Slides.updateSections() and Bridge.Slides.updateSelections() references.