The new visana website how to fit a square peg into a round hole

The new Visana website: how to fit a square peg into a round hole / Basel / 11.06.2015 / Casper Biever / Page 1

The new Visana website: how to fit a square peg into a round hole

Casper Biever, Senior Software Engineer


Content

n  Introduction

n  The old and the new

n  What we learned

n  Wishes

n  Tips


Introduction

n  1.290 employees, 1.041 FTE

n  570.200 insured mandatory health insurance, 1.174.800 total

n  ~2 b SFr. turnover


The Team


What we were used to


The current website


The new design


The new design


The new design


The new design


The solution

component 1 component 2 component 3 …






How it looks in Magnolia


How it looks in Magnolia


Configuration by code


Configuration by code: take 1

// Change defaultLanguage / fallbackLocale startupTasks.add(new SetPropertyTask(CONFIG, defaultSite + "/i18n", "defaultLocale", "de", ENVIRONMENT_ALL)); startupTasks.add(new SetPropertyTask(CONFIG, defaultSite + "/i18n", "fallbackLocale", "de", ENVIRONMENT_ALL)); startupTasks.add(new SetPropertyTask(CONFIG, defaultSite + "/i18n", "enabled", "false", ENVIRONMENT_ALL)); startupTasks.add(new CreateNodeIfNotExistsTask(CONFIG, defaultSite + "/i18n/locales/fr", NodeTypes.ContentNode.NAME, ENVIRONMENT_ALL)); startupTasks.add(new SetPropertyTask(CONFIG, defaultSite + "/i18n/locales/fr", "country", "", ENVIRONMENT_ALL)); startupTasks.add(new SetPropertyTask(CONFIG, defaultSite + "/i18n/locales/fr", "enabled", "true", ENVIRONMENT_ALL)); startupTasks.add(new SetPropertyTask(CONFIG, defaultSite + "/i18n/locales/fr", "language", "fr", ENVIRONMENT_ALL)); startupTasks.add(new CreateNodeIfNotExistsTask(CONFIG, defaultSite + "/i18n/locales/it", NodeTypes.ContentNode.NAME, ENVIRONMENT_ALL)); startupTasks.add(new SetPropertyTask(CONFIG, defaultSite + "/i18n/locales/it", "country", "", ENVIRONMENT_ALL)); startupTasks.add(new SetPropertyTask(CONFIG, defaultSite + "/i18n/locales/it", "enabled", "true", ENVIRONMENT_ALL)); startupTasks.add(new SetPropertyTask(CONFIG, defaultSite + "/i18n/locales/it", "language", "it", ENVIRONMENT_ALL)); startupTasks.add(new RemoveNodeTask(CONFIG, defaultSite + "/i18n/locales/en", ENVIRONMENT_ALL));



startupTasks.add(new CreateNodesIfNotExistsTask(content, String.format("/form/tabs/tab%s/fields/link/field", tab), ENVIRONMENT_ALL)); startupTasks.add(new CreateNodesIfNotExistsTask(content, String.format("/form/tabs/tab%s/fields/link/field/options/internalLink", tab), ENVIRONMENT_ALL)); startupTasks.add(new CreateNodesIfNotExistsTask(content, String.format("/form/tabs/tab%s/fields/link/field/options/downloadLink", tab), ENVIRONMENT_ALL)); startupTasks.add(new CreateNodesIfNotExistsTask(content, String.format("/form/tabs/tab%s/fields/link/field/options/externalLink", tab), ENVIRONMENT_ALL)); startupTasks.add(new CreateNodesIfNotExistsTask(content, String.format("/form/tabs/tab%s/fields/link/field/fields/internalLink/fields/link", tab), ENVIRONMENT_ALL)); startupTasks.add(new CreateNodesIfNotExistsTask(content, String.format("/form/tabs/tab%s/fields/link/field/fields/internalLink/fields/linkTitle", tab), ENVIRONMENT_ALL)); startupTasks.add(new CreateNodesIfNotExistsTask(content, String.format("/form/tabs/tab%s/fields/link/field/fields/downloadLink/fields/link", tab), ENVIRONMENT_ALL)); startupTasks.add(new CreateNodesIfNotExistsTask(content, String.format("/form/tabs/tab%s/fields/link/field/fields/downloadLink/fields/linkTitle", tab), ENVIRONMENT_ALL)); startupTasks.add(new CreateNodesIfNotExistsTask(content, String.format("/form/tabs/tab%s/fields/link/field/fields/externalLink/fields/link", tab), ENVIRONMENT_ALL)); startupTasks.add(new CreateNodesIfNotExistsTask(content, String.format("/form/tabs/tab%s/fields/link/field/fields/externalLink/fields/linkTitle", tab), ENVIRONMENT_ALL)); ... startupTasks.add(new SetPropertyTask(String.format("%s/form/tabs/tab%s/fields/link/field/options/externalLink", content, tab), ENVIRONMENT_ALL)

.setProperty("label", "external") .setProperty("value", "externalLink")); startupTasks.add(new SetPropertyTask(String.format("%s/form/tabs/tab%s/fields/link/field/fields/externalLink", content, tab), ENVIRONMENT_ALL) .setProperty("class", "info.magnolia.ui.form.field.definition.CompositeFieldDefinition") .setProperty("label", "") .setProperty("layout", "vertical")); startupTasks.add(new SetPropertyTask(String.format("%s/form/tabs/tab%s/fields/link/field/fields/externalLink/fields/link", content, tab), ENVIRONMENT_ALL) .setProperty("extends", "/modules/standard-‐templating-‐kit/dialogs/components/links/stkExternalLink/form/tabs/tabExternalLink/fields/link")); startupTasks.add(new SetPropertyTask(String.format("%s/form/tabs/tab%s/fields/link/field/fields/externalLink/fields/linkTitle", content, tab), ENVIRONMENT_ALL) .setProperty("extends", "/modules/standard-‐templating-‐kit/dialogs/components/links/stkExternalLink/form/tabs/tabExternalLink/fields/linkTitle"));



.addMultiValue("link").label("Link") .name(String.format("tile1x%dLink", column)) .addSwitchable() .addOption("internalLink").label("internal").value("internalLink") .addOption("downloadLink").label("download").value("downloadLink") .addOption("externalLink").label("external").value("externalLink") .addOption("embeddableLink").label("embeddable").value("embeddableLink") .addComposite("internalLink").label("") .verticalLayout() .addInternalLink("link").label("Page") .addTextField("linkTitle").label("Link Title") .finish() .addComposite("downloadLink").label("") .verticalLayout() .addDownloadLink("link").label("Download File") .addTextField("linkTitle").label("Link Title") .finish() .addComposite("externalLink").label("") .verticalLayout() .addExternalLink("link").label("Page URL") .addTextField("linkTitle").label("Link Title") .finish() ...


The result


Automatic image scaling

/.imaging/stageMedium/dam/{image path}


Multilanguage


Multilanguage

de

fr


Multilanguage


Project setup

n  Scrum in 2 weekly cycle

n  Test, acceptance and production systems

n  Jenkins for deployment

n  Exports of website, dam and contact repositories to get started quickly


Wish

n  Make it possible to move elements in Multivalue


Tips (technical)

n  Keep names in concepts and design in sync with those in the code

n  Become close friends with Switchable, Multivalue and Composite

n  Area dialogs

n  Scaffold templates and components


Tips (project)

n  Get involved early, but be reluctant to say no. Think in components on all levels. Content architecture ≈ software architecture

n  Experiment

n  There might be an end to configurability: in that case allow raw HTML formatting

n  Keep needs of publisher in mind

Documents

The new visana website how to fit a square peg into a round hole