[Contacts Plugin] Contact image

Forge Component
(6)
Published on 2018-12-26 by OutSystems R&D
6 votes
Published on 2018-12-26 by OutSystems R&D

Hi,

I wanted to show the image contact that is returned by the FindContact action structure, but I'm unable to show it. I've tried to first pass the result directly to an image without any luck. Then I've checked that the result seams like an URI (something like content://com.android.contacts/contacts/438/photo. what made me think on using the File Plugin from forge to be able to use it after on the image url. I've tried to use the GetFileUrlFromUri function, but basically this is always returning an empty string when I pass the URI that was returned.

Is there anyway to display the image of a contact that is returned by the plugin FindContact results ?

Thanks

Same as this?

Yep, the issue is the same, but as seen on that post, we don't have an answer also :)

Same problem here...

What should I do with the url?

I will try to contact the creator of the contacts plugin.

SOS.... Any Successful update yet? I'm stuck too. Please Help!!!

Hi,

First of all sorry for the long delay on a reply.

OutSystems is currently looking into this and as soon as we have any news regarding this topic we will let you know.

Thanks a lot for your feedback guys.

Best regards

Tiago Leão wrote:

Hi,

First of all sorry for the long delay on a reply.

OutSystems is currently looking into this and as soon as we have any news regarding this topic we will let you know.

Thanks a lot for your feedback guys.

Best regards

Hi Tiago,

No problem at all! Hope you can get the Contact Pictures working.

If OutSystems is looking into the ContactsPlugin maybe they can fix the problem with dates (birthday) before 1/1/1900 as well.

For me it is a great plugin!

Thanks and regards,

Peter.


Hi,


I have been able to show the contact photo using the File Plugin and a JavaScript Node that gets the contact photo in Binary given a photo URI as an input parameter. Here is JS Node:


Name: GetContactPhoto

Input Parameter: ContactPhotoURI (Text)

Output Parameter: ContactPhoto (Binary Data)

Source Code: getContactPhoto_source.js (Attached)



Thank You,

Bruno Grácio


Bruno Grácio wrote:

Hi,


I have been able to show the contact photo using the File Plugin and a JavaScript Node that gets the contact photo in Binary given a photo URI as an input parameter. Here is JS Node:


Name: GetContactPhoto

Input Parameter: ContactPhotoURI (Text)

Output Parameter: ContactPhoto (Binary Data)

Source Code: getContactPhoto_source.js (Attached)



Thank You,

Bruno Grácio


Hi Bruno,

First let me thank you for your effort!
Unfortunately I didn't manage to get it working.

These are the steps I did:
1. Created Client Action function GetContactPicture with input parameter ContactURI. The function returns a ContactPhoto, binary data. The body is the JavaScript you attached to your solution.
2. I tried to call the function with the Uri from FindContact => Photos.Current.Value. The format of this Uri is like: /var/mobile/Containers/Data/Application/5DA7BEBD-2139-4EF9-AD58-A647F9A52EF1/tmp/contact_photo_95.
This didn't work.
3. I converted the above file path with GetFileUrlFromUri from the File Plugin, but this results in "blob://".

I guess some other conversion has to take place. Could you help me get on the right path?
I am using an iPhone, don't know if that matters?
One other question: you use console.log in your JavaScript code. How can I read the output when I don't use the webbrowser, but the smart phone?

A lot of questions... :-)
Thanks anyway for your effort!

Best regards,

Peter.


Hi Peter, let me see if I can help you.


I guess some other conversion has to take place. Could you help me get on the right path?

Android uses the path like "content://...", IOS uses the path like "file://...".


I am using an iPhone, don't know if that matters?

Yes, using an IOS you will need something like "file:///var/...", but the path you are using is possibly like "/var/...".

At Android, you don't have to do anything since o get the URI complete with the "content://...".

In my application I have to prefix my path with "file://", you can see a flow where I do this below.

UserAgent Assign: UserAgent = ToLower(GetUserAgent())

IsIOS if: Index(UserAgent,"ipad")>-1 or Index(UserAgent,"iphone")>-1

ContactPhotoURI Assign: "file://" + ContactPhotoURI


One other question: you use console.log in your JavaScript code. How can I read the output when I don't use the webbrowser, but the smart phone?

