Microsoft Ignite 2019 from Office 365 developer’s perspective

Our consultant Laura Kokkarinen tells you what announcements got her the most excited from Office 365 developer’s perspective during Microsoft Ignite 2019. Take a cup of coffee and join Laura for half an hour and hear for example about Microsoft Graph, SharePoint Framework, Search, certifications and provisioning scenarios.

See more content from Laura in her blog: laurakokkarinen.com – Office 365 & Azure, from a developer to developers



Microsoft MVP. Laura työskentelee Sulavalla sovelluskehittäjänä. Laura on työskennellyt SharePoint-ympäristöjen parissa vuodesta 2011 lähtien, keskittyen räätälöintien ja integraatioiden toteutukseen sekä ympäristöjen ylläpitoon. Nykyään Laura toteuttaa ratkaisuja myös O365- ja Azure-ympäristöihin, rakentaen monipuolisesti niin erilaisia räätälöintejä, integraatioita kuin kokonaisia web applikaatioita.

Teams and SharePoint provisioning: What, why and how?

Workspace provisioning solutions are one of the most common — if not the most common — type of customization built for Office 365. In fact, custom workspace provisioning solutions have been built for pretty much as long as SharePoint as a product has existed.

The word provisioning means automatic creation and configuration of something (in our case workspaces) instead of a person doing all the work manually. And by workspaces we mean places for collaboration, such as Teams teams and SharePoint Online sites.

If we recall what the situation was in the cloud a couple of years ago, we can remember that we were still very much focused on provisioning SharePoint Online sites. At the time, it was more about getting customers to move away from classic SharePoint sites, and building provisioning solutions that targeted the new beautiful modern team and communication sites instead.

However, ever since the release of Microsoft Teams and it gaining enormous momentum and popularity, the balance has shifted more and more towards building solutions specifically for provisioning teams. SharePoint still has its well-earned place in this story, though — especially the modern team sites that are connected to the Teams teams via the underlying Office 365 groups.

There are so many things I can tell you about provisioning. This blog post aims to clarify the meaning and benefits of workspace provisioning solutions to those who are not yet that familiar with the topic, and explain why there is no one-size-fits-all solution to the problem.

 

Why do I need automated workspace provisioning?

There are several reasons why organizations might want to invest in a custom workspace provisioning solution. People in different roles can benefit from it, and the reasons depend on who do you ask.

 

Ain’t nobody got time for that!

Let’s look at things from an admin’s perspective first. Whenever a user creates a Planner plan, a modern SharePoint Online team site, or a Teams team, an Office 365 group is created in the background and added to Azure AD. That group then connects all those different services and assets for the group members to use in their collaboration.

Because creating Office 365 groups can happen in so many different ways, and from so many different places, it can quickly start to feel like things are getting out of control. Not all users necessarily even realize that such a group gets created whenever they, for example, create a new plan.

And it is not just about the number of groups but also about the settings in those groups. How is the group named? What kind of collaboration happens in the group? Is it used for confidential internal information or for collaborating with employees from other organizations? What kind of basic security settings are chosen? Should external sharing be limited or allowed? Et cetera.

Because of these concerns, organizations typically flip the switch and disable Office 365 group creation for everyone. Then they allow it via a security group to a small set of admins who know how things should be done, and that way take back control. Those admins are tasked to create groups for other users by following documented steps carefully — if they see the user’s request agreeable. But really, don’t those admins have better things to do? Is this the kind of work they are being paid for?

 

OK, that joke got old very fast

Automated workspace provisioning can also greatly benefit end-users. Quite often, there is a need to create a lot of workspaces with similar configurations. A typical example is a project workspace.

Whenever a new project starts, a new Teams team with specific channels is created. A Planner plan is constructed for the project tasks (often the exact same base tasks for every project), and the plan is then pinned as a tab on one of the channels in Teams. A predefined sub-folder structure needs to be created for storing project-related documents on the SharePoint site document library, and it needs to be done in the way that it shows up correctly on the Files tabs in Teams. Sometimes also a separate SharePoint Online communication site needs to be created for showcasing the project to other employees in the company or to external users who may be interested in the project outcome. And this is only the tip of the iceberg.

