A community member asked the following question on one of my previous blog posts.
Is there a way to dial a phone number and call the employee (someone) from a PeopleSoft page?
This is a great question! It is very simple to enable phone numbers as clickable elements - click to call/dial from a webpage to the dial screen on a mobile device. This is similar to how we enable email addresses as clickable elements using the mailto: URI scheme. Basically, replacing the href "mailto:" URI portion with "tel:".
References
https://developers.google.com/web/fundamentals/native-hardware/click-to-call/
https://www.iana.org/assignments/uri-schemes/uri-schemes.xhtml
Implementing this in Classic is probably not a relevant use case but the question led me to investigate how we can achieve this in Fluid which is the responsive UI for mobile devices! For something which seems as simple as described above, I had to jump through a lot of hoops (trial and error) to make this functionality work in Fluid.
Use Case
For example, wouldn't it be great if we can simply click on any phone number on the 'My Team' page under Manager Self Service (HCM) to directly launch the dial screen (with the number) on a mobile device?
If we look at the Employee email addresses on the 'My Team' Tile (HR_DIRTEAM_FLU Page), we can see that they are configured to reference the "mailto:" URI scheme.
The Fluid Attributes of the page field (Email Address):
Notice the Fluid (Tab) > Input Properties > Input Type? Also, notice the 'Generate As Hyperlink' option which is only available for 'email' Input Type? As we can see in the drop-down, there is no Input Type option for 'Phone Numbers' (tel:) in the Fluid Properties (Tab). So, we cannot use the Page Field properties to enable the phone number as a hyperlink (with the required "tel:" URI scheme).
Next, I wanted to explore if we can configure this programmatically (peoplecode) by taking advantage of these really useful Field Class 'Fluid Only' properties:
HtmlInputType
IsHyperlink
The expectation based on the Field Class API is that we could simply add the following code on the Page Activate PeopleCode or another appropriate event to make this work.
Expected PeopleCode Snippet
Unfortunately, using the %tel option (which would have been ideal) did not work. It appears that this PeopleCode Field Class Property value does not work as expected. It has no effect on the HTML generated to represent the page field element (bug?).
To workaround this issue, I set the HtmlInputType to %email instead. This is a hack to ensure the anchor tag with the href attribute and the "mailto:" URI scheme is generated in the HTML. Then, as a cleanup, I wrote a small piece of javascript to find and replace "mailto:" with "tel:". This worked!
Workaround PeopleCode Snippet
For the purpose of this demo, the above PeopleCode snippet was added to the end of delivered HR_DIRTEAM_FLU.Activate (Page Activate peopleCode). For a production use case, we may want to consider adding this code in an app class and then invoking the custom peoplecode using Event Mapping Framework in an effort to avoid customization.
Result of Workaround PeopleCode
As we can see, the phone number is wrapped in an anchor tag with the href attribute using the "mailto:" URI scheme.
Workaround JavaScript
Result of Workaround JavaScript
As we can see, the "mailto:" URI scheme has changed to "tel:" which is what we need to enable phone numbers as a clickable element on the webpage.
Demo on a Mobile Device
Link to MOSC Idea: Improve Field Class Fluid Properties and Page Field Fluid Input Properties
Please review and vote on this idea if you are convinced that it is a welcome enhancement.
Demo Environment Details
This demo was conducted on a HCM PUM Image 23 - PeopleTools 8.56.01.
Is there a way to dial a phone number and call the employee (someone) from a PeopleSoft page?
This is a great question! It is very simple to enable phone numbers as clickable elements - click to call/dial from a webpage to the dial screen on a mobile device. This is similar to how we enable email addresses as clickable elements using the mailto: URI scheme. Basically, replacing the href "mailto:" URI portion with "tel:".
References
https://developers.google.com/web/fundamentals/native-hardware/click-to-call/
https://www.iana.org/assignments/uri-schemes/uri-schemes.xhtml
Implementing this in Classic is probably not a relevant use case but the question led me to investigate how we can achieve this in Fluid which is the responsive UI for mobile devices! For something which seems as simple as described above, I had to jump through a lot of hoops (trial and error) to make this functionality work in Fluid.
Use Case
For example, wouldn't it be great if we can simply click on any phone number on the 'My Team' page under Manager Self Service (HCM) to directly launch the dial screen (with the number) on a mobile device?
If we look at the Employee email addresses on the 'My Team' Tile (HR_DIRTEAM_FLU Page), we can see that they are configured to reference the "mailto:" URI scheme.
The Fluid Attributes of the page field (Email Address):
Notice the Fluid (Tab) > Input Properties > Input Type? Also, notice the 'Generate As Hyperlink' option which is only available for 'email' Input Type? As we can see in the drop-down, there is no Input Type option for 'Phone Numbers' (tel:) in the Fluid Properties (Tab). So, we cannot use the Page Field properties to enable the phone number as a hyperlink (with the required "tel:" URI scheme).
Next, I wanted to explore if we can configure this programmatically (peoplecode) by taking advantage of these really useful Field Class 'Fluid Only' properties:
HtmlInputType
IsHyperlink
The expectation based on the Field Class API is that we could simply add the following code on the Page Activate PeopleCode or another appropriate event to make this work.
Expected PeopleCode Snippet
Unfortunately, using the %tel option (which would have been ideal) did not work. It appears that this PeopleCode Field Class Property value does not work as expected. It has no effect on the HTML generated to represent the page field element (bug?).
To workaround this issue, I set the HtmlInputType to %email instead. This is a hack to ensure the anchor tag with the href attribute and the "mailto:" URI scheme is generated in the HTML. Then, as a cleanup, I wrote a small piece of javascript to find and replace "mailto:" with "tel:". This worked!
Workaround PeopleCode Snippet
For the purpose of this demo, the above PeopleCode snippet was added to the end of delivered HR_DIRTEAM_FLU.Activate (Page Activate peopleCode). For a production use case, we may want to consider adding this code in an app class and then invoking the custom peoplecode using Event Mapping Framework in an effort to avoid customization.
Result of Workaround PeopleCode
As we can see, the phone number is wrapped in an anchor tag with the href attribute using the "mailto:" URI scheme.
Workaround JavaScript
Result of Workaround JavaScript
As we can see, the "mailto:" URI scheme has changed to "tel:" which is what we need to enable phone numbers as a clickable element on the webpage.
Demo on a Mobile Device
Link to MOSC Idea: Improve Field Class Fluid Properties and Page Field Fluid Input Properties
Please review and vote on this idea if you are convinced that it is a welcome enhancement.
Demo Environment Details
This demo was conducted on a HCM PUM Image 23 - PeopleTools 8.56.01.
Amazing Sasank...Absolutely loved the !dea.
ReplyDeleteThanks Sasank for posting this. But If the page has any field change code on other columns in page, then this Javascript code again reset to email than telephone.
ReplyDeleteAny solution for this please?
You don't need any javascript for email. You can simply use the Field Properties > Fluid (tab) > Input Properties > Input Type = Email.
DeleteIf you want to do this in PeopleCode, you can use the code here:
/* Custom Code Start */
Local Rowset &svRS = GetLevel0()(1).GetRowset(Scroll.HR_DR_SELECT_WK);
For &i = 1 To &svRS.ActiveRowCount
&svRS.GetRow(&i).GetRecord(Record.DERIVED_HR_TEAM).GetField(Field.PHONE_DISPLAY).HtmlInputType = %email;
&svRS.GetRow(&i).GetRecord(Record.DERIVED_HR_TEAM).GetField(Field.PHONE_DISPLAY).IsHyperlink = True;
End-For;
Hi Sasank, This is amazing information. I am trying to make use of this and instead of sending email I want a hyperlink to open a webpage . how can we achieve this?
ReplyDeleteJust create a regular hyperlink. I don't have an example, but look at some of the delivered pages and see if there are examples and use that approach.
Delete