Dive into Best Practices, Technologies, and Developer Tools

Learning Objectives

After completing this unit, you’ll be able to:

Describe the design principles and skills used in designing Omnistudio solutions.
Explain the best practices for an efficient Omnistudio solution design.
List the technical skills and knowledge that Omnistudio developers need.
Explain Omnistudio developer tools.

High-Level Design Principles and Skills

In this unit, you learn about the technical skills and knowledge required to develop Omnistudio solutions. Also, discover how Salesforce developer tools support Omnistudio.

Omnistudio’s key characteristic is its low-code approach to building digital interactions and experiences. To design effective Omnistudio solutions, follow a few general design principles and best practices.

Process mapping: This approach involves understanding and visualizing the flow of data and processes within your system. It helps you identify inefficiencies and areas for improvement, ensuring that your integrations and workflows are optimized. To learn about it, complete the Business Process Mapping module in Trailhead.
Design thinking: This approach focuses on empathy, collaboration, and iterative problem-solving. By putting the end user at the center of your design process, you create intuitive and effective solutions.
Designer’s mindset: Think from a designer’s perspective while building Omnistudio solutions. This approach involves ‌logical and systematic ways to solve problems. It includes understanding coding principles even if you’re not writing code directly. It helps you think through complex systems and their interactions. If you’re new to development, check out the Adopt a Designer’s Mindset trail on Trailhead.

These technical skills are crucial for successfully using Omnistudio to build and manage sophisticated integrations and workflows.

High-Level Best Practices for Omnistudio Solution Design

When designing a solution with Omnistudio, it’s important to keep a few general best practices in mind. Apps that use minimal code not only run faster but are easier for admins to maintain. Keep these high-level best practices in mind as you develop components using the Omnistudio Designers.

Best Practice	Guidance
Use standard Omnistudio. components.	Use standard components in the Omnistudio designers whenever possible. Define as much functionality as you can by using the Omniscript and Flexcard designers.
Customize standard Omnistudio components only when necessary.	If you need any functionality that standard Omnistudio components don’t have, you can extend or customize existing standard Omnistudio components. This helps admins to maintain the designers efficiently. When you’re creating ‌code: Create it in a generic, agnostic way. Keep it as minimal as possible.
Use a hybrid Omnistudio design and minimal code approach to build new components.	When it’s not possible to use or customize standard components to meet the requirements, build a new component. However, try to use a hybrid Omnistudio design, which includes both standard and custom components and a minimal code approach. Use a combination of standard and custom components as much as possible so the app is easy to maintain and upgrade. Build new Lightning web components with global and reusable logic. Structure the code to be reusable in a variety of use cases, not just one.
Use consistent component naming conventions.	Establish clear and consistent naming conventions for all Omnistudio components. Effective naming conventions for Omnistudio components are crucial for maintaining a well-organized, understandable, and maintainable Salesforce environment.

For more detailed best-practices and implementation guidance, consult the help docs listed in Resources.

Technical Knowledge for Omnistudio Developers

Omnistudio uses many standard technologies to build the next generation Salesforce apps. This includes several open-source tools that are available outside Salesforce.

It’s not necessary for you to learn new skills or technologies from scratch to successfully develop Omnistudio solutions. This reduces ‌resource onboarding time and ‌overall development time.

Still, it’s helpful to understand a few web development technologies that you’d use to develop Omnistudio solutions. Here’s a list of the knowledge that’s helpful when you build Omnistudio components and features.

Knowledge	How It’s Used in Omnistudio
JSON	JavaScript Object Notation or JSON is the underlying data format that defines an Omnistudio component like Flexcard. Data in a JSON is divided into nodes and, sometimes, subnodes.
SOQL	Salesforce Object Query Language (SOQL) is a query language you use to retrieve data from the Salesforce database. SOQL is similar to the SELECT statement in the widely used Structured Query Language (SQL) but is designed specifically for Salesforce data. Omnistudio Data Mappers use SOQL to query data from the Salesforce database. SOQL provides syntax to support queries from multiple object types, called relationship queries, against standard objects and custom objects.
CSS	Use Cascading Style Sheets (CSS) to style your Flexcards. To bundle a set of styles with a component, create a style sheet with the same name as the component in the component’s folder. The stylesheet is automatically applied to the component. If you want to style a component with one or more stylesheets, configure the stylesheets static property.
HTML	HTML is the standard markup language used to create and structure content on the web, and it provides the structure for your Omnistudio components when they’re published.
DOM	The Document Object Model (DOM) is a programming interface for web pages. It includes all of the pieces of a web page—the HTML, CSS, and more. Using the DOM, you can work with a page’s content, structure, and style.