It is a lot of work to get done by hand for every single project, and quite often you might forget to do something. Wouldn’t it be nice if you didn’t need to spend the project budget and schedule for clicking around in the UI, and instead could get to work immediately?

 

Automated provisioning pipelines to the rescue!

As I mentioned at the beginning of this blog post, an automated workspace provisioning pipeline means a process, where the workspace is created and configured automatically in a pre-defined way. As with many other automated processes, there are two benefits:

  • Reduces the amount of manual work. When all the steps are automated, an administrator is no longer needed to create teams or SharePoint sites in a controlled manner whenever users need them. And end-users don’t need to always do the exact same configurations for each workspace manually. Users can trigger the provisioning process themselves, and the creation and configuration of the workspace is done automatically (after a possible effortless approval step). This saves time (and hence money) for both the administrators and users to focus on the tasks that matter and can’t be as easily automated.
  • Humans make mistakes. If all teams are configured manually, possibly by a lot of different people, things can easily get set up in an unintended way. When configurations are automated, all teams and sites get created consistently and correctly.

How is it implemented?

The automated provisioning pipeline can be implemented in many different ways, and choosing the right method always depends on the customer-specific requirements. The services and tools we can use include various kinds of forms, bots, SPFx solutions, custom web sites or APIs, Azure Functions, Logic Apps, WebJobs, the PnP Provisioning Engine, SharePoint site designs… the list goes on!

So far, I’ve built at least a dozen different provisioning solutions for Teams and SharePoint, and no two customers have ever wanted the exact same functionality. Customers always have their own internal working cultures, business-specific needs, challenges, and priorities. For some, a very light-weight solution with simple tweaks is enough, while some want very thorough and fully automated processes. This is most likely the reason why this kind of a controlled automatic provisioning process doesn’t exist out of the box. One size just doesn’t fit all.

The solution needs to be built in a way that it fulfills the requirements, is pleasant to use, and doesn’t annoy any of the different types of users involved. The implementation has to be done following the best practices when it comes to, for example, security, while at the same time keeping the customer’s money in mind. Typically there are several ways for accomplishing the desired outcome; hence, I always think:

  • Which one of the possible options is the quickest for implementing the feature (lowest implementation cost)?
  • Which one is the most cost-effective way in the long term? Let’s not do things in a quick and easy way if it means high licensing costs or Azure bills in the future.

Is it for me?

I may be a little bit strange consultant/developer/architect. I genuinely think what is the best solution for the customer also from their money perspective. And I don’t mean just by considering the implementation and maintenance costs I mentioned above. I also evaluate, does the solution create high enough return of interest to justify the investment for the customer?
How many workspaces are created per week, per month, per year?

  • How many different users need to create workspaces?
  • How complex are those workspaces? How long does it take for each of those different users to create them and set them up the way they should be set up?
  • How much time (and hence money) could be saved if the workspace creation was automated and the end-user only needed to fill in a simple order form? How much does it make in a year?
  • What about in three or five years which is still a very realistic lifespan for a provisioning solution.
  • What is currently the customer’s biggest problem related to workspaces; does the provisioning solution help to solve it?

Sometimes, especially for smaller organizations, it may be enough if we take advantage of the out of the box features and offer some high-quality training for the users. However, when the number of users increases, the gained control and time saved can easily justify — and in time, exceed — the initial investment to the workspace provisioning solution. There is always an opportunity cost. Could you spend this time making more money or creating more value for the company by doing something else than setting up yet another Teams workspace?

 

Want to know more?

This blog post possibly marks the beginning of some new content around this topic. In the meanwhile, I’ll be speaking about this topic in-depth at the Global Microsoft 365 Developer Bootcamp in Helsinki in November, and the European SharePoint, Office 365 & Azure Conference in December. If you want to know more about how to choose the different tools for provisioning Teams and related SharePoint sites based on customer requirements, see you in Prague!



