When to Build Appian UIs with Custom Code

Overview

Appian is flexible and adaptable to your devices, audiences, and workflows. But with so many options to create beautiful, elegant, and functional user interfaces, you may be wondering which implementation is best for your application and use case.

We encourage all customers to use Appian's out-of-the-box interface components, but we know there are cases where you may need more specific functionality or want fine-grained control of each pixel. In those cases, you could build a custom component plug-in or use Appian with a custom website. However, these two high-code approaches require careful planning and implementation.

Before you start building a component plug-in or custom website, you are probably considering whether the time and maintenance of high-code development is worth it. This topic walks you through the decision, and lists the benefits and drawbacks of each option.

Determining what design option is best

In most cases, Appian's native components can deliver value quickly, consistently, and with no coding experience required. But, you may find that these components don't quite meet your needs because you need:

• Highly specialized components to fulfill your app's use case
• Control of every pixel on the screen to satisfy strict branding or regulatory requirements

Further, you may have access to high-code developers and an existing library of components. If you have these requirements and resources, you can extend your interfaces using component plug-ins or custom websites. But which one should you pursue?

Prerequisites

As you weigh the options, it may be helpful to consider the skills required:

Out-of-the-box components:

• Familiarity with SAIL and expressions
• Low-code interface development

Component plug-ins and custom websites:

• Javascript
• APIs
• XML
• CSS
• HTML
• Additional skills depending on desired functionality

Pros and cons

The table below weighs the pros and cons of out-of-the-box components, custom components, and custom websites. Use the following table to help determine the best option for your development needs or priorities:

	Description	Out-of-the-box components	Component plug-in	Custom website
Available for low-code developers	Can be added to an interface using low-code configurations.	Yes	Yes	No
Highly customizable	Can be customized to fit most guidelines or requirements.	Yes	Yes	Yes
Reusable across applications	Can be added to multiple interfaces and apps.	Yes	Yes	No
Custom functionality	Can add functionality not available out-of-the-box in Appian.	No	Yes	Yes
Complete control	Create a pixel-perfect UI by determining what every part of the component looks like and how it functions.	No	Yes	Yes
Quick implementation	Start using the component in interfaces right away.	Yes	No	No
Low-code development	Component can be created in low-code.	Available natively in Appian - no development necessary	No	No

Example use case

To help demonstrate the decision-making process, let's consider an example use case:

HealHaul is a medical device company that uses Appian to manage shipments and inventory for hospitals and clinics across the United States. They want to build an interface that allows personnel at these hospitals and clinics to easily check the progress of their shipments and see its location on a map in real-time.

Currently, clinic workers need to contact the operations team at their organizations, who then go directly to the postal website to track the location. HealHaul wants to display tracking information alongside other details, such as package contents and ordering information, so more people know when to expect the supplies they requested. The people who want to see this information are registered users of the system.

HealHaul sees that Appian doesn't currently offer a map component, and there is no live tracking map component plug-in available on the AppMarket.

Should HealHaul build a custom component or a custom website?

At this point, HealHaul developers don't plan to overhaul the existing application or interfaces for their users. They only want to add this functionality and embed it on their existing interfaces (built in Appian). In their situation, it makes more sense to build a custom component to implement in a low-code interface.

Benefits of building a custom component

This section describes the benefits of a custom, high-code interface component in Appian.

Build for low-code developers

When you create a component plug-in for Appian, low-code developers can use it seamlessly in their applications. Component plug-ins appear alongside other components to use in Design mode, where you can drag-and-drop them into your interface for precise placement among other components. Your developers can also easily configure the data that powers each component without ever having to look at a line of code.

Example: As the high-code developers work on the plug-in manifest, they create parameters that allow low-code developers to configure the data that powers the component, using plain language that makes sense in their application. For example, the high-code developer creates a "location" parameter for the Google Maps component, and includes a specific description on how to use the parameter and what data type it accepts as input.

Build to fit into your existing workflows

If you need additional component functionality that's not available natively in Appian, you can build a custom component to fit right into your existing workflows and configurations.

Example: HealHaul needs to add real-time package tracking into their inventory management application. They already use the shipping service APIs to report the status of a package in an interface, but now they want to display it in a map as well. With custom component plug-ins, HealHaul can build the component to use the parameters they already use to pass data between application objects, making the map component easy to integrate.

Build based on existing components

Leverage Appian's existing library of components to start building a custom component plug-in. You don't have to build a custom component from scratch, so you can bring the component from idea to reality faster.

Example: HealHaul is ready to start building the map component. They visit Appian's GitHub repository with component plug-in examples and follow the instructions in the tutorial.

Build for reusability

Once installed by an Appian administrator, custom components are available to any Appian developer when they create interfaces in their application. Your custom components are used just like the components that ship with Appian. They're fully interactive, with the ability to both send and receive data from the interface.

Additionally, if you want to share your work, component plug-ins can be listed on the Appian AppMarket where Appian customers can find and use them. We review all submissions to ensure they meet our standards for customer use.

Example: The HealHaul development team has created, tested, and deployed the Google Maps component! Now they're able to use it in the inventory tracking app. Other applications within the environment can also use the component if they need to embed a map in their interfaces.

Ready to start?

Thinking of dabbling in custom Appian components? Whether you have a clear idea or are just exploring the possibilities, we want to enable your creativity. That's why we've created a tutorial to develop a sample component plug-in that uses Google Maps, just like the example used throughout this page.

When you're ready to build component plug-ins for your own use case, Appian has created a wide set of resources to inspire and guide your interface development. Not sure where your custom component plug-in should appear? Our SAIL Design System provides extensive guidance based on established user experience principles. You're sure to find some guidance and inspiration to help you along the way.

Feedback