1 5 6 7 8 9 26 Previous Next

SAP Enterprise Portal

382 Posts

SAPUI5 is HTML5 with additional SAP features - MVC architecture in development, number of libraries. SAPUI5 is based on principle - Build and run on any device. With mobility becoming important requirement for enterprise applications, SAPUI5 gains weightage in new developments across organizations.

 

We have been developing custom applications or customizing SAP standard objects which majorly make use of BAPI, Z function modules, UI is created either using wizard or using tag library code(JSP Dynpage). How and in what all areas does SAPUI5 development differs from these UI technologies? I have tried to collate major points in this context.

 

SAPUI5 is lighter UI technology compared to Web Dynpro. Major difference in development is in the way interaction is done with backend system. In case of Web Dynpro for Java model is created out of BAPI, Z function module or Web Service and interaction is done with backend. In case of Web Dynpro ABAP, interaction happens by directly calling BAPI or Z function module, tables can be directly queried.

 

When it comes SAPUI5, it supports ODATA compliant services for interacting with backend system. It means if we need to transact huge data with backend system, then performance will be at risk. UI Development using SAPUI5 has wizard based UI creation option also. When it comes to usage, SAPUI5 can be run on any device, but not the case with Web Dynpro. SAPUI5 has UI elements specific to mobile platforms.

 

SAPUI5 look and feel is much better compared to Web Dynpro, JSP Dynpage. We can reuse all the developments of Web Dynpro i.e. business logic packaged in function modules. For this we need to wrap them in ODATA compliant services.

 

There are many scenarios for which we need to explore when it comes to development of SAPUI5 applications. Some of them are: Consider a scenario where we need Adobe  print option in SAPUI5 application; consider a scenario where the workflow is involved; consider a scenario in which status has to be saved.

Summary:

Passing Inspection Lot No from Portal to the QE51N Tcode.

 

Symptom:

As soon as access to the QE51N transaction will load the Material Tab. As we are trying to pass Variable (Inspection Lot) from portal which is available in another tab Portal can not find the required value to push to the QE51N.

 

Reason and Prerequisites:

 

From portal we can pass the variables which are available after immediate load of the transaction. In this perspective we can manipulate the QE51N transaction from portal control.

 

To achieve this we need to perform below steps. For the same required to create screen variant for QE51N Tcode to load Inspection Lot Tab as default.

Need full access toe QE51N transition to create a screen variant.

 

Solution: Steps to Implement the solution:

 

Standard Screen of QE51N in ECC

 

11-5-2013 2-56-23 PM.jpg

Calling QE51N web gui transaction before we implement these steps. As portal could not find the inspection Lot filed this transaction will not execute hence will give blanks screen even if we pass value from portal.

 

In our case we are passing value from Portal POWL application. Same case application if pass values from any portal applications.

 

11-5-2013 2-57-26 PM.jpg

 

When calling standard QE51n from Portal the Inspection Lot Number tab should be appear by default.

 

11-5-2013 2-58-41 PM.jpg

Now navigate to QE51N and click on Inspection Lot Number Tab --> Save

 

To avoid standard variant(SAP&TCODE_QE51N) modify the Variant as below.

 

Enter Variant Name, Description and Unchecked all screen assignments except Inspection Lot screen Number. Here Inspection Lot Screen no is 0510.

 

Now here important point to be noted, The name of the variant should be always starts with "SAP_" or "SAP&". Id we user SAP/User Variant we can not transport this Variant to another landscapes. We should implement this variant manually in each layers as part of Cut over activity.

 

If we want to transport these variant we need to maintain the variant name starts with "Cust_" or "Cust&" only. As we all know to manage name with out Z/Y we should need SAP Access Key.

 

If we create variant with user variant like with "U_" this should in user perspective.

 

These all variant naming conditions logic has maintained in the Program "SAPLQEES" which we can see it from Inspection lot Number tab (F1 --> Technical Name). To navigate to this logic: SE38 - SAPLQEES - INCLUDE lqeesf01 - PERFORM VARIANT_START_F10.

 

Code Snippet as below:

 

IF sy-slset IS INITIAL AND sy-calld IS INITIAL AND
sy
-tcode <> 'SE38' AND sy-tcode <> 'SA38'.
*
h_repid
= sy-repid.
CLEAR h_variant.
h_variant
= 'U_'.
WRITE sy-uname TO h_variant+2.
*   User Variant U_<username>
CALL FUNCTION 'RS_VARIANT_EXISTS'
EXPORTING
report  = h_repid
variant
= h_variant
IMPORTING
r_c    
= h_subrc.
IF h_subrc <> 0.
CLEAR h_variant.
h_variant
= 'CUS&TCODE_'.
WRITE sy-tcode TO h_variant+10.
*     Customer variant CUS&TCODE_<sy-tcode>
CALL FUNCTION 'RS_VARIANT_EXISTS'
EXPORTING
report  = h_repid
variant
= h_variant
IMPORTING
r_c    
= h_subrc.
ENDIF.
IF h_subrc <> 0.
CLEAR h_variant.
h_variant
= 'CUS&'.
WRITE sy-tcode TO h_variant+5.
*     Customer variant CUS&<sy-tcode>
CALL FUNCTION 'RS_VARIANT_EXISTS'
EXPORTING
report  = h_repid
variant
= h_variant
IMPORTING
r_c    
= h_subrc.
ENDIF.
IF h_subrc <> 0.
CLEAR h_variant.
h_variant
= 'SAP_TCODE_'.
WRITE sy-tcode TO h_variant+10.
*       SAP variant SAP_TCODE_<sy-tcode>
CALL FUNCTION 'RS_VARIANT_EXISTS'
EXPORTING
report  = h_repid
variant
= h_variant
IMPORTING
r_c    
= h_subrc.
ENDIF.
IF h_subrc <> 0.
CLEAR h_variant.
h_variant
= 'SAP&TCODE_'.
WRITE sy-tcode TO h_variant+10.
*       SAP variant SAP&TCODE_<sy-tcode>
CALL FUNCTION 'RS_VARIANT_EXISTS'
EXPORTING
report  = h_repid
variant
= h_variant
IMPORTING
r_c    
= h_subrc.
ENDIF.

 

