Skip to Content
Author's profile photo Former Member

A Closer look at Visual Composer


For an application to deliver a rich and appealing look, they must be user-centric. They must also be customizable and must be adaptable to each user’s specific job role. The SAP Net Weaver Visual Composer tool fulfills all these requirements.

With Visual Composer, one can create business applications quickly and cost-effectively, without having to write a single line of code.

Creating an Application


1.    After the authorized user, who has VC role has logged in http://<HostName>:<Port number>/VC

Go to Model->New Model.


A Dialogue box is displayed to create a New Model.


2.    Create a package -> inside it a page-> inside page a view.

The icon at the top left of the workspace, to the left of the navigation path, indicates the type of model component that is presently being viewed. The navigation path enables you to jump from model level to level.

The four Navigation levels are:      

a.    Model:


b.    Package:


c.    Page:


d.    View:


     Following page will open at the last navigation level i.e.; view:-


Different Tasks panels available are:

a.    Browse: – It opens a tree like structure that represents your application in Hierarchical order. You can use this to modify the model hierarchy and to navigate the model.

b.    Compose: – It is the design board available to add different components to your view.

c.    Configure: – Used to define properties of the various components like Title, alignment, Frame Styles, Sizing, Transition Effects, etc.

d.    Inspect: – Used for viewing and editing the formulas in the fields of the different components.

e.    Find data: – It is used to search and add different Data Services to your application.

f.     Deploy: – It is used to compile and deploy the model to the portal. Once deployed, the models are available in the Portal Content Directory.


3.    3.      Drag and drop the components you want to create from left hand side “Compose Model” panel.

4.    4.      Now create your application.

Features of VC

A).   Transition Effects:-


Various animation options can be seen in drop down of Transition Effect in screenshot above.

B). Navigation Controls:-

When creating different layers in an application, we can have different options for navigation control as seen in the drop down of Navigation Control in screenshot below.


     1.    Tab Strip-


     2.    Wizard:-


     3.    Accordion:-


     4.    Link List:-


     5.    Link Tree:-


C). Transition Effects For layers:-

You can also give transition effect for the different layers created.


  • Swipe(horizontal)
  • Swipe(vertical)
  • Wipe(horizontal)
  • Wipe(vertical)
  • Swap(horizontal)
  • Swap(Vertical)
  • Swivel
  • Fade(In/Out)
  • Zoom(In/Out).


D). Image Manager:-

You can add images to your application using Image Manager.

Tools -> Image Manager -> Browse -> Upload Image and save.



E). Charts:

You can have different types of charts.


1.    Column:


2.    Area:


3.    Bar:


4.    Line:


5.    Pie:


6.    Doughnut:


7.    Combo:


Advantages of Visual Composer

The SAP Net Weaver Visual Composer results in a wide range of benefits:

1.    It saves time by allowing rapid prototyping and deployment of innovative applications.

2.    No Coding Required.

3.    Highly Interactive and User-Friendly.

4.    It offers a sustainable cost structure that lowers IT development and maintenance costs, since there is no code to maintain.

5.    It improves employee productivity and customer satisfaction by providing a rich end-user experience.

6.    It adds business value and improves decision making by instantly providing business data to users.

7.    It improves overall efficiency through its streamlined development process.

Assigned Tags

      Be the first to leave a comment
      You must be Logged on to comment or reply to a post.