Virtual Concepts

Purpose:

  1. Move entity request schema from page (HTML) to NF. This will help us better manage and maintain the entity objects.
  2. We have a virtual page concept, which eliminates the HTML pages for simple CRUD operations and also removes left menu HTML Pages. We will remove most of the client-related pages using virtual pages.
  3. New changes will eliminate duplicate URL's from application menus.

Notes:

In this virtual screen, we will implement the same functionality that we would in an HTML page. This includes features like accordion, pane, search, grid, and form.
The following four items are commonly used to build in virtual:

  1. DemandAccordion
  2. ContainerPane
  3. Grid
  4. Form

1) DemandAccordion:

This is the accordion of the grid. For all grids, we need to create the accordion first. We can add a container in the accordion, the container in turn can have a grid or a form.
We can do it step by step, just like we do on an HTML page. Need to add accordion in the left side grid.

There are different types of control options available in the Demand Accordion. You can use whatever you want.

2) ContainerPane:

The Container Pane should be created within the accordion. A new pane can be created by adding a new item to the Panes grid (grid on the right side of the screen).
When the ContainerItems grid ( left side grid on the screen) refreshed, the ContainerPane will be added to the left side grid (Container Items).
If you need more panes, then you need to added in a similar fashion.

3) Grid:

The grid should be created with in the containerPane. And that grid will be created in right-side menu of the ContainerPane. After refreshing the left side grid,
the grid control will be shown. In HTML pages, we typically place the search control before the grid control. However, on virtual screens, there is no need for a search control.

There are different types of control options are available in the Grid. You can use whatever you want.

In virtual pages, there is no need to explicitly add a search control, instead there's an option shown in the form for the grid called " Show Search Control?",

when we set this option to true, the search control will be displayed. If we set it to false, the search control will not be displayed.

If you need a form control, there is an option called 'Include Form Config' in that form. When you set the 'Include Form Config' option to true, both the right-side grid
and the left-side grid will requery and the form control will then dynamically appear in the left menu. If you set it to false, the form control will not appear.

In HTML pages, grids typically have command buttons in the header toolbar, footer toolbar, and grid rows. We can achieve a similar setup on virtual screens as well.
There are three types of button locations available:

1. row
2. header
3. footer

 Also different control types like button, checkbox, datepicker and dropdownlist are available.

4) Form:

Whatever can be done with form control in HTML pages , the same can be done in virtual pages too. Generally, we groupping in forms, change events, click events.
the same things can be done in virtual pages as well.Different controls are available in the Form Control Options, refer the screenshot shown below:

In form items there are two tabs: fields and item options. The fields grouped together are added to the fields tab. In item options,
we can set itemColCount to [1,1,3,3] and values to [1,1,2,2]

Create Simple CRUD Grid in Virtual

  1. If need page with simple CRUD, then use “Auto Populate Simple CRUD” button and provide necessary value .

  2. After providing the method name and table name, a simple CRUD will be created. Similarly, accordion, container, and grid will come.

    3. For a simple CRUD, you just need to do this much.

Simple Form in Virtual

If you need a form instead of a grid, What you did for a simple CRUD, you need to do the same for this as well. you have to just choose the item type to be form, instead of grid.

DemandTabStrip in Virtual

The DemandTabStrip should be created with in the containerPane We have created single tab strips and multiple tab strips in HTML pages. Similarly, in virtual environments,
we can create multiple tab strips. By using a control option called ‘DemandTabStrip’ within the container, we can add tab strips.

Again we need to add the panes for DemandTabstrip.Title Template-title of TabStrip. You can add as many tabstrips as you need. Add like this,

If you need multiple tabstrips,you need to add Container Panes like this

If the explanation is not clear, please take a look reference page for further clarification.

For Reference:

Page Name:  Campaign Settings

Page Id: 2310385142

Request Filter in Virtual

In the CRM, under the sales marketing submodule, there is a screen named SalesTeam.It contains a request filter and parent/child grids. We have already converted this screen to a virtual one.

  • There is an item type called ‘search’ for Request filters. That is what needs to be used.

  • The search Item type added under the container pane.

This is how you can set the Apply filter in virtual. If the explanation is not clear, please take a look reference page for further clarification.

For Reference:

Menu : CRMàSalesMarketingàsales team