Microsoft MVP. Laura työskentelee Sulavalla sovelluskehittäjänä. Laura on työskennellyt SharePoint-ympäristöjen parissa vuodesta 2011 lähtien, keskittyen räätälöintien ja integraatioiden toteutukseen sekä ympäristöjen ylläpitoon. Nykyään Laura toteuttaa ratkaisuja myös O365- ja Azure-ympäristöihin, rakentaen monipuolisesti niin erilaisia räätälöintejä, integraatioita kuin kokonaisia web applikaatioita.

What you need to know about Microsoft Teams Shifts

Shifts is a fairly new feature within Microsoft Teams; although it must feel very familiar to those who have previously used Microsoft StaffHub which is retiring this October. Shifts replaces StaffHub, and just like its predecessor, Shifts is targeted for first-line workers and their managers. In practice, Shifts can be used by, for example, hospital staff, factory workers, truck drivers, IT support or any kind of customer service personnel; basically whenever scheduling work shifts is required:

  • There are long opening hours → several shifts per day are required, or
  • The employees have a flexible work description → not every day consists of the same tasks.

Even though the feature has been a part of Teams for a while now, not that many have actually used it or know much about it. And that is exactly why I decided to write this blog post! Hopefully you’ll learn a lot, and do leave a comment if any questions arise which currently don’t get answered.

Get your Shifts together!

First things first: How do we get to Shifts? First-line workers will see Shifts immediately in Teams among the pinned apps on the left-hand side. Others will find it under the three dots by default.

Teams Shifts location

To make Shifts visible to users immediately, a Teams admin can add them to the FirstLineWorker app policy either via PowerShell or by going to the Microsoft Teams admin center, expanding Teams apps, selecting Setup policies, and adding members to the app policy. Alternatively, the admin can pin the Shifts app for other types of employees as well by adding Shifts to the Global (Org-wide default) app setup policy.

Shifts is also available through the Teams mobile app. There you can find it under More apps. The GUI is simple to use by the workers, which is great. Managers, however, require the desktop view when planning future schedules.

Only one schedule per team

The Shifts feature is always tied to a team in Teams. Every team in Teams can have one schedule in Shifts. The team owners are the managers in Shifts, and they can create schedules to be shared with the members of the team. Note that guests can’t use Shifts at least for the time being.

When you click on the Shifts icon, three things can happen:

  • If you are an owner of at least one team, but none of those yet have a Shifts schedule, you are presented with an option to create a schedule for one of the teams you own.
  • If you are not an owner in any team, and none of the teams you are a member of have a Shifts schedule yet, you’ll see a message “It looks like there aren’t any team schedules for you yet”.
  • If there exists a Shifts schedule for at least one of the teams you are an owner or a member of, you’ll get directed to that schedule. If there are multiple schedules available, the most recent one you viewed is displayed. If you’ve never been to Shifts before, you’ll see a list where you can choose which team schedule you want to view as your very first Shifts schedule ever.

When you have access to at least one schedule, you can open a list of all of your schedules and switch between them via the “hamburger” menu in the top left corner of Shifts. In the same view, you can also find the New schedule link for adding Shifts schedules for your other teams. Now you’ll hopefully find your way around.

There is currently no way to delete a schedule once it has been created, so your decision will be final for the time being. According to UserVoice, the feature is planned to be implemented sometime in the future.

Get organized with scheduling groups

Even though a team can only have one schedule, a schedule can have a seemingly infinite number of groups. A simple schedule can have only one group, but if there is a need for several categories or sections, e.g., stores, groups can support that need.

When you create shifts, you always need create them for one group in the schedule. You can’t move shifts between the groups. You can copy the basic shift if you make a mistake, or want to create similar shifts for several groups in the schedule, but if you have added activities on the shift, those will not be included. However, if you copy entire schedules, then activities are also copied. More about this later.

Teams Shifts overview

 

Creating shifts: aim for a lot of information at a glance though colors and codes