You have a helpful link to do this at https://success.outsystems.com/Documentation/10/Developing_an_Application/Troubleshooting_Applications/Troubleshoot_Mobile_Apps

The part of the developer tools for iOS please refer to this link https://developer.apple.com/library/content/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/GettingStarted/GettingStarted.html

If I am not mistaken you will need a macOS to do this.


Hope it helps.

Kind regards,

Diogo

Solution

Hi everyone,

Because I started this conversation, let e share with you a simple oml, with what was talked here (and also on the background with support from outsystems).

Basically for this to work, you have to have to reference also the file plugin from forge (https://www.outsystems.com/forge/component/1633/file-plugin/) alongside this one. The attached oml contains a WB ContactPhoto that receives the photo URI returned by the contacts plugin and does the "magic" with the file plugin. 

Kuodos to everyone in the thread and also outsystems support team for the final solution


Solution

Diogo Paulo wrote:

Hi Peter, let me see if I can help you.


I guess some other conversion has to take place. Could you help me get on the right path?

Android uses the path like "content://...", IOS uses the path like "file://...".


I am using an iPhone, don't know if that matters?

Yes, using an IOS you will need something like "file:///var/...", but the path you are using is possibly like "/var/...".

At Android, you don't have to do anything since o get the URI complete with the "content://...".

In my application I have to prefix my path with "file://", you can see a flow where I do this below.

UserAgent Assign: UserAgent = ToLower(GetUserAgent())

IsIOS if: Index(UserAgent,"ipad")>-1 or Index(UserAgent,"iphone")>-1

ContactPhotoURI Assign: "file://" + ContactPhotoURI


One other question: you use console.log in your JavaScript code. How can I read the output when I don't use the webbrowser, but the smart phone?

You have a helpful link to do this at https://success.outsystems.com/Documentation/10/Developing_an_Application/Troubleshooting_Applications/Troubleshoot_Mobile_Apps

The part of the developer tools for iOS please refer to this link https://developer.apple.com/library/content/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/GettingStarted/GettingStarted.html

If I am not mistaken you will need a macOS to do this.


Hope it helps.

Kind regards,

Diogo

Hi Diogo,

It took some time, but yessss... your solution works!

Finally I'm able to show the contact pics on my iPhone. It's good to know that there are differences between Android and IOS, actually it would be a good idea if the plugin would handle this. But that doesn't matter, I'm happy... :-)

Regarding the debugging of mobile applications that need the device to run... I'm writing loglines to a local database now and inspect these. In my opinion not the most beautiful way, but it works.

Thanks a lot and best regards,

Peter.


David Cruz wrote:

Hi everyone,

Because I started this conversation, let e share with you a simple oml, with what was talked here (and also on the background with support from outsystems).

