Labels in Custom and Live components procedure - Fluid Topics - Latest

It is possible to use localized labels directly in Custom and Live components.

Examples

Using the <ft-localized-label> HTML element, it is possible to access:

• Custom labels:

  <ft-localized-label context="$CONTEXT_ID" key="$KEY_ID"></ft-localized-label>
  

  Replace $KEY_ID and $CONTEXT_ID with the correct information from the custom-$LanguageCode-messages.xml file.

• Official labels:

  <ft-localized-label useofficialcontexts context="officialContext" key="menuMyLibrary"></ft-localized-label>
  

  For example, this displays the following: My Library.

Using the FluidTopicsCustomI18nService and FluidTopicsI18nService JavaScript methods, it is possible to access:

• Custom labels:

  <div class="example"></div>
  

  const context = "$CONTEXT_ID";
  const label = "$KEY_ID";
  
  await FluidTopicsCustomI18nService.prepareContext(context);
  const message = FluidTopicsCustomI18nService.resolveMessage(context, label);
  
  document.querySelector(".example").innerText = message;
  

  Replace $KEY_ID and $CONTEXT_ID with the correct information from the custom-$LanguageCode-messages.xml file.

• Official labels:

  <div class="example"></div>
  

  const context = "officialContext";
  const label = "menuMyLibrary";
  
  await FluidTopicsI18nService.prepareContext(context);
  const message = FluidTopicsI18nService.resolveMessage(context, label);
  
  document.querySelector(".example").innerText = message;
  

  For example, this displays the following: My Library.