11-5-2013 2-58-55 PM.jpg


Here I have given Variant Name as SAP_TCODE_QE51 (Variant Name should starts with SAP_).  Uncheck all screens except 0510 under Screen Assignments.

And Save.

11-5-2013 2-59-17 PM.jpg

 

Restart GUI

 

11-5-2013 2-59-30 PM.jpg

Test QE51N Again now always this transaction will loads Inspection Lot Number tab by default. Should be looks as below

11-5-2013 2-59-57 PM.jpg

 

Testing from Portal – Login Portal - Navigate to Application where you want to pass this inspection Lot no.

 

Should be able to launch executed QE51n web gui transaction which is relevant to the selected value from portal screen.

 

11-5-2013 3-01-22 PM.jpg

 

HAPPY SHARING!

Venky

This is very simple to do. When I needed to do this, I searched scn and found some solutions but all where in terms of Javascript and other things..

I started thinking about the simple solution with my basic HTML knowledge. I am happy that I found a very simple way to do this and would like to share.

 

Step1) If you are new to logon page customisation, you can refer the below given link which explains the steps nicely:

 

http://scn.sap.com/docs/DOC-27909

 

Now you know how to customise logon page and run the project on server from step1. So, the next task is to put a background image for logon page.

 

Step2) put the image that you want as background in the layout folder. In my case the image name is bg3.jpg. better in the resolution is good (around 1350X600)

 

Step3) You need to change the logonPage.jsp for this, below is simple html (shown in bold) that I added to logonPage.jsp:

 

<%@ include file="/mobile/logonPageMobile.jsp" %>

<% } %>

