Recommendations for front-end development of a Marketplace app

Beginner

The negative user experience in installing, configuring, and starting work with the app is one of the main factors that significantly reduce the probability of purchasing an app after a trial. Potential customers often perceive apps negatively because they require complex and time-consuming setups.

Follow the recommendations for the front-end development of a Marketplace app and requirements from a separate article: Requirements for Marketplace app, to avoid a negative user experience.

Recommendations for the front-end development of a Marketplace app:

  • set up the Marketplace app navigation
  • preconfigure the Marketplace app
  • develop the Marketplace app based on the base Creatio functionality
  • add a custom icon of the Marketplace app section

Set up the Marketplace app navigation 

The Marketplace app navigation streamlines the following actions:

  • searching for the required Marketplace app
  • opening the required Marketplace app functionality
  • using the functionality

To set up the marketplace app navigation, take the following steps:

  1. Add the app section to a workplace.
  2. Add the link to the app setup page to the System Designer.
  3. Configure the transition to the settings from the section actions menu.

1. Add the app section to a workplace 

It is the required step for the Marketplace app with the new Creatio section. To add the app section to a workplace, follow the instruction in a separate article: Set up workplaces.

View an example that adds the custom Chats section to a workplace below.

Example that adds the custom Chats section
Add the custom Chats section to the Sales and/or Marketing workplace. Create a single workplace and add the Chats custom section.
Do not add the custom section to any workplaces.

2. Add the link to the app setup page to the System Designer 

Creatio lets you add the link to the app setup page to the settings blocks of the System Designer specified in the table below.

Settings blocks of the System Designer
Settings block
Purpose
How to use for a Marketplace app
Import and integration Use the block to transition to any integration settings page and import the records. Block can use for connectors.
System setup Use the block to transition to the page and configure the system behavior. Block can use for transition to the wizard that manages the add-on behavior and vertical solution logic.

3. Add the link to the app setup page to the section actions menu 

Users understand they need to perform additional setup after they review the Marketplace app functionality on the corresponding Creatio page. To enable users to perform the required setup add the corresponding item to the ,Actions button menu on the section page and/or record section page.

View an example that adds the custom setup page with authentication settings for a third-party app in the table below. In this example, custom Integrations Creatio section interacts with a third-party app.

Example that adds the custom setup page with authentication settings for a third-party app
Add the Set up connection to the third-party app item to the Actions button menu of the custom Integrations section. Implement a setup page accessible only via a URL.

Preconfigure the Marketplace app 

Use the following Creatio no-code tools to preconfigure the Marketplace app:

  • System settings section
  • Lookups section
  • user profile
  • dedicated setup page

Preconfigure the app in the System settings section 

Learn more about the System settings section in user documentation: Manage system settings.

Follow these recommendations when you add a new system setting:

  • Use short system setting names. Ensure the system setting name represents its behavior and specifies the relevant functionality.
  • Group system settings into folders. Grouping lets a user find the necessary system setting without knowing its name. Learn more about folders in user documentation: Folders.
  • Add system setting descriptions. Description lets a user understand the purpose and usage of the system setting.
Examples that use short and clear names for system settings
"Base currency"

"The currency that is used in the app by default"

Not recommended because it is too long.

"Order status by default"

"Order status"

Not recommended because it does not represent the behavior.

"Automatic start of the incident management process"

"Automatic launch of the process"

Not recommended because it does not specify the relevant functionality.

Preconfigure the app in the Lookups section 

Learn more about the Lookups section in user documentation: Manage lookup values. To create a lookup, follow the instruction in user documentation: Create new lookups.

Lookup use cases
Business goal
Lookup
Lookup description
Lookup values
Specify the index of data to select Document statuses Contains an index of document statuses during the workflow.

"Active"

"Inactive"

"Draft"

Populate the field automatically during integration Lead channels The lookup contains a list of resource types to receive the lead.

"Social accounts"

"Search-based advertising"

"Email"

Customize business logic Case notification rule Contains an index of rules for sending notifications to the contact about the progress of their case.

"Send immediately"

"Send after a delay"

"Disabled"

Specify a system index Webitel users Contains an index of Webitel users.  
Display the functionality in different Creatio sections Gantt chart configuration Contains an index of Gantt chart settings.  

Preconfigure the app in the user profile 

Individual settings of a specific user are listed in the user profile. For example, individual login/password for authorization in a third-party app or preferences for using certain product functionality.

Examples that use the settings in a user profile:

  • Integration connection settings.

    • The ID of the telephony operator or the phone number that enables the user to use the telephony connector.
    • Mail service connection settings for the user.
  • System behavior settings for the user.

    • Notification settings.
    • Default language the user uses in the business card scanner.

Preconfigure the app in the dedicated setup page 

The single settings page is a user-friendly but difficult-to-implement way to manage the Marketplace app settings.

The users can open the dedicated setup page in the following ways:

  • corresponding section
  • System Designer

We recommend using a dedicated page for Marketplace app settingsin the following cases:

  • The setup has a specific sequence.
  • The setup process requires the population of settings and lookups.
  • The setup process requires additional actions besides filling in the settings and lookups.
  • The setup process includes both the preconfiguration and additional setup as part of working with the Marketplace app.

Set up secure password storage 

Creatio implements methods for secure password storage. These methods let you store user passwords and secret connection keys for external systems, for example, Secret key, domain token, etc.

To store passwords securely, use the following data types:

  • Encrypted string type for the System settings section
  • Encrypted string type for string fields of Creatio objects

Note. The values of Encrypted string fields are not available in the front-end.

Develop Marketplace apps based on the base Creatio functionality 

Development based on the base Creatio functionality implies the correct population of fields when creating leads via Marketplace apps. Creating leads when the Creatio is integrated with messengers, chats, landing pages, or social networks is one of the typical integration tasks. When a lead is created automatically, it is necessary to keep the correct logic of filling the fields on the lead page, including data about lead generation channels. The developer of the Marketplace application lets users provide the ability to use end-to-end analytics on leads. Match the name of the field to its purpose.

Examples of lead field names
Name
How to use
Registration method

Lead registration methods:

  • created automatically
  • added manually
  • an incoming call or email
  • landing page
  • case
Channel

Lead origin types:

  • web
  • social networks
  • offline advertisement
  • event
  • recommendation or personal contact
Source The name of the specific lead origin resource, for example, Twitter, Google, etc.
Transition website The website from which the user clicked on the landing page resulted in a registered lead in the app. The field is non-editable and populated automatically when a lead is received from the landing page.

Add a custom icon of the Marketplace app section 

Make sure your icon for the custom section of the Marketplace app meets the requirements from a separate article Requirements for Marketplace app.

You can obtain the appropriate custom section icon in the following ways:

  • Use the section icon library available via the link
  • Use a free service that searches for and converts flat icons.

Integrate the Marketplace app with Creatio 

Creatio enables a range of methods for integration with the Marketplace app. Learn more about the available Creatio integration options in a separate article: Integration options.

Authentication is required to access Creatio, as with third-party apps. For app integration, we recommend using the Forms authentication method implemented using the AuthService.svc web service. Learn more about the authentication types Creatio supports in a separate article: Authentication.

Attention. Do not use the anonymous web services without implementing an alternative authorization type in the Marketplace app. Learn more in a separate article: Custom web services.

Interact with Creatio via the DataService data service or OData protocol. Learn more in a separate guide: Data services. Creatio also lets you use the iframe HTML element for Marketplace apps. Learn more in a separate article: HTML-element <iframe>. You can use the Web-To-Object mechanism for simple integrations. Learn more in a separate article: Web-To-Object.