16. February 2015 14:35

How to add the [Call Number]-flyout button?

Filed Under(CRM 2013 | CRM 2015 | TelephoneIntegration 2013 | TelephoneIntegration 2015) By Jin

This article outlines how to add the TelephoneIntegration [Call Number]-button manually.

Requirements: TelephoneIntegration for MS CRM 2013/2015

Please note: The button created in this example will be visible on the Contact-form for web-clients only.

 

How to add the [Call Number]-button manually?

First, create a new CRM solution (CRM > Settings > Solutions > New). Then, add the entity to which the [Call Number]-button should be added. This can be done by opening the Add Existing-drop-down menu > Entity. (here: Contact)

clip_image001[1]
Figure 1: Create new solution and add drop down menu

In the now appearing dialog, select No, do not include required components.

This is what the result looks like:

clip_image003[1]
Figure 2: Result

At this point, we recommend to do an unmanaged export of this solution (simply to have a backup). 

Once finished, add the following components to the solution (Add Existing > web Resource):

· Web Resource: ptm_CallStart_32x32 
· Web Resource: ptm_TelephoneIntegration_JSLibrary 
· Web Resource: ptm_ti_js_CallButton

clip_image004[1]
Figure 3: Components added to Web Resource

Next, open the RibbonWorkBench and select this solution.

Once loaded, drag and drop a Split Button from the Toolbox to your Form-ribbon.


Figure 4: Drag and drop a Split Button

With a right-click on the Split Button a flyout opens. Make another right-click on the flyout-element Delete.

clip_image006[1]
Figure 5: Split Button flyout menu

Next, define its properties on the right side. Please find a sample below.

· Id: any unique ID (new.contact.Button.form.ptm_tiCallNumberFlyOutCustom)
· Image16by16: select the included :ptm_CallStart_32x32-webresource
· Sequence: position of your button (here: 110)
· Label Text: Any text (here: Call Number)
· ToolTipDescriptionText: any text (here: Use this button to start calling out)
· ToolTipTitleText: any text (here: Call Number)
· All other properties can be left as they are

clip_image007[1]
Figure 6: Split Button Properties

Next right-click on Commands > Add New.

Then select the new command.

clip_image008[1]
Figure 7: Enter new command

Define its properties on the right side.

Id: any unique id (here: new.contact.command.form.ptm_tiCallNumberFlyOutBaseCustom)

clip_image009[1]
Figure 8: CommandDefinition properties

After that, hit the lookup-icon of Actions and in the popping up dialog click on the [Add]-button.

In the next dialog, select Javascript Function Action and click on the [OK]-button.

clip_image010[1]
Figure 9: Add Javascript Function Action

Define the properties of the next dialog like this:

· FunctionName: WriteRegistryBasedCallOutEntity 
· Library: select TelephoneIntegrationJSLibrary (ptm_TelephoneIntegration_JSLibrary)
· Parameters: can be left empty

clip_image011[1]
Figure 10: Define properties 

Click on the [OK]-button to in order to complete the process.

Next, click on the lookup-icon of DisplayRules and the following window will open. Click on the [+Add New]-button.

clip_image012[1]
Figure 11: Display Rules-window

Define a unique ID (here: new.contact.displayrule.form.ptm_tiCallNumberFlyOutCustom) and click on the [Add Step]-button. 

clip_image013[1]
Figure 12: Add new display rule

Select Client Type Rule and continue with a click on the [OK]-button.

clip_image014[1]
Figure 13: Select rule type

In the next dialog specify the following fields:

· Default: False 
· InvertResult: False 
· Type: Web

clip_image015[1]
Figure 14: Specify fields

Finish it with a click on the [OK]-button and then again, click on the [OK]-button.

Now the functionality for the main button is ready.

The next step is to include a command for the population of the flyout-menu. To do so, right-click on Commands > Add New

clip_image016[1]
Figure 15: Include a command

Enter an Id (here: new.contact.command.form.ptm_tiCallNumberFlyOutPopulateCustom)

And hit the lookup-icon(next to Actions)

clip_image018[1]
Figure 16: Define the command properties 

Now add the following Javascript Function Action:

· FunctionName: ptmTICallButton.PopulateItem 
· Library: select ptm_ti_js_CallButton

clip_image019[1]
Figure 17: Add Javascript Function Action

Next, click on Parameters, click on the [Add]-button and add the following types:

· Type: CrmParameter Name: <empty> Value: CommandProperties 
· Type: CrmParameter Name: <empty> Value: SelectedControlSelectedItemIds 
· Type: CrmParameter Name: <empty> Value: SelectedEntityTypeName 
· Type: StringParameter Name: <empty> Value: new.contact.command.form.ptm_tiCallNumberFlyOutItemCustom

Finish the process with a click on the [OK]-button and click again on the [OK]-button.

clip_image020[1]
Figure 18: Add types

The next step is creating the final command. It will be executed when a user hits on a flyout-item.

Right-click on Command > Add New

clip_image021
Figure 19: Add final command

Insert the ID new.contact.command.form.ptm_tiCallNumberFlyOutItemCustom and hit on the Actions lookup-icon.

clip_image023
Figure 20: CommandDefininition Properties

In the now popping-up dialog, click on the [Add]-button. Select Javascript Function Action and click on the [OK]-button.

Define the Javascript function properties as follows:

· FunctionName: ptmTICallButton.onClickMenuItem 
· Library: select ptm_ti_js_CallButton

clip_image024[1]
Figure 21: Javascript Command Properties

Next, click on Parameters and click on the [Add]-button. Insert the following types:

· Type: CrmParameter Name: <empty> Value: CommandProperties

· Type: CrmParameter Name: <empty> Value: SelectedEntityTypeName

· Type: CrmParameter Name: <empty> Value: SelectedControlSelectedItemIds

· Type: CrmParameter Name: <empty> Value: PrimaryEntityTypeName

· Type: CrmParameter Name: <empty> Value: SelectedEntityTypeCode

clip_image025
Figure 22: Define Parameters

Complete with a click on the [OK]-button and then again, click on the [OK]-button.

Back in the main-window of RibbonWorkBench, select the button in the ribbon and choose the recently created commands in the dropdown-boxes Command and PopulateQueryCommand

clip_image027
Figure 23: Select the [Call Number]-button

To complete the button, click on the [Publish]-button.

clip_image028
Figure 24: Publish the button

When you now open a contact record, you will find the [Call Number]-button.

The main button and the flyout should work.

clip_image029

 

 

 

 

 

Figure 25: Published [Call number]-button

The result Xml of the RibbonWorkBench should look like this:

image

image

You could try to use this Xml for other entities as well.

For example, you could replace .contact. with .lead. and change the location of the CustomAction

BUT we cannot guarantee that this is working! 

That’s it! We appreciate your feedback! Please share your thoughts by sending an email to support@mscrm-addons.com.

Tags: ,

Tag Cloud

This will be shown to users with no Flash or Javascript.

Page List