<% if (!otherUiLoaded) {%>

<html><body

    background = "<%=webpath%>layout/bg3.jpg" style=padding:5px;width:1350px;height:500px;border:1px;background-repeat:no-repeat;>

   </body> </html>

<table id="tblFrmUI" width="150px" valign="middle" dir="ltr" align="<%=uiFrameAllign%>" cellPadding="0" cellSpacing="0" style="background-color:#FFFFFF; <%=uiFrameTopMargin%>">

  <% if(uiFrameVisible){ %>

 

Step4) Save and run the project as you did in step1.

 

This would set the image bg3.jpg as background image in logon page.

 

 

bg_logon_screen.png

Dear Portal Community!

 

While I am preparing my laptop with interesting presentations and latest showcases about the portal portfolio, I am also getting excited about all the opportunities to meet with our customers, partners, mentors and evangelists. SAP TechEd is truly an amazing event - bringing all the experts from across the globe together for exchanging latest product insights, success stories and best practices.

 

This year we prepared again valuable roadmap and overview sessions including cool demos for you:

  • SAP HANA Cloud Portal: our flexible portal platform as a service (pPaaS) for building attractive business sites and extending on-premises and cloud scenarios across devices
  • SAP NetWeaver Portal 7.4: our proven user experience platform leveraging SAP HANA platform, unifying access to business information, services and apps (SAP or 3rd party)
    • Mobile Portal: our web-based, end-to-end, personalizable mobile entry point and user experience to quickly access content and applications (incl. SAP Fiori integration)
  • SAP HANA UI Integration Services: a common set of UI services to enrich and increase development efficiency of HANA native app development

 

The overview blog on “Portal Sessions @ SAP TechEd” provides further details about the various sessions on each of the topics.

 

In his video message Amir Blich shares which important portal-related highlights you can expect at SAP TechEd this year:

 

   

 

For the full educational package you can take advantage of various session formats to get in touch with our onsite portal experts Ifat, David, Segev, Ohad and Udi:

  • Lecture presentations provide an overview from the big picture down to the technical level
  • Hands-on sessions allow you to test-drive and experience our solutions in action
  • Networking sessions foster individual one-on-one discussions and knowledge exchange
  • MiniCode Jam encourage you to explore latest innovations on code-level
  • Customer sessions share insights and recommendations from real projects

 

Our session recommendations may help you identifying the right sessions for you:

SAPTechEd_Portal_Sessions_Amsterdam.png

 

Feel free to use the new SAP TechEd Mobile App and Agenda Builder to mark your favorite sessions, so you do not miss any of them!

  

If you are interested in live social media reporting and impressions just follow us on Twitter http://twitter.com/portal_sap and join the discussions via #SAPPortal, #HANACloudPortal, #SAPTechEd. #MobilePortal

 

Looking forward to meet you @SAPTechEd!

Thomas

Hi SAP Portal Community,


When we set up an external facing portal demo use case some time ago, I noticed that it is not easy to find all relevant information in one single place. Of course, there is lots of information in the documentation and on SCN, but still you have to find it. That’s why I decided to create one single blog to bring the information from these different sources together in one place without explaining everything again.

 

Here are some things you should consider what setting up anonymous logon for your portal:

 

  1. Portal

 

Setting up anonymous logon is described really nicely in the portal documentation. Read Configuring Anonymous Logon with Named Anonymous Users to get an overview of the steps.


In some cases you might not want to use standard URL alias /portal/anonymous for your anonymous users. In this case, you could either redirect the standard portal URL to the anonymous portal as described in the same article in the documentation. Or you might want to create a different portal alias and use this for anonymous access. Here is how to do that:

  • Open System Administration > Portal Display > URL Alias Manager
  • Create a new Alias Manager
  • Enter the alias which you want to use for anonymous login as name and select the Enable anonymous user access check box. Click save.

URL Alias.png

  • Open the master rule collection and assign a portal desktop to the newly created URL alias.


Web Dynpro: By default, the portal does not allow to open Web Dynpro content with an anonymous user. To allow this, you have to assign permissions for the component WebDynproPageBuilder to the anonymous user or group. This is described in detail in note 1031159 .

 

 

     2. Knowledge Management

 

Anonymous logon to Knowledge Management is often needed for external sites, even when you do not want to use it for sharing documents with external users. But you might want to display images as part of the portal desktop or the login page. In this case, you need to adapt some settings in KM configuration for enabling anonymous access. See note 837898 for details.
Besides that, you have to set the authentication scheme property to anonymous for KM iViews .You can find a really old (NW 04), but still valuable guide about that on SCN.  

 

There are some restrictions for anonymous KM and some recommendations which you should observe to ensure your anonymous KM is secure:

  • Use strict ACL settings: Assign permissions for anonymous users explicitly for the required documents and folders. Avoid assigning permissions to group Everyone, but use group Authenticated Users instead.
  • Remove permissions for anonymous users for /userhome/<guestid> und /entrypoints/recent
  • Restrict access to UI commands for anonymous users by assigning reduced command groups to layout sets and renderers used.
  • Keep in mind that some UI commands like permissions are displayed to anonymous users with read access.
    See the documentation for more details.

 

 

     3. SAP Portal Content Management by OpenText (PCM)


Since SP3, PCM also supports anonymous login and allows routing Content Server requests through the portal, which enables customers to hide the content repository inside the firewall instead of exposing the Content Server to the Internet in external facing scenarios. This is really useful to share documents like general guidelines or process descriptions with an external audience. A great part of the necessary settings for anonymous access is already set by default, so you do not have much configuration work. All PCM end user iViews, for example, already have the authentication scheme property set to anonymous and the technical portal user pcm_anonym also comes with the standard deployment.


These are the steps that are still necessary:

  • Register the pcm_anonym user in OpenText Directory Services. It is recommended to add it to the OTDS user partition pcm_technical_users, where the technical search user should also be managed.
  • Assign PCM roles to anonymous users/group. For external facing scenarios there is a dedicated OpenText PCM External Facing role with specific configuration.

PCM External Role.png

  • Assign read rights for the Web Dynpro component as described in the portal section above.
  • Enable anonymous links for folders: This feature enables logged in users to share links to folders and documents that are accessible for anonymous users via email as anonymous link.


You can find more details in PCM Installation and Configuration Guide section 7.8.

 

 

     4. SAP Portal Site Management by Opentext (PSM)


Since external and anonymous access is a basic feature of Web Site Management, it is also supported by PSM without much configuration. With SP3, even no additional portal configuration at all is required.The anonymous users of the portal are automatically mapped to the anonymous user of the Delivery Server and the PSM pages that were assigned to the user’s roles are displayed.

 


     5. Web Page Composer


To enable anonymous users to view WPC content in your portal, you have to execute some steps which Saar Dagan described in detail in the Anonymous User in WPC - Quick Guide. In a nutshell, the Authentication Scheme property needs to be assigned to the design time page template. Then the authentication scheme must be set to anonymous for the runtime toolbar iView and all pages that you want to show to anonymous users. Finally, you have to assign read permission to the anonymous user (group).

 

This blog is part of a series about creating sites with SAP NetWeaver Portal. If you liked this one, check out the rest!

 

Regards,
Sibylle

Just in time for SAP TechEd Las-Vegas, I am very happy to share with you the availability of SAP NetWeaver Portal, enterprise workspaces 1.1 Service Pack 5.

 

With this new release of Enterprise Workspaces we extend even more the mobile capabilities of the SAP NetWeaver Portal. It provides end users a superior mobile experience with mobile application gallery, enhanced personalization capabilities and integration with the customer's Master Device Management systems. All, fully integrated with SAP Fiori applications.

 

 

MOBILE APPLICATION GALLERY

The mobile application gallery provides end users a superior user experience with a native-like user interaction enables them to add to their mobile launcher, and install on their device, their frequently used mobile applications required for their daily work.

 

MOBILE LAUNCHER PERSONALIZATION

The personalized launcher enables end users to re-order, remove and un-install applications on/from their mobile device with a true native mobile experience.

 

MOBILE DEVICE MANAGEMENT (MDM) INTEGRATION

Customers can now integrate the portal with their Mobile Device Management of choice, to ensure consistency between the device, the portal and the Mobile Device Management (MDM) system.

 

For additional information check the release notes, our YouTube channel and the detailed presentation. As usual, I will do my best to answer all comments posted below.

 

Aviad

SAP TechEd kicks off today in Las Vegas, and the portal team has a lot share.

If you are here in Las Vegas, check out our activities today and be sure to come visit us in the technology showcase area, join our lectures, networking sessions and hands-on exercises and reach out to any of us if you would like to meet.

 

If you are looking to broaden your portal deployment and looking into cloud opportunities, take a look at the SAP HANA Cloud Portal and what it can offer you.

 

 

Enjoy the conference!

 

Amir.

Scenario

 

Please note in this scenario I have shown from the POWL example. This OBN configuration is applicable to all OBN configuration in Portal.

 

We have copied the standard iViews into our custom folder and created a role to launch a Maintenance Tasks iview.

 

We are able to display it fine. however, when we select any notification and click on the buttons such as change notification/display notification, it doesn't display the respective iView’s in new window, as it generally does in the standard role/iview.

 

It displays an error message saying "There is no iView available for system "SAP_ERP_Manufacturing": object "notification". For more information, contact your administrator."

 

In the below example on POWL screen select notification created by User link (Called Query).

10-21-2013 5-08-26 PM.png

 

Select any notification(in table row) and click on say, Display Notification button, below error messages pops up.

 

10-21-2013 5-09-40 PM.png

 

scenario may vary based on our requirements. Another exmample navigating from one webdynpro application to another webdynpro application. 

 

Root Cause

 

Even though we copied the standard iview to our custom folder, the iview doesn’t have the OBN properties copied and configured. We have to manually add the business operation to the OBN Business object.

 

10-21-2013 5-10-19 PM.png

 

Step by step procedure

 

Process Flow of Business Object and Business Operation in OBN

 

10-21-2013 5-11-01 PM.png

 

  1. User Logins in to Portal with User ID and access the assigned Role
  2. Access the assigned Application(In this case POWL application).
  3. Click on the appropriate action Button on Application (POWL)
  4. iView/ Page linked to BO Operation is triggered

 

Procedure to add the iView as Source and Targets in OBN:

 

  1. Adding Application as OBN Source:

 

Add business object operations that this iView activates at runtime. You can add operations automatically, if you check the iView runtime by choosing Check Source iView; or you can add operations manually from the Portal Catalog.

 

Here, we have the iview/application(POWL), which is the OBN source. From this iview, we would launch other iViews upon Action/Button.

 

10-21-2013 5-11-54 PM.png

  1. Adding Application as OBN Target

 

Current iView/page opens upon activation of the following business object operations

 

Here we create the Business Operation, by selecting the Business Object, Operation it would perform and System Alias defined.

 

Above fields selected are from standard Operations that we have under ERP Common Parts folder, in manufacturing folder

 

PCD path: Business Objects – ERP Common Parts – Maintenance Management – Maintenance Notification – select the operation that you want to activate.

 

10-21-2013 5-13-16 PM.png

 


We use standard business object that’s in the ERP Common parts folder as per the iview we want to launch, as the Business Object of Target iview.

 

This business object and operations we need to read from feeder classes or from ECC where ever you required.

 

Code Snippet of reading BO from ECC:

 

           ls_powl_follow_up-bo_system  = <system alias>.

           ls_powl_follow_up-bo_name    = 'maintenance_order'.

           ls_powl_follow_up-bo_op_name = 'change'.

           ls_powl_follow_up-parameters = <Passing Parameters to target iview>.

 

Please comment if any further clarifications.

 

 

KEEP SHARING!!!

Venky

What is it all about?

Recently we were requested to develop a very unusual consumption experience for exploring Fiori business content, enriched with context aware services (you can find here more information about it). While this is still in development, we thought some of you would be interested in learning about some of our considerations in selecting the technology for the UI.

Nir and I are developers in the SAP Portal group, in SAP Labs Israel, and we just love to bring Web UI to the extreme.

So what was on our plate? Complex shapes, dynamic graphics, multiple layers, complex and simultaneous animations, and, needless to say, mobile-friendly and absolutely smooth performance.

We also wanted: minimal learning curve, usage of a technology which is common in the industry, accessibility & text extraction, ability to embed external HTML content.

The good part: we were free to support a limited product-availability matrix, with only the most up-to-date Webkit browsers on PC and the retina iPad.

After a long investigation and numerous POC’s, we decided to go with CSS Transformations over HTML DOM elements with a pinch of Canvas. We were surprised to find out that the technology we had known for so long would fit us best, and while on this quest we learned to improve our skills using it.

Here are the technologies we investigated in order to find which best suit our requirements:

  • HTML5 Canvas
  • SVG
  • CSS Transform

 

magnet3.png

First Option: HTML5 Canvas

According to the HTML5 specification, the CANVAS element is:

“a resolution-dependent bitmap canvas, which can be used for rendering graphs, game graphics, art, or other visual images on the fly.”

The HTML5 Canvas element is an HTML tag similar to the <div>, <a>, or <table> tag, with the exception that its contents are rendered with JavaScript.

In order to leverage the HTML5 Canvas, we need to place the <canvas> tag somewhere inside the HTML document, access the <canvas> tag with JavaScript, create a context, and then utilize the HTML5 Canvas API to draw visualizations.

The canvas element is the actual DOM node that is embedded in the HTML page.

The canvas context is an object with properties and methods that you can use to render graphics inside the canvas element. The context can be 2D or webgl (3D).

For example, let’s draw a rectangle with HTML5 Canvas:

<body>
     <canvas id="myCanvas" width="578" height="200"></canvas>
     <script>
          var canvas = document.getElementById('myCanvas');
          var context = canvas.getContext('2d');
          
          context.beginPath();
          context.rect(188, 50, 200, 100);
          context.fillStyle = 'yellow';
          context.fill();
          context.lineWidth = 7;
          context.strokeStyle = 'black';
          context.stroke();
     </script>
</body>

 

The result:

canvas.png

HTML5 Canvas Advantages:

  1. High-performance 2D surface for drawing anything you want
  2. You can save the resulting image as a .png or .jpg
  3. Best-suited for generating raster graphics (for example in games, fractals, etc.), editing of images, and operations requiring pixel-level manipulation

 

HTML5 Canvas Disadvantages:

  1. Poor text rendering capabilities. Might not be the best choice for cases where accessibility is crucial

  2. Events are binding to <canvas> tag and not on specific Web element, so in order to handle events for a specific Web element, you may need to do a lot of hard work or to rely on a Javascript library like KineticJS

  3. Poor debug tools

 

 

Second Option: SVG

SVG literally means Scalable Vector Graphics. It is a language for describing two-dimensional graphics in XML.

SVG allows for three types of graphic objects: vector graphic shapes (e.g., paths consisting of straight lines and curves), images, and text.

Graphical objects can be grouped, styled, transformed and composited into previously rendered objects. SVG also supports embedded or external CSS rules.

Example of SVG shapes:

 

<line x1="0" y1="0" x2="200" y2="200" stroke-width="1" stroke="#000"/>
<rect x="250" y="250" width="200" height="200" fill="rgb(234,234,234)" 
     stroke-width="1" stroke="rgb(0,0,0)"/>


SVG Advantages:

  1. Vector graphics: people are now using high-resolution iPads and monitors
  2. Accessibility: Humans and machines can understand SVG code even if they can’t render it
  3. DOM Handling: SVGs have a DOM so it’s easy to attach event handlers and manipulate elements like you would for other HTML elements. To move an item, you simply change its coordinates

 

SVG Disadvantages:

  1. Slow rendering when document complexity increases; frequent use of the DOM impacts performance
  2. Steep learning curve
  3. Longer application loading, especially with detailed graphics

 

Third Option: CSS Transform

 

Modern browsers (Safari, Chrome, Opera, Firefox, IE9+) provide Web developers with CSS animations capabilities.

The effect of CSS Transform is to modify the appearance of an element in the browser by translation, rotation, scaling or other means.

While CSS Transformation in itself is a powerful tool, the ability to animate the transformations using webkit-transition makes it even better, so you can define animation properties like duration, delay, easing etc.

For example:

 

.element { 
     -webkit-transition-property:width;
     -webkit-transition-duration:1s;
     -webkit-transition-timing-function:linear;
     -webkit-transition-delay:2s;
}

 

In addition, you can combine multiple transform animations to a single element by listing them one after the other, so you can create complex animations easily.

 

You can predefine animation for an element and control the timing by @-webkit-keyframes. A keyframe defines the style that is applied for that moment within the animation. The animation engine smoothly interpolate styles between the keyframes.

 

Here is an example of a keyframe animation that changes the element size:

 

@-webkit-keyframes item-animation { 
     0% {
           -webkit-transform: scale(0.2, 0.2);
       }
     45% { 
          -webkit-transform: scale(1.1, 1.1);
     }
     100% {
          -webkit-transform: scale(1, 1);
     }
}

 

In the same CSS file you can attach the keyframe animation to an element:

.element {
     -webkit-animation: item-animation 0.5s; 
     -webkit-animation-fill-mode: both;
}

 

Furthermore, from a performance perspective, it is better to use CSS Transform in comparison to changing an object position and size by plain CSS properties (top, left, width, height).

Changing CSS properties by Javascript causes the browser to paint each frame, which result in a flickering transition. The CSS Transform version gets the screen element elevated onto its own layer on the GPU (called a RenderLayer). Now that it sits on its own layer, any 2D transform, 3D transform, or opacity changes, can happen purely on the GPU, which will stay extremely fast and still get us quick frame rates.

 

CSS Transform Advantages:

  1. Performance – uses GPU and not CPU
  2. CSS is a common technology, which doesn’t require much learning, and is easy to use – just a few more CSS properties and values
  3. Animations are made on the HTML DOM objects

 

CSS Transform Disadvantages:

  1. Bitmap graphics only - we have to take into consideration different screen resolutions
  2. Dynamic animations are made using Javascript and are slower (for example, items which should be moved to a calculated location)
  3. Creation of complex shapes are limited - we can draw circles, but more complex shapes might require images

 

Which one to pick?

It is quite hard to declare one technology as the optimal one, since the decision, like always, depends on your needs.

After investigating each technology and doing some POCs, we found out which of our requirements are answered by each UI technology:

Requirement

HTML5 Canvas

SVG

CSS Transform

Draw complex shapes

V

V

Sufficient (for required implementation)

Dynamic graphics

V

V

V

Complex animations

V

V

V

Good performance

V

Partially (CPU costly)

V

Mobile-friendly

V

V

V

Minimal learning curve

X

X

V

Common in industry

Partially

Partially

V

Accessibility & text extraction

X

V

V

Embed external HTML content

X

Partially (foreignObject)

V

 

The ability to embed HTML content is an important requirement since we must make sure our solution will support integration with other UI libraries like UI5.

In addition to technical pros and cons for each UI technology, we also took into consideration our team’s wide experience in using HTML and CSS, which could help us provide a good solution in minimal time and learning curve.

In conclusion, our main choice is CSS Transform for animations, complex Web elements with embedded HTML, and simple event-handling for each element.

Additionally, we chose to use HTML5 Canvas for animations of non-Web elements like background scenery elements.

 

Hope you enjoyed this post,

Nir and Yotam.

 

Sources:

http://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/

http://dev.opera.com/articles/view/svg-or-canvas-choosing-between-the-two/

http://msdn.microsoft.com/en-us/hh534406.aspx

http://creativejs.com/resources/requestanimationframe/

http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/

http://www.w3schools.com/cssref/css3_pr_transform.asp

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transforms

https://developer.mozilla.org/en-US/docs/Web/CSS/transform

http://www.the-art-of-web.com/css/css-animation/#.Ulvx7FBkPzg

http://www.w3schools.com/cssref/css3_pr_animation-keyframes.asp

https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes

 


For making your sites easily accessible on mobile and attractive to mobile users, the Mobile Portal offers you a role based aggregation layer to integrate both your web and native applications with unstructured content from various sources. There are already lots of blogs out there on SCN describing SAP Mobile Portal capabilities and how to best use them. I recommend reading


For this blog, I built a very small example including a PSM Page. My portal was already configured for mobile (HTML5 support, filtering enabled, device groups configured), so I just did the following steps:

  1. In the Master Rule collection, I checked which Smartphone Desktop was assigned to Device Group Smartphone – it was the Default Smartphone Portal Desktop.
    1-Rules.png
  2. Then I checked in this Portal Desktop which filterID was assigned. Result: the default com.sap.portal.smartphone.
    2-Desktop.png
  3. Next I created a copy of the Every User Mobile Role which comes with the standard delivery and made sure that the Filter IDs assigned to the Launcher and other pages contained com.sap.portal.smartphone.
    3-Role.png
  4. Now, the next step is adding some PSM pages to this role. This is really easy, as it is done using the Navigation Manager (before SP3: Navigation Assistant).  You just need to select a folder in a portal role on the left side and a node in the PSM project structure on the right side and click Add.
    As an example, I built a simple structure with PSM and published it:
    4-MS.png
  5. There are two possible locations where PSM pages can be added to a portal role:

    a. In the launcher: In Navigation Manager, you simply select the launcher folder in the mobile role on the right side and the top page of the PSM page structure on the left side and click Add Link. In the pop-up window, the Mobile checkbox needs to be checked, which in most cases is already done by the system. All other settings can just be used as they are, if you do not want to restrict the depth of the page sturcture. Mobile links always need to be static.

    The PSM pages are added as folder structure below the launcher. They inherit the filter ID from the launcher and mobile users can easily navigate through them to find the relevant content.
    5-Add_launcher.png

    b. In Portal Explorer:  The Portal Explorer gives users access to all items in their mobile roles that are entry points but not assigned to a mobile perspective like launcher or home page.  Therefore, you just need to add the PSM pages to any folder except launcher, e.g. to the role itself, using Navigation Manager; then it will be accessible from the Portal Explorer in the Toolbox.

    To define the types of devices on which the pages should be visible, you have to enter a filterID, when creating the link.

        6-Add PEx.png 

 

Now I am done. That is how the page structure looks like in the Portal role:

6-Role Ende.png

 

And in the smartphone:

Launcher_s.jpg   PortEx_s.jpg  

 

You can now click to open the Travel Information page or navigate to the sub-pages.

 

 

By the way, for sharing documents on mobile, SAP Portal Content Management by OpenText offers mobile UIs both for tablets and smartphones. These are the PCM smartphone UIs:

MobileBrowse.jpg   MobilePulse.jpg

 

 

Hope that blog was helpful. If you are interested in reading more about creating sites with SAP NetWeaver Portal, check out the other blogs in my blog series.

 

Regards,

Sibylle

Applies to:

 

This article applies to SAP Enterprise Portal 7.0.

 

Summary

 

This document explains the procedure to add our predefined properties in the Search Options Screen of SAP Enterprise Portal.

 

Author(s):    Sreeram Kasturi

 

Company:    Infosys Technologies Limited

 

Created on: 16th September 2013

 

Author Bio

 

 

Sreeram Kasturi is working as Senior Technical Architect in Infosys Technologies Limited, Bangalore.  He has worked on SAP MDM, SAP BPM, EP, KMC and Java/J2ee Technologies. He has conducted trainings on behalf of SAP Education Center on EP KMC

 

 

 

1. Introduction

 

SAP Enterprise Portal comes with a set of standard predefined properties for each resource for example: created by, modified by. Sometimes we might require creating our own properties also. This blog explains how to add the new predefined properties to appear in the Search Options Screen of SAP Enterprise Portal.

 

Two main sections of this document are “Creating New Properties” and “Adding Predefined Properties to Search Option Screen” as shown below.

 

2. Creating New Properties

 

This section “Create New Properties” is already explained in my previous article published on SDN - Creating Predefined Properties in Knowledge Management - Step by Step Guide” .

 

3. Adding Predefined Properties to Search Option Screen

 

This section explains how to add predefined Properties to Search Option Screen in SAP Enterprise Portal

Go to System Administrator --> System Configuration --> Knowledge Management --> Content Management --> User Interface

searchoption1.JPG

Click on Show Advanced Options in “User Interface”

searchoption2.JPG

Click on Search +.

 

searchoption3.JPG

Click on “Search Options Set”

 

searchoption4.JPG

Select the 'UISearch' and click on Edit Button

searchoption5.JPG

Click on ‘Show All Object’ link to display all the properties under ‘Allowed Predefined Properties’

searchoption6.JPG

Select the newly created / required properties from the list shown in the above image.

 

Click on ‘OK’ button.

 

The newly added properties like approved, reviewed, printed are visible in the Search Option screen as shown below.

searchoption8.JPG

 

4. References

 

 

http://help.sap.com/SAPHELP_NW70EHP1/helpdata/EN/cc/f4e77ddef1244380b06fee5f8b892a/frameset.htm

 

http://help.sap.com/saphelp_nw04s/helpdata/en/ad/e3ce0fd4f011d5994400508b6b8b11/frameset.htm

With Netweaver Portal 7.30 SP10 or 7.31 SP09 SAP launched the new UI Theme Designer. By default the old editor is still loaded, so here are the tips:

 

 

1) Enable UI Theme Designer in the portal

