Camera Plugin - Prerequisite

For any other framework, please use appropriate ways to add camera plugin. For this post purpose, I have added cordova-plugin-camera version 4.0.3

PS: Input file will not show camera option if camera plugin is not added to project. This is a prerequisite step if camera option is needed.

Use Input [type=file]

The purpose of using an input file is basically for two reasons:

Gives an option to browse files in file explorer

Allow selection of multiple files in a single go.

With Cordova camera plugin in markets, It is very difficult to find an appropriate plugin which allows multiple selections. This was my strong reason to use Input[type=file]

Step by step process of solution

Step 1: we should be able to select photos or take photos. For this, we need to handle onchange event on the input file. We can handle that in Angular by creating a directive and binding change event with a method like below:

Step 3: With above input element, once files are selected, they will be passed to onFilesSelection method of the controller which will perform a reading of files/images binary data. This is possible with FileReader web API. By calling readAsDataURL, we can read the binary data of files and display them accordingly with provided base64 encoded string

Step 4: Put base64 encoded string in an array to show images on UI in thumbnails. The best way to display all files is to check the extension.

If files are images, use their base64 as it is in src attribute of img tag.

If files are non-images, replace src with pre-defined images for every extension like pdf, txt etc.

Step 5: Provide a fullscreen view to show full-screen images with some standard actions on thumbnails click.

Screenshots

PS: Screenshots are taken from IOS simulator which don't support camera. This is the reason Take a photo option is not coming. This works absolutely fine on device considering camera plugin prerequisite.

Full Code - FilePicker

Hope this will help to understand the core concepts of file handling stage 1 which is reading files.

As I said in my introduction post, Please try to do hands-on and see how far you can go & extend this solution to achieve point 2 in my introduction post i.e. Save images/files locally. You can also go to my introduction post by clicking on button at bottom of this page.

Please do give your feedback if you like this post or want to improve something in solution. I will soon write another post for covering point 2 mentioned above.

Stay tuned!!

Today, I am starting this tutorial Offline Pro to give basic step to step process to handle Salesforce files on mobile specifically in offline mode. This is something I designed recently and want to share my knowledge amongst all.

In this post, I will give a basic introduction to all the steps that are needed to design this solution. To make this tutorial interactive and easy, I am breaking the full solution in multiple posts and will write them one by one.

At the end of every post, I would really recommend everyone to do some hands-on and try to find the next bit of solution. If you guys are able to find the next bit before my next post, please do comment so that we can cross check. If you guys think, the solution can be better or you need more info, please write in comments sections and we will discuss that further.

Below is the screenshot of two basic operations that we need to perform.

Screenshot

Following will be my discussion points in various posts:

Create a File Picker to enable camera(to take pictures) or to pick photos or files and preview them.

Save images/files somewhere on your device to be picked at the time of sync.

Pick images/files(from stored location) and sync with Salesforce

Delete/Archive images when not needed.

Create a File Downloader to download images on demand or automatic on sync.

Important

For the purpose of this tutorial, I have used Ionic1/Angular1 to make a hybrid app but the concepts are same. You can use any language for hands-on.

To start, please click on button at bottom of page to go to first part of it.

This post is related to my previous post Introduction of translation in your project. In this, I tried to cover a basic concept of filter to format date in correct timezone locale mentioned in one of translation files.

PS: This post is for Angular1 and using Angular Translate for translation management.

Use Case Scenaio

Suppose, you are using translations and you want to store dateFormats in same file just to have everything in same place for that language.
In order to use that format and change your date appropriately, we need to create a custom filter that transforms the date into mentioned format. Now getting the format from translations folder(using $translate) is an asynchrounous processes so we have to wait for our format to convert and show on UI. I googled many posts and able to find a solution of creating a custom asynchrounous filter. Below is the full code:

To get started with Angular Translate, please visit my previous post here.

Hope this helps!

]]>https://blog.lkatney.com/2018/01/05/custom-asynchronous-filter-to-format-date-using-translations-angular-translate/00ea1f99-f6f0-4fb3-b1f0-ed7686107575Fri, 05 Jan 2018 10:55:17 GMTMany of us face such situations wherein we want to add translations within your personal application or projects to address a global audience. The fact is true that people adopt these applications more easily than any other applications by making their day-to-day use in native languages.

In this post, I am going to overview about an angular library which is very simple & popular and most of you have heard about it.

PS: This post is for Angular1 and using Angular Translate for translation management.

Angular Translate

This library is very flexible and easy to use. It is pretty scalable and allows the addition of new languages in minutes without any pain. You can go to this link to know more about it.

Approach

This library provides so many ways to write down and store your translations (like variables etc.) but my personal favourite is to store them as segregated files per language under a folder as it is very easy to maintain them and addition of new languages(files) would be very easy in future with limited changes in core files.

Below are the configurations that you need to do to setup your project to look to these files specifically for translations

In this example, app supports only English & French languages that is why it is registered only for en & fr keywords.

In case of integration wherein your application is getting locale information from another system, there can be a possibility that you might get different languages code, for example, en-US or en-GB for US and UK respectively. In this scenario registerAvailableLanguageKeys function can be used to map all combinations of en languages (en-US and en-GB) to pick single source file for translations instead of having separate files.