Smart Layers and Autofill

As you continue to hone your Canvas building capabilities, you will love to learn how to take advantage of some of the more advanced Canvas features.

Now that you've learned how to create a basic canvas, it's important to learn about some of our more advanced Canvas features that will allow you to add layers to libraries, leverage the autofill feature and create Smart layers that maintain a relationship throughout the canvas. In addition, we share best practices on how to put the finishing touches on your canvas before it's ready to be tested by your teams.

Layer Library

As you were creating your first canvas, you might have thought to yourself that it would be nice to save these layers in a folder somewhere to preserve the format, placement and details that you added to the layer so that you can quickly add it to other screens later in the flow, or in other canvases completely. Well you're in luck! Bright has developed a way to add layers to a library to save you time and organize your layers depending on which system you are prototyping. To add a layer to a folder, simply scroll to the bottom of the details panel and click the carrot next to 'Add to Library'. This will give you the option to add this layer to an existing folder or 'Layer Group' or create a new Layer Group from scratch.

This will preserve all of the layer's details including the format, as well as the placement on the screen. We recommend adding layers to Layer Groups based on the specific screen you are working with (not necessarily just the system in general). This will allow you to add that screen to any flow or canvas, click on the folder itself, and automatically place ALL of the layers on the screen in one click. While you can still choose individual layers, one at a time, the ability to place all layers at once is a HUGE time saver. See the video below for more details.

Layer Library Tips:

1. When adding multiple layers to a library, add the lowest layer (furthest back) first, then add the layers in order towards the top layer. This way, when you click a library to add all layers, they will already be in the proper order.
2. Be sure to save the layer to the library without correct answers, click guides, or any specific information entered. This will save you time if/when you clone the canvas to create repetition. 

Smart Layers

Many systems have fields we enter information into and continue to see as we move forward in a given workflow. Smart Layers enable us to recreate this behavior. Any layer that requires learner interaction can become a smart layer (input, calendar, paragraph, select one, typeahead). 

Let's look at creating Smart Layers using a common use case. One of the most common smart layers you will likely use is a Typeahead layer used as a search bar in a system. Let's breakdown the best practice for creating a Smart Layer to recreate the search bar.

1. Click the Typeahead layer to add it to the screen of your canvas.
2. Adjust the location of the layer to the search bar of your scrubbed screenshot and name the layer, for this example "System- Search Bar".
3. Adjust the font style, weight, and size to match the system.
4. If applicable, add the placeholder text. Often this might be something along the lines of "Search" or "Name". Placeholder text is text that displays until the Learner begins inputing the information needed.
5. Be sure you do not have any correct answers or click guides enabled. If you do, the correct answer will be saved with the Smart Layer- from our experience this creates more work when cloning.
6. Use the Smart Layer Library option to save either into the general Layer Library or a specific layer folder. Use the carrot dropdown the same as regular layer library items to choose a specific folder or create a new one. Once you click either the button or a specific folder from the dropdown, the layer has been saved as a smart layer. Just like Autofill Layers, Smart Layers will show with a star icon to help identify these layer types.
   
7. On each subsequent screen, navigate to the layer library to locate your new smart layer. Click the layer to add it to the new screens. Each screen with the same Smart Layer will contain the last information the Learner entered.
   
8. Go back and add correct answers and specifics as needed for the specific workflow you are building. Congrats on making your Smart Layer! 

Remember Smart Layers, and any other layers being added to a library should not include click guides or correct answers at the time they are saved to the Layer Library whether normally or as a Smart Layer. If these are enabled, you will end up using more time to go update the layer on each screen to remove the correct answer, update it to the new version, and remove the click guide- that is a lot of unnecessary time that we can avoid on the frontend!

Autofill Feature

Nearly every system has data that caries across multiple screens. Whether it is the customer's name, phone, or account number in a CRM, a case number in a ticketing system or any other data in your systems, Autofills will save you immense time not only when cloning, but when making your initial template/workflow.

Autofills are initially created on the main Canvas page. Below the title, you will see this option to add an autofill.

1. Click the Plus Icon to add an Autofill.
   
2. After clicking the add option, you will be able to add a Label and Value. 
   
3. Examples of some common autofills are pictured here.
   
   **In this example, the system has the customer's full name in some places, but in others the first or last shows up individually.
4. After we have added the Autofill, we can go to the screen where the information appears. Now, add a text layer and right click (control+click on Mac) the field. This will display your Autofill options. You can also right-click the text layer icon initially to see the menu.
   
5. If you attach the wrong Autofill, don't worry, you can simply click the X on the selected Autofill under the Layer Details to remove the autofill.
   

You can repeat this process for each autofill in each place it appears. The next time you clone the canvas, simply click the edit icon on the Autofill to update the details across all screens at once!

Advanced Autofill Tips: 

• Dates inside your system can be set as Autofills- this helps if you care about your system simulations staying up to date. Simply edit the date as an autofill to bring the practice to the current timeline!
• Grouping Autofills can help organize the layers. Hold shift then select multiple layers by clicking the blank space between the label and value. Then right click and select "Group".
  
  Now this becomes a dropdown group.
  
  Then when you add the autofill to a text box, it will look like this:
  

This will be especially helpful as you dive down the rabbit hole of autofills to build clean templates that are quick and easy to clone!