In Netweaver Administrator (/nwa) go to Configuration > Infrastructure > Application Modules;

Select the web module "com.sap.portal.themes.lafservice" in the Module List;

Now in the Portal Service Details the Properties are loaded. Change "Determine what will be the theme runtime provider" to LESS.

Save it and restart the portal.

 

nwa_less.gif

2) By enabling the LESS functionality the portal has added a new menu option under Content Administration > Portal Display > Portal Themes. It is called UI Theme Designer.

 

portal.gif

 

If you launch the UI Theme Designer, be sure you are running a modern browser (e.g. CSS3 support -> IE9 or higher, Firefox and Chrome).

Otherwise it won't start / work correctly.

 

 

 

3) Check out the following: Note 1839261 - Application displayed without theme (UI Theme Designer). In our case we needed a patch for SAP_BASIS (SAPKB73108).

 

 

4) Now you can run the UI Theme Designer from the portal.

 

theme.gif

 

Some interesting information (thanks Shani and Itzik again )

OSS note 1890375

http://help.sap.com/saphelp_nw73ehp1/helpdata/en/8e/a763272dcd4b4ba6ea347050b1f3fc/content.htm?frameset=/en/47/fdd03fc5de3c92e10000000a42189c/frameset.htm

 

/*

Noël Hendrikx - SAP Portal consultant @ Peppie Portals.

Specialized in Corporate branding SAP Portal / Adobe Interactive Forms.

 

UI Theming blog series

Portal theming - also waited a couple of years?

How to... UI Theme Designer - Installation

How to... UI Theme Designer - Migration

How to... UI Theme Designer - Locating elements

How to... UI Theme Designer - Transportation

 

 

Other blogs:

Tired of zipping / unzipping portal theme?

Tips for the Portal Content Studio

DSM Terminator and popup blockers (or not)

My best development friend - Autoresponder FTW

/*


Hi SAP Portal Community,


Today, I would like to introduce myself to you and invite you to follow a series of blogs that I intend to start in the next days. My name is Sibylle Brehm and I have been part of the portal Product Management team since the very beginnings of SAP Portal, although at that time my focus area was Knowledge Management. In the last years, I took over the responsibility for planning, setting up, and configuring our SAP NetWeaver Portal demo scenarios, for customer events like Sapphire and TechEd, for our standard demo landscape and also for specific customer meetings.

Here you can see some of the portals that I worked on:

Ozone.pngVintage.png

 

Since the portal management team decided in 2010 to further enhance and enlarge the portal offering with the best-of-breed Content Management and Web Site Management solutions of our partner OpenText, these new capabilities also needed to be reflected in our demo scenarios. Thus, I had the opportunity to build up a lot of experience on the integration of SAP Portal Content and Site Management of OpenText with SAP NetWeaver portal, on the benefits of using these add-ons to the portal, on configuration and administration.


This has been quite a fascinating time to get to know these new products in detail with long hours and some ups and downs, lots of learning by doing and help from our colleagues in the Portal development team and at OpenText. And it is this experience that I would like to share with you in a blog series on creating sites with SAP NetWeaver Portal. These are the topics that I am going to tackle in my first blogs:

 

  1. Leveraging SAP Portal Site Management by OpenText for building external sites
  2. Accessing sites built with SAP Netweaver Portal and PSM on mobile
  3. Anonymous logon for external sites
  4. What to consider when changing the portal look and feel with a custom framework page

 

If you have any additional ideas and points of interest around this topic, please feel free to provide your suggestions by writing a comment on this blog. I promise to take a close look at your ideas and provide some details wherever possible.


So, stay tuned! The first blog is already available and the second one just around the corner.


Regards,
Sibylle

Hi SAP Portal Community,

 

Creating external facing portals is quite an important topic for many companies and there are lots of things to consider regarding architecture, security, user access etc. Today, I would like to take a closer look at how you can use SAP Portal Site Management by Opentext (PSM) with the SAP NetWeaver Portal to create even better, more appealing sites with a maximum of flexibility.


PSM provides customers with a rich set of features and functions to enable non-technical business experts to easily manage their content within the SAP Portal. To benefit from the close integration between Portal and OpenText Web Site Management and the advanced Site Management features of the product, you first need to install the OpenText Services and deploy the PSM Portal components.


From the Portal side of the solution, you get lots of functionality for providing an external facing site out of the box like navigation via short URLs or quicklinks, a navigation cache, a light framework page, and a resource-sensitive page builder. You can find more about this topic in the SAP help portal at http://help.sap.com/saphelp_nw73ehp1/helpdata/en/48/1d0555a4ef4e6fe10000000a42189c/content.htm?frameset=/en/48/1d054fa4ef4e6fe10000000a42189c/frameset.htm. For general information on SAP NetWeaver Portal, please take a look at the SAP NetWeaver Portal space in SCN where you can find for example a Getting Started blog and a roadmap presentation, or watch the portfolio video.


With the usage of PSM, you gain all features of a best-of-breed web site management solution for administrators and an easy-to-handle, quick editing tool for site editors in addition. Besides, PSM offers Asset Management to manage images you used on your web-sites, support for the whole content process and, very importantly, lots of options for building dynamic sites. For more detailed information on PSM in general, take a look at this presentation.


Well, how do PSM and Portal work together when building up an external site? Let’s take a look at different important decisions you have to make, when building up your site:

  1. Access: The OpenText Delivery Server, the powerful, XML-based tool for dynamic delivery of web site content to the Portal, has its own anonymous user. SAP Portal Site Management by OpenText automatically recognizes if the portal user is an anonymous user and then maps it the Delivery Server anonymous user without any configuration needed.
  2. Navigation: Since your external site will be first of all a portal, you can use the normal SAP NetWeaver portal concept to provide a role-based navigation structure. With PSM you can complement the role navigation by adding either single pages or complete navigation trees to a portal role and very easily link between pages. In addition, you can choose between static and dynamic links when adding pages or page structures to a role, so that in the second case, even after having connected the page to a role, all changes to the page structures will be automatically visible in the portal once they are published. You can see how to add pages to a role in this video.
  3. Look and Feel: In many cases, SAP Portal customers will create their own portal desktops and framework pages based on the Ajax framework page to shape the portal design according to their needs. You can easily integrate the same css and if needed js file both in the OpenText Management Server as part of the portal framework to attain a seamless experience both in your External Facing site and in your editing environment.
    To ensure a consistent look of Portal/PSM pages, the OpenText Management Server (the part of the solution where the actual page creation, editing and publishing workflow is handled) offers also a clear separation of content and layout and helps to enforce strict adherence to a predefined design, even when content creation is delegated to content experts in the LOB. To reach this, the whole content creation process heavily on templates that can be created in a way to fit seamlessly into your portal environment.
  4. Portal Content: In many cases, you will decide to bring together structured and unstructured content on the same page. In fact, this can be done easily by using the Application Integration feature of PSM. Thus, PSM pages are not just nice web pages created using cool templates and based on a stylish css, but they can also contain any application that is available in your portal as an iView, so that you can for example display the list of current purchase orders next to some information on the purchasing process in your supplier portal. The application integration is done in the template, so power users can provide a set of templates including different applications and add red dots to the template to modify iView properties of the application, e.g. root node and display options for a document list or transaction code for an SAP transaction.
  5. You can easily provide a mobile version of your external facing site, but that will be the topic of my next blog. To see an overview of the complete series about creating sites with SAP NetWeaver Portal, go the introductory blog.


Stay tuned!

Sibylle

Steps to remove tabs from UWL

 

By default we get below tabs in uwl.

  1. Alerts
  2. Tasks
  3. Notifications
  4. Tracking

 

If we need
to remove any tab, we can do it by following below given steps:

 

 

  1. Go to iview properties and check the
    property useNavigationId, as shown in fig below:

ivew-property.jpg

 

 

Note down the value ‘’com.sap.pct.erp.mss.Main”, this is nothing but an xml file.

 

 

2. Go to System Administration -> System Configuration -> Universal Worklist
Administration
.

 

 

Click on Click to Manage Item Types and View Definitions under Universal
Worklist Content Configuration

As shown below:

 

2nd_step.jpg

 

3.After that select the xml file, go to end of the page and download the file.3rd-step.JPG

 

4. Save it to your desktop and make a copy to preserve the original file.

 

5. Open the file with any XML editor or word pad and do the below changes,

    

      5.1To hide the Alert tab: change the visibility to no as shown below:5th1-step.JPG

 

    5.2  To Hide Notification Tab: Change the below given visibility to no.

 

5th2-step.JPG

 

   5.3  To hide Tracking Tab, change the visibility to no, as shown below:

 

5th3-step.JPG

 

 

 

6) Save the file after doing above changes. 

 

7) Go to the next tab in portal “Upload new configuration”.7th-step.jpg

 

 

Fill the Configuration name :  com.sap.pct.erp.mss.Main

Check the high priority.

Browse the file. And upload.

 

 

 

8) Next, message would be displayed that the file already exists. Choose yes to overwrite and save.

 

Now, check the uwl iview for the result.

 

after_change.JPG

 

 

 

Note:
if you are checking by any role. Then please ensure that the same iview is linked
to the role for which you checked the property in step 1.

 

Hope this document helps people.

Thanks

.

Actions

Filter Blog

By author:
By date:
By tag: