Skip to main content

Updating and Adding Screenshots

This document is a recommendation how to update or add screenshots to the documentation. It is not a strict guideline, but a suggestion how to keep the documentation consistent and easy to maintain.

First, there will be some general recommendation, while next, you will see recommended steps to reach a given UI state per corresponding screenshot.

General Recommendations​

Common Screenshot Size​

TL;DR: Use device terminal emulation with viewport size 1920x1080.

To best align the sizes of the screenshots, it is recommended to use the browser's developer tools to set the viewport size to a common value. This ensures that the screenshots have a similar size and are easier to compare.

The following steps are recommended to create a screenshot:

  1. Open the page in the browser.
  2. Open the development tools (F12).
  3. Toggle the device terminal emulation (Ctrl+Shift+M).
  4. Set the viewport size to a common value (e.g., 1280x800).

To take the screenshot, you may also use the development tools of the browser:

  1. Open the development tools (F12).
  2. Select the <body> element.
  3. Right-click the element and select "Capture node screenshot".

For dynamic elements it may be easier just to use tools such as Greenshot, for example.

Translation Settings to be adapted for screenshot scenarios to be found at

  • /Settings/Options/Settings/Translation Services/GlobalLink

It is recommended to add this to your bookmarks while working on the screenshots.

All the steps below assume, that you have set the GlobalLink connection type to mock. This is recommended as some relevant states cannot be reached in the GlobalLink backend, or are hard to reach.

Also, you should align the delays and retry counts to the following values (excerpt of the Struct property):

globalLink:
  # String
  type: mock
  # Boolean; changed within manual test steps
  isSendSubmitter: false
  # String
  sendTranslationRequestRetryDelay: 1m
  # String
  sendTranslationRequestEarlyRetryDelay: 1m
  # String
  downloadTranslationRetryDelay: 1m
  # String
  cancelTranslationRetryDelay: 1m
  # Integer; change existing value
  retryCommunicationErrors: 1
  # Mock settings to possibly adapt.
  mock:
    # ...

User​

Unless specified otherwise, use the user Rick C to log in to CoreMedia Studio.

Sites​

  • Preferred Site: Chef Corp. (en-US) (should be the default site for Rick C)
  • Target Site: Chef Corp. (de-DE)

The description assumes, that you have adapted the de-DE site by adding:

  • Site Manager Groups: For de-DE, add manager-c-en-US

This allows taking screenshots without the need to switch users/sessions.

Content​

While not all screenshots have to be taken with the same content, it is recommended to reuse content where possible. If you set up the content as described here, you can reuse it for the screenshots described in this document.

  • Create a picture document named Press Release Image with the following image:

    Press Release Image

  • Create a new article named Press Release. Add the picture to Pictures and Other Media.

  • As "Article Text" (en-US) use (as a suggestion; generated by GitHub Copilot):

    We are excited to announce the release of the new CoreMedia GlobalLink connector! This update brings a host of shiny new features designed to enhance your translation workflow, including improved integration with GlobalLink, faster processing times, and a more intuitive user interface. Upgrade now to experience the best in content localization and management.

  • Add the content to the Chef Corp. Homepage, for example, at Placement 1.

TIP: Annoying Spellchecker

If you have a spellchecker enabled in your browser, it may highlight the text as having spelling mistakes. To disable it, while you are in developer tools, adjust the <body> element adding the attribute spellcheck="false".

As an alternative, type into the console:

document.body.spellcheck=false

Screenshot Advice​

Sorting: Screenshot advices should be sorted by the file name of the screenshot they are referring to.

gcc-connect-error.png​

A screenshot representing an upload communication error in the GlobalLink connector.

  1. Translation Settings: Set mock.scenario to gcc-outage-on-upload.
  2. Workflow:
    • Start a translation workflow for the article Press Release to de-DE.
    • As workflow name choose Press Release with GlobalLink.
  3. Workflow App: From the "In localization" badge, for example, open the workflow within the Workflow App.
  4. Accept User Task: As soon as available, accept the user task named Upload error.
  5. Next Step: Click the Next Step button to show the corresponding dialog, that will also contain the error message.

Cleanup: Consider selecting Rollback to end the workflow.

gcc-redelivered.png​

A screenshot representing a redelivered submission state in the GlobalLink connector.

  1. Translation Settings:
    • Set mock.scenario to submission-redelivered.
  2. Workflow:
    • Start a translation workflow for the article Press Release to de-DE.
    • As workflow name choose Press Release with GlobalLink.
  3. Workflow App: From the "In localization" badge, for example, open the workflow within the Workflow App.
  4. Accept User Task: As soon as available, accept the user task named Review translation (Redelivered).

Cleanup: Skip cleanup, if you want to continue with the next screenshot scenario. Otherwise, consider accepting the user task and selecting Rollback to end the workflow.

gcc-redelivered-upload-xliff.png​

A screenshot representing a typical process during redelivered submission handling, which is to manually upload the XLIFF file received from the translation agency after a redelivery.

