How to Translate a Visual Composer Model – Part I · How to Translate a Visual Composer Model – Part I Applies to: SAP NetWeaver Visual Composer. Summary This “How To” guide

How to Translate a Visual Composer Model – Part I

SAP DEVELOPER NETWORK | sdn.sap.com BUSINESS PROCESS EXPERT COMMUNITY | bpx.sap.com © 2007 SAP AG 1


Applies to: SAP NetWeaver Visual Composer.

Summary This “How To” guide is the first part in a series of guides which explain how to create and maintain translations for UI strings in iViews modeled in Visual Composer. This guide explains how to translate an iView using the Portal Translation Worklists. We will learn how to create a translation work list, populate it and publish our translation. *** All standard plain texts in the model – such as field labels, button labels and tooltips – are entered automatically into the translation lists. However, dynamic text – such as field values – cannot be entered. In the next guides I will explain how to translate formulas with strings and how to maintain a model with translation. Author: Shay Gold Company: SAP Created on: 9 July 2007

Author Bio Shay Gold is a Math and Physics B.Sc student at the Hebrew University of Jerusalem and is part of the Visual Composer QA Team.



Table of Contents Introduction ...................................................................................................................................... 3 Modeling an Application to be Translated in Visual Composer ....................................................... 4 Adding the Nested iView to the Model Folder in the Portal Content ............................................... 7 Translating the Model using the Portal Translation Worklist ......................................................... 10

Creating the Translation Worklist............................................................................................... 10 Populating a translation worklist ................................................................................................ 11 Model Translation....................................................................................................................... 13 Publish the Translation............................................................................................................... 15

Related Content............................................................................................................................. 18 Copyright........................................................................................................................................ 19 Copyright........................................................................................................................................ 19



Introduction You can translate Visual Composer models by using the standard portal translation worklists mechanism. But first, you need to understand what happens when you deploy a model created in Visual Composer to the portal to which you are connected. The models are deployed as Portal Archive (PAR) packages, and are stored in the Visual Composer folder in the Portal Content Directory (PCD). In addition, a folder with a representation of the model primary iView is created in the content administration section. (Content Administration -> Portal Content. Browse Tab -> Portal Content -> Visual Composer -> Models -> Your model folder). You will use these representations for the translation process. Notice that Nested iViews, popups and value helps representations are not automatically added to the model folder in the Portal Content. If your model includes one of this, you need to add their representations manually. You can find a detailed explanation of how to do it in the next two paragraphs.



Modeling an Application to be Translated in Visual Composer This paragraph explains the necessary actions you need to perform in Visual Composer before translating a model. Create a Visual Composer model. For this article I created a model (Translation_Demo) which consists of a data service, input form, output table and a nested iView with a form. Translation_Demo Model -

Translation_Demo Layout -



As mentioned at the first paragraph, the representation of the Visual Composer model in the Portal Content section, automatically includes the model primary iVIews but not the nested iView. In order to manually add the nested iView to the folder, you need to know the iView ID. You can find the ID by drilling-down the nested iVIew and selecting the Configure task panel. At the lower right corner of the configure task panel you can find the label “REF: AAD735”, this is the iVies ID. Remember the ID, you will later need it for adding the iView to the Portal Content folder. Do the same for any nested iVIew, popups and value helps you have in your model.

Navigate to tools menu -> Options… -> Compiler tab and check that the “Generate Translation Info file” option is selected. This option creates two translation files when the models are compiled: localization.properties – with all the string identifiers and raw text from the model. package_lang.info - a portal-like translation worklist file, including the portal UI-string classification codes.



Select also the “Deploy model with PAR” option. This option is important in case you want to be able to modify an already translated model and will enable you to open the model in storyboard directly from the portal and redeploy it with the changes. (I will show exactly how to modify an existing model and translate it in the next article).



Adding the Nested iView to the Model Folder in the Portal Content After deploying the model to the portal, we can find the primary iView representation in the Portal Content section under Translation_Demo folder -> iviews.

We can see that the iViews folder includes a representation for the Primary iView but not the Nested iView. We want to translate the nested iView as well, so we will now add it manually to the folder: Right-click the iViews folder and open the context menu. In the context menu, choose new -> iView. This will open the iView wizard. In the iView Wizard select the “Portal Component…” radio button and click on the Next button (at the bottom of the page).



Select the nested iView from the Portal Archive Selection list. You can easily find the iView according to its ID and name. (In this case 735.Nested_iView). And then click

Next. Select the Portal Component (equal to the REF ID) and click Next.



Give the nested iView a Name and ID and click Next.

At the next window click Finish and then OK – to close the wizard.

That’s it, a new nested iView representation is added to the model folder. You can add more instances to the folder in the same way.



Translating the Model using the Portal Translation Worklist

Creating the Translation Worklist Navigate to Content Administration -> Portal content Translation -> Translation Worklist Coordination. We would like to have the model and the translation worklist in the same folder, for that Browse Portal Content -> Visual Composer -> Models.

Right-click the model’s folder and select New -> Translation Worklist.

In the Translation Worklist Wizard enter a Name and ID for the worklist and click Next, Finish and OK (OK for opening the worklist for editing).



Populating a translation worklist When the Translation Worklist is open, right-click the element you want to add, and choose “Add object to translation worklist”. You can also right-click a folder and choose to add all objects to the worklist.

In the Translation Worklist property editor, select the Translation Worklist Settings from the property category dropdown list. Select Yes for the Resolve References property. This property creates a text-container object named localization for each iView. What enables us to translate the model labels, and not only its metadata. Click Save.



Click the “Generate Translation Data” button.

Verify that the localization records appear in the translation worklist preview. In this example we have two localization elements, one for the primary iView and one for the nested iView.



Click the “Release for Translation” button (at the bottom of the Translation Worklist Preview” window). The status of the translation worklist will change to "Released for Translation". From that point you can’t add new objects to the worklist.

Model Translation In the detailed navigation, click on the “Worklist translation” link and search for your worklist. Notice that the worklist won’t appear if it wasn’t released as explained in the prior step. Select your worklist from the list and drill down the page.



Set the source language to raw texts (the source text will appear as it appears in the model) and the target language to German and click “Load for Translation”.

In the Translatable Text window, enter a target text for the given strings. Notice that you can translate the model labels (Object ID starts with pcd:com…) and metadata (Object ID starts with pcd:portal…). Be aware that translating the metadata, such as the folder name might make it difficult to trace later. Use the Save All button to save the translation and then click Close. (Important note – If you click one of the navigation buttons (marked in red, at the bottom of the table) after you translate a string, it won’t save your translation for this string. You can either click save before navigating or click on another string’s radio button).



After adding you target text, click “Close”. This action will refer you to the previous window. Select the worklist and click “Mark as “Translated” “. The worklist status will change accordingly.

Publish the Translation In the detailed navigation, select Translation Worklist Coordination and find your worklist. You can drill down to its location or use the search function. Open the worklist and click “Publish Translation”.



To see the translated iView, navigate to Content Administration -> Portal Content. Browse, Portal Content -> Visual Composer -> Models -> Translation_Demo -> iViews. Right-click the Primary iView and choose preview. The model appears in English.

In order to change the portal language settings, return to the portal and click the Personalize link (on the top right corner of the portal page). A popup window appears.

In the Detailed Navigation pane Choose User Profile (If the option doesn’t appear click the Expand Tray button to the right of the Detailed Navigation). Click modify, change the language to German and click Save. (It’s recommended not to close the User Profile window so you will be easily able to change back the language to English).



Refresh the preview of the model iView and get the translated iVIew.

In the next articles I’ll explain how to translate formulas and how to add translation to an already translated iView.



Related Content Please include at least three references to SDN documents or web pages.

• Visual Composer Modeler’s Guide

• Portal Content Translation

https://www.sdn.sap.com/irj/servlet/prt/portal/prtroot/docs/library/uuid/63f2052e-0c01-0010-b9a2-e1f7457a7fbe

http://help.sap.com/saphelp_nw70/helpdata/en/74/641640b7b6dd5fe10000000a155106/frameset.htm



Copyright © Copyright 2007 SAP AG. All rights reserved.

No part of this publication may be reproduced or transmitted in any form or for any purpose without the express permission of SAP AG. The information contained herein may be changed without prior notice.

Some software products marketed by SAP AG and its distributors contain proprietary software components of other software vendors.

Microsoft, Windows, Outlook, and PowerPoint are registered trademarks of Microsoft Corporation.

IBM, DB2, DB2 Universal Database, OS/2, Parallel Sysplex, MVS/ESA, AIX, S/390, AS/400, OS/390, OS/400, iSeries, pSeries, xSeries, zSeries, z/OS, AFP, Intelligent Miner, WebSphere, Netfinity, Tivoli, Informix, i5/OS, POWER, POWER5, OpenPower and PowerPC are trademarks or registered trademarks of IBM Corporation.

Adobe, the Adobe logo, Acrobat, PostScript, and Reader are either trademarks or registered trademarks of Adobe Systems Incorporated in the United States and/or other countries.

Oracle is a registered trademark of Oracle Corporation.

UNIX, X/Open, OSF/1, and Motif are registered trademarks of the Open Group.

Citrix, ICA, Program Neighborhood, MetaFrame, WinFrame, VideoFrame, and MultiWin are trademarks or registered trademarks of Citrix Systems, Inc.

HTML, XML, XHTML and W3C are trademarks or registered trademarks of W3C®, World Wide Web Consortium, Massachusetts Institute of Technology.

Java is a registered trademark of Sun Microsystems, Inc.

JavaScript is a registered trademark of Sun Microsystems, Inc., used under license for technology invented and implemented by Netscape.

MaxDB is a trademark of MySQL AB, Sweden.

SAP, R/3, mySAP, mySAP.com, xApps, xApp, SAP NetWeaver, and other SAP products and services mentioned herein as well as their respective logos are trademarks or registered trademarks of SAP AG in Germany and in several other countries all over the world. All other product and service names mentioned are the trademarks of their respective companies. Data contained in this document serves informational purposes only. National product specifications may vary.

These materials are subject to change without notice. These materials are provided by SAP AG and its affiliated companies ("SAP Group") for informational purposes only, without representation or warranty of any kind, and SAP Group shall not be liable for errors or omissions with respect to the materials. The only warranties for SAP Group products and services are those that are set forth in the express warranty statements accompanying such products and services, if any. Nothing herein should be construed as constituting an additional warranty.

These materials are provided “as is” without a warranty of any kind, either express or implied, including but not limited to, the implied warranties of merchantability, fitness for a particular purpose, or non-infringement.

SAP shall not be liable for damages of any kind including without limitation direct, special, indirect, or consequential damages that may result from the use of these materials.

SAP does not warrant the accuracy or completeness of the information, text, graphics, links or other items contained within these materials. SAP has no control over the information that you may access through the use of hot links contained in these materials and does not endorse your use of third party web pages nor provide any warranty whatsoever relating to third party web pages.

Any software coding and/or code lines/strings (“Code”) included in this documentation are only examples and are not intended to be used in a productive system environment. The Code is only intended better explain and visualize the syntax and phrasing rules of certain coding. SAP does not warrant the correctness and completeness of the Code given herein, and SAP shall not be liable for errors or damages caused by the usage of the Code, except if such damages were caused by SAP intentionally or grossly negligent.

Documents

How to Translate a Visual Composer Model – Part I · How to Translate a Visual Composer Model – Part I Applies to: SAP NetWeaver Visual Composer. Summary This “How To” guide