You have the following options when creating shifts:

  • Start and end date and time of the shift
  • Is the shift open or assigned to someone?
  • If you are creating an open shift, you can choose the number of slots. This means multiple copies of the same shift are created for the same time slot, and those can be assigned to different people who are working at the same time, doing the same kind of a shift.
  • A custom label/title to be shown in the schedule view (if left empty, the shift time is shown)
  • The length of an optional unpaid break
  • A note field for any information you might want to include on the shift.
  • A list of sub-activities during the shift
  • The shift color! Decide a color for each different type of shift and you get a nice color-coded schedule for easy viewing.

Teams Shifts shift overview

For (sub)activities, you can specify:

  • A descriptive activity name
  • Start and end time of the activity
  • A two character code shown on the parent shift → helps checking when to do each subtask
  • You can also color code the different types of activities to make viewing shift contents and schedule easier.
  • Whether the activity is paid or not. For example, lunch could be added as an activity and then set as not paid.

Teams Shifts shift activities

Assigning shifts – not as straight forward as you may think

As mentioned, you can create a shift to be an open shift (to be assigned later), or create it directly for a person (this is currently the only option in the mobile app). Before you can assign a shift to a user, you need to add them to the same group where you have or are planning to create the shift.

Adding members to schedule groups is not limited to just the members of the team. If you add someone else than a team member to a schedule group, they automatically become a team member with no extra warning. Members can see all groups and published shifts in the schedule; they are not limited to only the groups they’ve been added to. If you want to reassign a shift from one person to another, you first need to move the shift to Open shifts and then reassign it.

Small nuggets you might easily miss(understand)

Just like you can add shifts, you can also allocate time off for the employees. There are several out-of-the-box reasons for time off, and you can also add your own. You only need to assign time off once per employee: the time will be blocked out for the user in all groups within the schedule. However, if the employee is a member of several teams, the booked time off will not be visible in those other teams. This makes it possible to book “time off” for an employee in one team if they temporarily move to work in another.

Managers can first work with draft versions of the shifts and then publish them for everyone to see when they are finished. This draft → publish process happens every time changes are made to the shifts. While working with a draft, managers can switch to the view that contains the most recently published versions of the shifts via the three dots next to the Share with team button, if needed. The important thing to understand here is that the whole schedule is not a draft, the individual shifts are.

The currently visible schedule view can be printed and exported as an excel file. The view can be a day, a week or a month.

I already mentioned earlier that you can copy shifts. Better than that, you can also copy entire schedules. In practice this means that you copy all shifts between certain dates to another time span within the same team schedule. You can choose to copy as many consecutive days as you want, whether it is a day, a week, a month, a year, even more or in between. The time spans can also overlap. In addition, you can specify what information you want to include and leave out. Unlike when copying individual shifts, copying schedules retains the activities, if the option is checked. I’m hoping activities will be included when copying individual shifts in the future, as it is always easier to delete activities you don’t need than recreate the ones you do.

Teams Shifts copy schedule

 

Other features: requests & time clocking

In addition to creating and viewing schedules, there are also a few other features you should be aware of:

  • Team members can request time-off, and team owners can either approve or deny those requests. Approved time-off is blocked for the user in the schedule automatically.
  • A team member can suggest to swap one of their shifts with one of another employee’s shifts within the same schedule. The co-worker then either denies or approves the request. The other shift doesn’t need to be in the same group, and the people involved don’t need to be members in both groups. If the swap is approved by the other employee, a manager is asked to approve the swap as the final step. If the users were not yet members in the other scheduling groups, they are now automatically added. This is not a security concern as team members can see all the scheduling groups and shifts anyway even if they are not members in the groups.
  • Team members can also simply offer one of their shifts to another team member without getting a shift in return. The approval process works the same way as for shift swaps.
    All of these features can be enabled or disabled.

There is also a new time clocking feature in Shifts that allows members to track their hours. The feature is not enabled by default, and you need to set it up for the team via schedule settings. In addition to tracking the time, you can also enable location detection, which requires the user to be at certain coordinates when starting and stopping their timer.

This feature can be used only via the mobile app. In addition to just starting and stopping the work timer, they can also start additional break timers, and manually edit the logged hours after stopping the main timer. If a person, e.g., always forgets to stop the work timer, they might prefer to track their hours completely manually which is also possible.

