On the main screen inside Substitution tags, you have the following elements:

  • Key
  • Values - strings that are used in the end-user interface, according to the language set for the generated solution
  • Edit - button used to edit substitution tags
  • Delete - button used to delete substitution tags
  • New value - button used to add a new substitution tag
  • Breadcrumbs menu:
    • Import
      • from JSON
      • from CSV
    • Export
      • to JSON
      • to CSV
  • Search by - search function used to easily look for a particular substitution tag

​
Adding new substitution tags

To add a new substitution tag, follow the next steps.

  1. Go to FlowX Designer and select the Content Management tab.
  2. Select Substitution tags from the list.
  3. Click New value.
  4. Fill in the necessary details:
    • Key
    • Languages
  5. Click Add after you finish.

When working with substitution tags or other elements that imply values from other languages defined in the CMS, when running a process, the default values extracted will be the ones marked by the default language.

​
Getting a substitution tag by key

public func getTag(withKey key: String) -> String?

All substitution tags will be retrieved by the SDK before starting the first process and will be stored in memory.

Whenever the container app needs a substitution tag value for populating the UI of the custom components, it can request the substitution tag using the method above, providing the key.

For example, substitution tags can be used to localize the content inside an application.

​
Example

​
Localizing the app

You must first check and configure the FLOWX.AI Angular renderer to be able to replicate this example. Click here for more information.

The flxLocalize pipe is found in the FlxLocalizationModule.

import { FlxLocalizationModule } from 'flowx-process-renderer';

import { Component } from '@angular/core';

@Component({
  selector: 'app-dummy-component',
  template: ` <h3>{{ "stringToLocalize" | flxLocalize}}</h3>`,

})
export class DummyComponent{
 stringToLocalize: string = `@@localizedString`
}

Strings that need to be localized must have the ’@@’ prefix which the flxLocalize pipe uses to extract and replace the string with a value found in the substitution tags enumeration.

Substitution tags are retrieved when a start process call is first made, and it’s cached on subsequent start process calls.