Hello Everyone,

Hope you are doing well and safe too ?

Hyperlink helps us to navigate from one screen to another screen hasslefree.
Saving a bookmark for google URL saves your time & efforts to re-enter the URL every time.
Now just imagine having a dynamic URL that takes you to a execute defined URL with defined parameter(s) without entering any details. Amazing!  right.

Let’s Get Started.

In this development, we will use the core concept of SAP C4C Mashup and Field type Link to create a clickable dynamic URL field.

Process Flow to create Dynamic hyperlink

We will discuss process flow steps one by one with an example.

1. Prerequisites
2. Create an Embedded component
3. Adding fields into the EC
4. Create an event to fetch existing value for the field
5. Adding a first half of the link (Can be done in many ways)
6. Adding field as a Link
7. Opening Final Link
8. Adding EC to Account TI
9. Testing

Step 1: Prerequisites

1. Login into the SDK. Select your solution from the “My Solutions” window.Make sure you are using the latest version of SDK

Step 2: Create an Embedded component

1. Click on ‘Add New Item’ from Solution Explorer
   
2. Select ‘Embedded Component’ from the list and specify the name as ‘Dynamic_Fields’
3. New EC ‘Dynamic_Fields’ is added in our Solution

Step 3:Adding Fields in EC

1. Double click on newly create EC to open it in UI Designer
2. Navigate to ‘Data Model’ tab right-click and select ‘Add Data Structure’ rename it as ‘Inport’
   Right-click on the structure and add the field ‘In_Address’ as shown in the below screenshot.
3. Create additional field under ‘Root’ as ‘Lv_Address’ to hold address value

adding a field in the data model

Step 4: Create an event to fetch existing value for the address field

1. 1. Navigate to ‘Controller tab’, Right-click on ‘Inport’ and select ‘Add Inport’
2. 2. Click on ‘Add Parameter’ button and bind it with field ‘In_Address’ created at Step 3.2
3. 3. Click on the ‘Properties’ tab and change ‘RequestFireOnInitialization’ value as ‘True’

Before
FireOnInitialization default

After.

After setting FireOnInitialization = True

4. In the Same ‘Properties’ tab, under the ‘Events’ section.
Add new ‘OnFire’ event, name it as ‘OnInitialization’ Event

Adding Event

5. Click on ‘Add Operation’ and select ‘BOOperation’ from the list.

now on ‘Add parameter’ Input the parameter name and select the variable created in step 3.2 for binding.

Step 5: Adding a first half of the link (Can be done in many ways)

1. Add field as ‘FinalURL’ and ‘URL1’ in datamodel of the EC
   
2. Data Field FinalURL will be our final URL which we will fire at the end using an event handler
3. URL1 contains the static part of our URL,
   add a default value for ‘URL1’ field as ‘http://maps.google.com/?q=’   this is the google map URL,
   now static part of URL is done, let’s move to construct Dynamic URL.

Step 6: Adding field as a Link

1. Open ‘Designer’ window  and  ‘Data Browser/Data Model’
   
2. Drag & Drop the field which contains our value ( in our case it is field Lv_address) from Data Model to Designer Screen.
   
3. Select a field on UI Designer and navigate to ‘Properties’ tab  and change display type as ‘Link’ to make our field clickable
   4. Click on Event and select ‘New Event Handler’
   5. Input a name for new event as ‘OnClick’,
   Click on ‘Add Operation’ and select ‘Script’ from the list.
   
   6. Add below Ruby script code in ‘Source’ textbox as shown below
   

 $data.FinalURL = $data.URL1 + $data.Lv_Address​

What this code will do:
URL1  is our static part of URL
Lv_Address will hold the address value of the customer as configured in Above Steps 3 and 4.
This script will concatenate the Static part and current Address into the variable ‘FinalURL’

Step 7: Opening Final Link

The above step will create our final URL as a concatenation of  URL1 and Address value at runtime.

Now we have a complete URL with us, Let’s open it from the same ‘OnClick’ event as the user has already clicked on Hyperlink,

1. Click on ‘Add Operation’ select ‘OpenLink’ from the list and select the ‘FinalURL’ field for binding as shown.

Now our embedded component is ready.

Let’s attach it to the Account Screen.

Step 8: Adding EC to Account TI

1. Open Account TI, Click on ‘Configuration Explorer’ and ‘/BYD_COD/SalesOnDemand/Account/UI/COD_Account_TI.TI.uicomponent’ double click on Account TI to open it in the designer.

      2. Open ‘Extensibility Explorer’ tab click on ‘Undefined’ and then click on ‘Add View with Embedded Component’ to add our component on Account TI

3. Give new facet/tab name and select our Embedded component from the list

4. Click on ‘Bind’ Select ‘Address_Info_Out’ as an Outport from COD_Account_TI outport and bind it to our inport and field as shown in the below screenshot.

now the configuration is done.

Click on the ‘OK’ button.

5. Click on the ‘Save and Activate’ button.

Step 8:Testing

1. Login into the UI and navigate to the Customer->Account screen

2. Open an account and navigate to our newly added facet ‘Dynamic Fields’
The account address is correctly displayed on the screen.

3. Click on the newly created Address hyperlink

           4. Google map is opened with the correct address (Available from Account Address tab).

Conclusion: This way we can create Dynamic Hyperlink without using mashup or creating any of the mashup configuration required.

Regards,
Kartik Metkar