What’s next

If you managed to read this far, you should be aware of all the capabilities in Shifts; congratulations! Now you may be wondering: Hmm, we could definitely benefit from using shifts, but we have these business processes that would need to be integrated to it. Is that possible? Microsoft Graph offers us programmatic access to the data within Shifts, which means that we are able to create and manage schedules, groups, shifts etc. automatically. If you are interested in reading more, check out another one of my blog posts in my personal tech blog for more information!

I hope you enjoyed reading this article and learned something new! If you have any questions or comments about this topic, please let me know. Thank you for reading and until next time!



Microsoft MVP. Laura työskentelee Sulavalla sovelluskehittäjänä. Laura on työskennellyt SharePoint-ympäristöjen parissa vuodesta 2011 lähtien, keskittyen räätälöintien ja integraatioiden toteutukseen sekä ympäristöjen ylläpitoon. Nykyään Laura toteuttaa ratkaisuja myös O365- ja Azure-ympäristöihin, rakentaen monipuolisesti niin erilaisia räätälöintejä, integraatioita kuin kokonaisia web applikaatioita.

Monivärisen teeman luominen moderneille SharePoint Online -sivustoille

Pari kuukautta sitten Microsoft julkaisi uuden tavan ottaa käyttöön väriteemoja moderneilla SharePoint Online -sivustoilla. Julkaisu toi mukanaan kahdeksan valmista teemaa, joiden lisäksi voit myös luoda omia teemoja Office UI Fabric Theme Generator -työkalun avulla.

Teemageneraattori-työkalun käyttö on todella helppoa: valitse yksi pääväri, tekstin väri ja taustaväri, kopioi niiden hex-arvot generaattoriin, kopioi työkalun generoima väripaletti (koodi), ja asenna se O365-tenanttiisi PowerShell-skriptin avulla (esitelty myöhemmin tässä blogiartikkelissa).

Mutta mitä jos organisaatiollasi on useita brändivärejä, ja haluaisit niiden kaikkien olevan mukana väriteemassasi? Tähän tilanteeseen olen törmännyt jo muutaman kerran, ja useimmiten graafisessa ohjeistuksessa on kolme pääväriä, joiden kaikkien haluttaisiin olevan yhtä näkyvästi edustettuina.

Voisi kuvitella, että saisit teemasta kolmivärisen korvaamalla väripaletin ”themeSecondary”- ja ”themeTertiary”-arvot kahden muun brändivärin hex-arvoilla. Pikainen testi osoitti kuitenkin, että asia ei ole aivan niin yksinkertainen, joten lähdin selvittämään, mihin väripaletin eri arvot todellisuudessa oikein vaikuttavat?

Tokeneiden vaikutusalueiden selvittäminen

Ensitöikseni kasasin 22:sta toisistaan erottuvasta väristä koostuvan väripaletin, ja asetin värien hex-arvot teeman tokeneihin (mustavalkoiset teksti- ja taustavärit testasin erikseen). Tavoitteenani ei ollut luoda kaunista väriteemaa, vaan tehdä värien – ja täten tokeneiden vaikutusalueiden – erottamisesta mahdollisimman helppoa.

@{
”themePrimary” = ”#FC5038”; #Strawberry
”themeLighterAlt” = ”#888EA8”; #Dark Lavender
”themeLighter” = ”#FBC0C3”; #Pink
”themeLight” = ”#796722”; #Olive
”themeTertiary” = ”#F4843E”; #Orange
”themeSecondary” = ”#72BD54”; #Lime
”themeDarkAlt” = ”#AD4361”; #Raspberry
”themeDark” = ”#136D80”; #Teal
”themeDarker” = ”#FFB29A”; #Light Salmon
”neutralLighterAlt” = ”#FFF7D7”; #Beige
”neutralLighter” = ”#DDEFF9”; #Light Blue
”neutralLight” = ”#F2C976”; #Lemon
”neutralQuaternaryAlt” = ”#8A5E72”; #Dark Plum
”neutralQuaternary” = ”#308FBB”; #Steel Blue
”neutralTertiaryAlt” = ”#BDA9C2”; #Lavender
”neutralTertiary” = ”#994719”; #Sienna
”neutralSecondary” = ”#80B88C”; #Dark Mint
”neutralPrimaryAlt” = ”#9C000C”; #Maroon
”neutralPrimary” = ”#52834C”; #Pine
”neutralDark” = ”#B3AA9B”; #Gray
”black” = ”#000000”;
”white” = ”#ffffff”;
”primaryBackground” = ”#ffffff”;
”primaryText” = ”#000000”;
”bodyBackground” = ”#ffffff”;
”bodyText” = ”#000000”;
”disabledBackground” = ”#CD9D7C”; #Tan
”disabledText” = ”#765A4F”; #Coffee
}