Omnistudio Developer Tools

Omnistudio uses several Salesforce standard developer tools to create applications and processes for digital interactions. It also provides tools to migrate components between environments for testing and deployment. These tools enhance productivity, improve collaboration, and ensure the delivery of high-quality, industry-specific applications. Review these tools in this section to learn more about them.

Salesforce Lightning Web Components

Salesforce Lightning web components are a framework to build custom user interfaces, web and mobile apps, and digital experiences on Salesforce.

Lightning web components are custom HTML elements built using HTML and JavaScript. Lightning Web Components use core Web Components standards and provide only what’s necessary to perform well in browsers supported by Salesforce. Because it’s built on code that runs natively in browsers, Lightning Web Components are lightweight and deliver exceptional performance. Salesforce Lightning Experience is built on the Lightning Design System. More on that in the next section.

To develop Lightning web components, you create:

An HTML file: HTML provides the structure for your component.
A JavaScript file: JavaScript defines the core business logic and event handling.
A CSS file (Optional): CSS provides the look, feel, and animation for your component.

Omnistudio uses the power of Salesforce Lightning web components to create lightweight Flexcard and Omniscript components. Omnistudio Lightning Web Components follow the same standards as Salesforce’s Lightning Web Components.

Salesforce Lightning Design System

The Salesforce Lightning Design System (SLDS) provides the resources to create user interfaces consistent with Salesforce Lightning principles, design language, and best practices. Designers can use case-specific patterns to iterate faster and create cohesive solutions more efficiently. Developers always have the latest framework, with clean, accessible markup and pixel-perfect CSS, to help them work faster with fewer errors.

The new Salesforce Lightning Design System 2 (SLDS 2) is the latest design system for Lightning Platform products. SLDS 2 is the foundation of Salesforce’s agentic design system. SLDS 2 uses CSS custom properties and offers new tools that make it easier to validate, migrate, and create components. You can use SLDS 2 in Omnistudio to create consistent, accessible, and scalable user interfaces like Flexcards and Omniscripts across your applications and platforms.

Newport Design System

The Newport Design System is a CSS framework specifically developed for Salesforce Industries to provide a customizable style guide for Omniscript components. With the new standard designers, you can customize your Omniscripts directly within the Omniscript designer canvas, and preview it. The system offers Newport and Newport Storybook themes in addition to the existing Lightning theme. You can fully customize your Omniscripts to incorporate your specific set of brand guidelines and design specifications.

The Newport Design System is designed for both designers and web developers. It provides a central framework with custom, optimized CSS files for consistent rebranding and restyling of Omniscripts. By integrating this feature directly into the designer canvas, Omnistudio streamlines the design process and enhances the overall user experience.

Salesforce Command Line Interface

The Salesforce Command Line Interface or Salesforce CLI is a powerful command-line interface that simplifies development and build automation when working with your Salesforce org. With it, you can easily create environments for development and testing, sync source code between your orgs and the version control system (VCS), and migrate components between two orgs. It’s a single command-line interface for all Salesforce developer experience (DX) features.

You can use Salesforce CLI to:

Aggregate all the developer tools and perform commands against your Salesforce org.
Sync source code to and from scratch orgs.
Create and manage orgs.
Import and export data.
Create and execute tests.
Create and install packages.

In Omnistudio, you use Salesforce CLI to move components between different orgs for testing and deployment.

Visual Studio Code

Visual Studio Code or VS Code is the go-to code editor for Salesforce developers. It’s free, open-source, and available for Windows, Linux, and Mac OS. This editor has easy-to-install extensions for syntax highlighting, code completion, and more. You can use VS Code to extend Omnistudio’s capabilities with custom Lightning Web Components (LWCs). You can also use it to manage and deploy Omnistudio metadata using Salesforce CLI and Salesforce Extensions for VS Code.

Wrap Up

In this module, you discovered the latest version of Omnistudio, including the Omnistudio assistant tools. You met the Omnistudio designers and reviewed some best practices and technical background for developing Omnistudio solutions.

Equipped with your newfound Omnistudio knowledge, you’re ready to start designing modern digital apps and web sites for your end users to help expedite their many jobs to be done.

Time Estimate

Topics

Looking for Help?

Industry Solutions Resources