Basically for this to work, you have to have to reference also the file plugin from forge (https://www.outsystems.com/forge/component/1633/file-plugin/) alongside this one. The attached oml contains a WB ContactPhoto that receives the photo URI returned by the contacts plugin and does the "magic" with the file plugin. 

Kuodos to everyone in the thread and also outsystems support team for the final solution


Hi David,

I want to thank you also for the oml, it helped me finally being able to show the contact pictures!

Best regards,

Peter.


David Cruz wrote:

Hi everyone,

Because I started this conversation, let e share with you a simple oml, with what was talked here (and also on the background with support from outsystems).

Basically for this to work, you have to have to reference also the file plugin from forge (https://www.outsystems.com/forge/component/1633/file-plugin/) alongside this one. The attached oml contains a WB ContactPhoto that receives the photo URI returned by the contacts plugin and does the "magic" with the file plugin. 

Kuodos to everyone in the thread and also outsystems support team for the final solution


Hello,

 i tried this, and getting error as "window.resolveLocalFileSystemURL is  not a function"... Please help on this



Shweta Gedam wrote:


Hello,

 i tried this, and getting error as "window.resolveLocalFileSystemURL is  not a function"... Please help on this



Hi Shweta, I wrote this some time ago, but I downloaded the PhotoContactsDemo.oml module and resolve all the references (the Contacts Plugin and the File Plugin) and didn't have an error.

The window.resolveLocalFileSystemURL should be defined by the fileplugin, did you include it on your application ? Also being a native mobile plugin, did you generate the mobile application again after you added it to your mobile application ? 

When you add new mobile plugins that require native code on the mobile, you need to generate the mobile app again.


David Pereira Cruz wrote:

Shweta Gedam wrote:


Hello,

 i tried this, and getting error as "window.resolveLocalFileSystemURL is  not a function"... Please help on this



Hi Shweta, I wrote this some time ago, but I downloaded the PhotoContactsDemo.oml module and resolve all the references (the Contacts Plugin and the File Plugin) and didn't have an error.

The window.resolveLocalFileSystemURL should be defined by the fileplugin, did you include it on your application ? Also being a native mobile plugin, did you generate the mobile application again after you added it to your mobile application

window.resolveLocalFileSystemURL should be defined by the fileplugin, did you include it on your application ? 


Could you please elaborate this So that i can get more understanding? 




Shweta Gedam wrote:

Could you please elaborate this So that i can get more understanding? 

Sure :). What I was saying is if your main mobile module (the one with the screens) has a reference to the file plugin from forge, On the following screen you see the PhotoContactsDemo module that I've posted on top has this.

You can download the module from the post above (https://www.outsystems.com/forums/discussion/26752/contacts-plugin-contact-image/?utm_source=community&utm_medium=email&utm_campaign=forum-reply=#Post100425), and test it on your environment. Just refresh the references and publish.

To test the demo on a mobile, you need to create a new mobile app and move the module there. Then you can generate the apk test it.



David Pereira Cruz wrote:

Shweta Gedam wrote:

Could you please elaborate this So that i can get more understanding? 

Sure :). What I was saying is if your main mobile module (the one with the screens) has a reference to the file plugin from forge, On the following screen you see the PhotoContactsDemo module that I've posted on top has this.

You can download the module from the post above (https://www.outsystems.com/forums/discussion/26752/contacts-plugin-contact-image/?utm_source=community&utm_medium=email&utm_campaign=forum-reply=#Post100425), and test it on your environment. Just refresh the references and publish.

To test the demo on a mobile, you need to create a new mobile app and move the module there. Then you can generate the apk test it.



Thanks for quick reply David.. I have already referenced File plugin into my application. I checked the same flow as it is in your module, still it is not working showing same error. 



Shweta Gedam wrote:


Thanks for quick reply David.. I have already referenced File plugin into my application. I checked the same flow as it is in your module, still it is not working showing same error. 



Did you generate the mobile application again ? Normally when you add new mobile plugins you need to generate the mobile application, uninstall the old one and install the new version.

Also this should only work on the mobile device. Don't know if you're testing on the web only. 



David Pereira Cruz wrote:

Shweta Gedam wrote:


Thanks for quick reply David.. I have already referenced File plugin into my application. I checked the same flow as it is in your module, still it is not working showing same error. 



Did you generate the mobile application again ? Normally when you add new mobile plugins you need to generate the mobile application, uninstall the old one and install the new version.

Also this should only work on the mobile device. Don't know if you're testing on the web only. 



Actually the file plugin was already there in my app used in other places, although i have generated native app again and installed it, without uninstallng previous but it has been updated to the latest version after installing newer but still the issue is same. 

Let me clarify some more details which might be helpful for you to understand my problem:

1) I'm using Android not an IOS. 

2) I think the problem is in JS node which includes 

window.resolveLocalFileSystemURL() this function.  I have just copied your JS as it is,  is this the problem, Do i need to install that JS node externally? Please help

Shweta Gedam wrote:


Actually the file plugin was already there in my app used in other places, although i have generated native app again and installed it, without uninstallng previous but it has been updated to the latest version after installing newer but still the issue is same. 

Let me clarify some more details which might be helpful for you to understand my problem:

1) I'm using Android not an IOS. 

2) I think the problem is in JS node which includes 

window.resolveLocalFileSystemURL() this function.  I have just copied your JS as it is,  is this the problem, Do i need to install that JS node externally? Please help

Hi Shweta.

Yes I'm also using Android. Yesterday I took my example, refreshed the references with the latest version from the contacts and the file plugin and generates a new app, and I didn't had any issue with it. 

When I saw the error I saw that it was on that module I saw that function resolveLocalFileSystemURL() is defined on the file plugin (if you open the plugin and search for it you will see that), that's why I was asking if you added the right references and built a new apk (normally plugins require to build the shell/APK of the application again).

Maybe there's something that is still missing. Can you provide here your modules so I can check on my side what could be happening

Thanks