Selaillessani sivustoa huomasin heti, että osa tokeneista on merkittävästi hallitsevampia kuin muut, osa tokeneista on käytössä vain muutamassa erityisessä paikassa, ja joitain tokeneita ei näyttäisi käytettävän ollenkaan. Lisäksi joissain tokeneissa on selvästi tarkoitus käyttää jotain vaaleaa väriä (taustavärit), ja joissain toisissa tokeneissa taas todella tummaakin väriä (tekstit, ikonit). Havaitsin myös järjestelmäsivujen käyttävän samaa väriteemaa, mutta hyvin eri tavalla, mikä voi osaltaan vaikeuttaa tasapainoisen väriteeman rakentamista, jos myös järjestelmäsivujen odotetaan näyttävän kauniisti brändätyiltä.

Teemageneraattorissa mukana olevien tokeneiden lisäksi on olemassa vino pino muitakin tokeneita. Vaikka tiesin jo etukäteen, että näillä tokeneilla ei pitäisi olla mitään vaikutusta moderneilla sivustoilla, halusin kuitenkin pikaisesti testata myös niiden mahdolliset vaikutukset. Saat halutessasi listattua kaikki tarjolla olevat tokenit, kun avaat selaimen kehitystyökalun painamalla näppäimistöstä F12, ja kirjoitat konsoli-ikkunaan window.__themeState__.theme.

Löysin kuin löysinkin pari tokenia, joita ei ole mukana teemageneraattorin tarjoamassa väripaletissa, mutta joilla on kuitenkin pieniä vaikutuksia myös moderneilla sivustoilla: ”accent” ja ”blackTranslucent40”. Tässä listaus kaikista löydöksistäni:

Token Name Impact Shade Occurance
themePrimary Dominant Darker Some buttons, links, texts and icons.
System pages: OK button background, link texts.
themeLighterAlt None
themeLighter Subtle Lighter Navigation edit menu background color.
System pages: Navigation hover background, cancel button hover background.
themeLight Subtle Lighter / Darker Range selector hover and focus background.
themeTertiary None
themeSecondary None
themeDarkAlt Noticable Darker Many icons on the front page, web parts and lists, button hover, range element focus.
themeDark Subtle Darker Command bar icons on the front page.
System pages: OK button border and hover.
themeDarker Subtle Darker Hover color for some links.
System pages: Visited link color.
neutralLighterAlt Subtle Lighter Background color for some elements (preview images, navigation hover).
System pages: Cancel button background, disabled text box background.
neutralLighter Dominant Lighter Background color for some elements (command bar, selected navigation element, placeholder images), hover color for list items and some Cancel buttons.
neutralLight Dominant Lighter Borders, dropdown hover, Cancel button hover, selected list item background.
System pages: Ribbon tab background, OK button border, selected navigation element background, disabled text box border.
neutralQuaternaryAlt Subtle Lighter Command bar selected element hover, list selected item background.
neutralQuaternary Subtle Lighter Command bar selected element background.
System pages: Borders
neutralTertiaryAlt Subtle Darker Some web part element borders, range selector background, Cancel button onclick.
neutralTertiary Subtle Darker Borders, icons and texts in web parts, primarily when the page is in edit mode.
System pages: text box, dropdown and button border color.
neutralSecondary Dominant Darker Texts in web parts, link hover, document library command bar arrow, empty library text, range selector.
System pages: link color, some icons and borders.
neutralPrimaryAlt None
neutralPrimary Dominant Darker Navigation links, text and links in web parts, group visibility text.
System pages: dropdown arrow color, some texts.
neutralDark Subtle Darker Command bar selected element text.
System pages: page breadcrumb, header texts.
black Subtle Darker List item title, hover color for some links
white Dominant Lighter Background color for some items in web parts, navigation background, list item background, side panel background, text color for primary colored buttons, add web part panel background, some icons when page is in edit mode.
System pages: Body background color
primaryBackground Dominant Lighter Body background color
primaryText Subtle Darker Some texts, e.g. in command bar
bodyBackground None
bodyText None
disabledBackground None
disabledText None
accent Subtle Darker The fourth color in the theme preview in Change the look panel. No other effect.
blackTranslucent40 Subtle Darker, Translucent Covers the rest of page when a modal dialog is opened. A solid color can be specified to get rid of transparency.