Page Name:  Sales Team

Page Id: 2310653372

Parent-Child Relationships in Virtual

you can implement a parent-child relationship in a virtual screen just like you would in an HTML page. You will need to create two containers:

One container will be the parent container and the other will be the child container.Both containers should have a grid or form. The parent-child relationship means
that the child grid will appear based on the parent.

To achieve this, there is a property called "Parent Grid Name" to the child grid in the virtual. In this property, you will need to specify the control name of the parent grid.
By doing this, the relationship will work.

For Reference:

Page Name:  Sales Person

Page Id: 2310500694

The additional changes we made in the virtual

1) How to remove the grid row checkbox in virtual?

In the grid’s control options tab, you need to select the option ‘selectable’. Initially, it may be set to ‘row multiple’. However, if we need a grid row checkbox,
then provide ‘row multiple’, or if not, just ‘row’

2) How to set columnConfig in grid?

This is how you can set the columnConfig in virtual. If you have any doubts, please refer to the page we have created.

Menu : CRMàSalesMarketingàOpportunity

Page name :Opportunity

 

3) How to call Related Menu in virtual?

You can simply set below options for button to open related page. When we click the ‘owner change’ button, we call the related menu.
and need to add the related menu parametermappings.check below screenshot

4) How to add controlReady in virtual?

This controlReady option is available in the form/grid Control Options. You can simply add the controlReady function.

5) How to close the Model window in virtual?

One property is there in Command Options. “ControlNamestoRequeryAfterPopupclose”. Just select the property name and give the control name
of the grid in the ‘value’.By giving this property, the modal window popup will close automatically and the parent grid will also refresh.

6) How to use PageOptions in virtual?

Global variable declaration is not needed. JScontrol take care of all your data mappings to page parameter if you set (menu parameter and related menu parameter)
correctly.Use like this-- if (!MCL.Data.isNull(groupEntity.getValueFromContainer("ContactId"))) Instead of if (!MCL.Data.isNull(pageOptions.ContactId)).
if you set (menu parameter and related menu parameter) correctly, then you can get the groupEntity.getValueFromContainer("ContactId")

7) How to Refresh/Requery the grid in virtual?

Generally, When an update/create happens in the grid, a refresh/requery occurs. We can’t write code virtually like we do on an HTML page. Just you can select
the control option “controlNamesToRequeryAfterCreate”of the grid. you can easily requery after the create/update/delete.

8) How to create afterupdate/aftercreate/afterdelete events in virtual?

These events are available in the control options of the grid. You can use this controls

9) How to use afterdataBound concept in virtual?

This afterdataBound option is available in the grid's Control Options. You can simply add the afterdatabound function in virtual.

10) How to use CallwebserviceRead in virtual?

In the CRM, there is a screen for opportunity under SalesMarketing. In this screen, there is a details icon in the opportunity grid. When you click on this icon, the opportunity details screen is called.
In this screen, there is a field called Expected Revenue. The value for this field is fetched through a Callwebservice. However, it is not possible to use callwebservice on virtual pages.
Therefore, we have created a lookup using that method and tables from the CallWebService Read. This lookup is assigned as the default value Lookup for the Expected Revenue field.
This is an alternative approach to using Callwebservice on virtual pages.

I have created one lookup (GetExpectedRevenue). This lookup is assigned as the default value Lookup for the Expected Revenue field. We have used this callwebservice
function for multiple fields.That’s why I have given those field names in the “Dependent Field Names”. We have called that function with these two fields.
You can take a look in CRM “OpportunityRead” method has field “ExpectedRevenue”.

11) How to call Execute Method for beforeSave/beforeCancel in virtual?

On the right side of the form, there are three tabs: Save Options, Delete Options, and Cancel Options. If you need to use the beforesave, beforecancel, and beforedelete events,
then use these tabs. If you need to add additional buttons, you can create them. New buttons can be added through the ‘Additional Buttons’ tab. There are multiple
options are available in the “Additional Buttons” tab. That tab have two child tabs. 1)Button Options, 2) Method execution Mappings. You can take a
look in CRM Application Pages. You can set button icon classes and button classes. And when you click the button, you can call the execute method as well.
Check below screenshot

Menu : CRMàSalesMarketingàOpportunity

Page name : Opportunity Clone Related

Page Id :2310879944