Screenshot Tool Recommended: As we are about to screenshot an element (a tooltip) that will disappear on the mouseout event, it is recommended to use an external screenshot tool, to trigger the screenshot via a hotkey. If possible, adjust your screenshot tool to also capture the mouse cursor.

  1. Prepare the redelivery scenario as described in the previous screenshot advice.
  2. Workflow App: To have just any XLIFF file at hand, you can click on Issue Details » Click to download to get a ZIP file containing the XLIFF. Unpack the ZIP and keep the XLIFF file for the next step.
  3. Content App:
  • Minimize the preview before taking the screenshot. The currently opened document will appear as background to the start workflow window.
  • Close all tabs despite the Press Release (en-US, active tab).
  • Open the workflow in the sidebar, thus, click on "Show Workflow" button within the "In Localization" badge.
  • Click on Upload to open the upload dialog and select the XLIFF extracted in the previous step as a file to upload.
  • Move the upload dialog closer to the Upload button, so that the main focus of the screenshot is on the connection between the button and the dialog.
  • Hover the mouse cursor over the Upload button to show the tooltip for that button.

Cleanup: Consider selecting Rollback to end the workflow.

gcc-running.png​

A screenshot representing the running workflow when opened in the Workflow App.

  1. Translation Settings: Ensure, that no scenario is selected.
  2. Workflow:
    • Start a translation workflow for the article Press Release to de-DE.
    • Ensure, that the article Press Release is added as dependent content.
    • As workflow name choose Press Release with GlobalLink.
  3. Workflow App: From the "In localization" badge, for example, open the workflow within the Workflow App.
  4. Status: To have an alike screenshot over versions, wait for the field Status to switch to "Delivered".
  5. Contents: Expand the Contents section to show the content to be translated.

Cleanup: Consider accepting the user task and selecting Rollback to end the workflow.

gcc-select-type.png​

A screenshot that shows the Start Translation Workflow Window while selecting the localization workflow type.

Screenshot Tool Recommended: As we are about to screenshot an element (the dropdown) that will close on the blur event, it is recommended to use an external screenshot tool, to trigger the screenshot via a hotkey. If possible, adjust your screenshot tool to also capture the mouse cursor.

  1. Translation Settings: Ensure, that no scenario is selected.
  2. Content App:
    • Minimize the preview before taking the screenshot. The currently opened document will appear as background to the start workflow window.
    • Close all tabs despite the Press Release (background tab) and the homepage (active tab).
  3. Workflow:
    • Trigger start of a translation workflow for the homepage to de-DE.
    • Select Translation with GlobalLink as workflow type.
    • As workflow name choose Press Release with GlobalLink.
    • Open the Workflow Type selection combo.
    • Hover the mouse cursor over the Translation with GlobalLink option.

Cleanup: Just don't start the workflow, but cancel the dialog.

gcc-settings.png​

A screenshot that gives an impression on the GlobalLink settings document and its location.

  1. Translation Settings: We need a little trick not to break our other screenshot scenarios, but also only provide a minimal set of settings relevant for in-production use. Just create a copy of GlobalLink settings document in the home-folder of Rick C, for example. Remove all settings despite:
    • url
    • key
  2. Content App:
    • Open your copied settings document.
    • Close the preview.
    • Open the library view by clicking on the content path in the System tab of the original GlobalLink settings document.
    • Dock the library to the right side.
    • Move the splitters around, so that you get the best view on relevant parts of the settings document as well as in the library. Also, consider hiding irrelevant columns in the library.
    • Close all other tabs but that for the "mocked" settings document.

gcc-start-wf.png​

A screenshot that provides a hint on how to start a translation workflow.

UX Hint: Depending on updates in context of the workflow UI, new concepts for starting translation workflows may be introduced and preferred as "ease of use" pattern. Please consider this when updating the screenshot.

Screenshot Tool Recommended: As we are about to screenshot an element (the dropdown) that will close on the blur event, it is recommended to use an external screenshot tool, to trigger the screenshot via a hotkey. If possible, adjust your screenshot tool to also capture the mouse cursor.

  1. Content App:
    • Close all tabs despite the Press Release (background tab) and the homepage (active tab).
    • Minimize the preview before taking the screenshot. The currently opened document will appear as background to the start workflow window.
  2. Start Workflow Trigger: Open the Locale Switcher. If your screenshot tool supports capturing the mouse cursor hover it above "Start localization".

Cleanup: Just don't start the workflow, but close the dialog.

gcc-success.png​

A screenshot that shows the task "Review Translation" in the Content App along with the differencing view.

  1. Translation Settings: Ensure, that no scenario is selected.
  2. Content:

    • Process a first translation workflow for the article to de-DE.

      You may just use any translation workflow. Consider using the standard Translation workflow that ships with CoreMedia Blueprint.

    • Update the content to mark "CoreMedia GlobalLink connector" as bold.

  3. Workflow:
    • Start a translation workflow for Press Release article to de-DE.
    • As workflow name choose Update Press Release.
  4. Content App:

    • Close all other tabs despite the Press Release article.

    • Open the workflow in the sidebar (for example, click on "Show Workflow" button within the "In Localization" badge)

    • Accept the user task.

    • Double-click on the Press Release article in the workflow's content set to open the differencing view.

    • Change the pseudo-translated title just to Press Release.

    • Override the pseudo-translated result with this suggested translation:

      Wir freuen uns, die Veröffentlichung des neuen CoreMedia GlobalLink Connectors bekannt geben zu können! Dieses Update bietet eine Vielzahl neuer Funktionen, die Ihren Übersetzungs-Workflow verbessern, darunter eine verbesserte Integration mit GlobalLink, schnellere Verarbeitungszeiten und eine intuitivere Benutzeroberfläche. Holen Sie sich jetzt das Upgrade und erleben Sie das Beste in Sachen Inhaltslokalisierung und -verwaltung.

    • Check-in the modified content.

    • Move the separators around to have a good view on the overall scenario.

Cleanup: Consider accepting the user task and selecting Rollback to end the workflow.