Monivärisen teeman rakentaminen

Miten minun sitten kannattaisi luoda monivärinen teema näiden löydösten pohjalta? Mielestäni tähän ei ole yhtä ainoaa vastausta, koska ratkaisu riippuu aina hieman siitä, mitä värisävyjä haluaa käyttää. Voin kuitenkin antaa sinulle esimerkin, kuinka itse lähestyn tätä ongelmaa.

Tätä esimerkkiä varten valitsin kolme toisistaan merkittävästi poikkeavaa värisävyä: tummansinisen, korallinpunaisen ja turkoosin – ihan vain sen takia, että mielestäni värit sopivat hyvin yhteen. Ensimmäisenä loin teemageneraattorilla pohjan väripaletilleni käyttäen valitsemaani tummansinistä sävyä, tummanharmaata (#6f6f6f) tekstiväriä, ja perusvalkoista (#fff) taustaväriä. Sitten lähdin suunnittelemaan, mille tokeneille antaisin arvoiksi korallinpunaisen ja turkoosin sävyn.

Koska korallinpunainen on ensinnäkin melko kirkas väri, ja toiseksi halusin sen olevan selkeästi näkyvissä, silmäilin aluksi tokeneita, joiden olin havainnut toistuvan useissa eri paikoissa ja soveltuvan tummille värisävyille. Vaihtoehtona olisi ollut käyttää korallinpunaista esimerkiksi tekstivärinä, mutta koska halusin mielummin käyttää sitä ikoneissa, valitsin sittenkin kaksi eri tokenia, joiden olin havainnut olevan hienovaraisemmin esillä: ”themeDarkAlt” ja ”themeDarkAlt”. Lisäksi lisäsin sen aksentin väriksi (”accent”), tuomaan kivan pienen värinpilkahduksen tumman sinisen rinnalle Change the look -paneeliin.

Sopivan paikan löytäminen turkoosille värille oli hieman hankalampaa, koska se ei ole varsinaisesti tumma väri, eikä myöskään tarpeeksi vaalea ollakseen taustaväri. Lopultä päädyin käyttämään sitä mm. web-osien teksteissä, eli asetin sen ”neutralSecondary” tokenin arvoksi.

Pienen testailun jälkeen huomasin, että vaaleampi sävy korallinpunaisesta näyttäisi paremmalta joissain paikoissa (esim. web-osa valikon ”mouse hover” taustavärinä) vaaleansinisen sävyn sijaan (teemageneraattorin generoima sävy tummansinisen pohjalta). Saadakseni vaalean korallin sävyn, generoin uuden teeman käyttäen valitsemaani korallinpunaista, ja kopioin tästä väripaletista pari vaaleampaa värisävyä käytettäväksi alkuperäisessä teemassani vaaleansinisten värisävyjen paikalla (themeLighter, themeLight). Harkitsin myös vaaleamman turkoosin sävyn generoimista taustaväriksi ”neutralLighter” tokenia varten, mutta mielestäni se olisi tehnyt turkoosista väristä liian hallitsevan kahteen muuhun väriin verrattuna.

Kun väripalettini oli valmis, asensin sen O365-tenanttiini käyttäen alla olevaa PowerShell-skriptiä. Kun käytät tätä skriptiä, muista muuttaa adminSiteUrl-muuttujan arvon vastaamaan oman O365-ympäristösi admin-sivuston url-osoitetta.

$adminSiteUrl = ”https://mytenant-admin.sharepoint.com
$themeName = ”Custom Theme”

$cred = Get-Credential
Connect-SPOService $adminSiteUrl -Credential $cred

#Poista seuraava rivi kommenteista (#), jos haluat päivittää jo olemassaolevaa teemaa
#Remove-SPOTheme -name $themeName

#Korvaa muuttujan arvo teemageneraattorin luomalla väripaletilla
$builder = @{
”themePrimary” = ”#102542”; #Navy
”themeLighterAlt” = ”#d6e3f5”;
”themeLighter” = ”#fef1ef”; #Coral, themeLighter
”themeLight” = ”#fde2df”; #Coral, themeLight
”themeTertiary” = ”#6495da”;
”themeSecondary” = ”#3e7bd1”;
”themeDarkAlt” = ”#F87060”; #Coral
”themeDark” = ”#F87060”; #Coral
”themeDarker” = ”#193a68”;
”neutralLighterAlt” = ”#f8f8f8”;
”neutralLighter” = ”#f4f4f4”;
”neutralLight” = ”#eaeaea”;
”neutralQuaternaryAlt” = ”#dadada”;
”neutralQuaternary” = ”#d0d0d0”;
”neutralTertiaryAlt” = ”#c8c8c8”;
”neutralTertiary” = ”#e2e2e2”;
”neutralSecondary” = ”#53C7BD”; #Turquoise
”neutralPrimaryAlt” = ”#656565”;
”neutralPrimary” = ”#6f6f6f”;
”neutralDark” = ”#4f4f4f”;
”black” = ”#3e3e3e”;
”white” = ”#ffffff”;
”primaryBackground” = ”#ffffff”;
”primaryText” = ”#6f6f6f”;
”bodyBackground” = ”#ffffff”;
”bodyText” = ”#6f6f6f”;
”disabledBackground” = ”#f4f4f4”;
”disabledText” = ”#c8c8c8”;
”accent” = ”#F87060”; #Coral
}

$theme = New-Object ”System.Collections.Generic.Dictionary”2[System.String,System.String]”
$builder.Keys | %{$theme.Add($_, $builder[$_])}

Add-SPOTheme -Name $themeName -Palette $theme -IsInverted:$false

Ja siinä se! Tuloksena on kivan näköinen monivärinen teema, joka käyttää juuri valitsemiani värisävyjä.

Minulla on kova luotto siihen, että työkalut modernien teemojen luomiseen tulevat paranemaan jatkossa, ja moniväristen teemojen luominen tulee myös helpottumaan. Siihen asti monivärisiä teemoja voi luoda tällä tavalla.

Lisäys: Sean Squires vastasikin jo Twitterissä luettuaan alkuperäisen englanninkielisen artikkelin, että parannuksia ja lisäyksiä teemageneraattoriin on odotettavissa jatkossa!

 

Oletko vielä itse luonut omia väriteemoja moderneille SharePoint Online -sivustoille? Kerro kokemuksistasi kommenteissa!

Blogikirjoitus luettavissa englanninkielisenä Lauran omassa blogissa osoitteessa https://laurakokkarinen.com/how-to-create-a-multicolored-theme-for-a-modern-sharepoint-online-site/



Microsoft MVP. Laura työskentelee Sulavalla sovelluskehittäjänä. Laura on työskennellyt SharePoint-ympäristöjen parissa vuodesta 2011 lähtien, keskittyen räätälöintien ja integraatioiden toteutukseen sekä ympäristöjen ylläpitoon. Nykyään Laura toteuttaa ratkaisuja myös O365- ja Azure-ympäristöihin, rakentaen monipuolisesti niin erilaisia räätälöintejä, integraatioita kuin kokonaisia web applikaatioita.