SmartScheduler - A Field Service Application [SalesForce Classic with Bootstrap, SalesForce1 Application] with Barcode Scanner, Image Capture/Upload and E-Signature

Hi All,

I have built a Field Service Application for Managing Cases, Work-Orders and WorkOrderLineItem.

Based on that Work-Order and Work-OrderLineItem, I am creating jobs and jobsubmissions.

In this application, I have built a SalesForce Classic Application to create and manage workorders. A Salesforce1 Application and optionally Salesforce Public Site, for Field Technician to submit the work-orders which have functionality to attach the photos by capture or upload, Barcode Scanner and E-Signature.

The Cases could be created by Email, Phone, Calendar or manually which could be converted to work-order if required field service than the work-order could be managed, assign/schedule for field technician.

Here are some screen-shots for the Field-Technician Application:

Google-Map: for the route, distance in miles based on the Address and Gelocations. Onclick of the given displayed on the tooltip, Technician could see the Job Detail.

See All Jobs:

Job Detail:

Process Job-Submissions:

At the time of job-submission, field-technician can capture/select the images to upload, Scan Barcodes and take E-Signatures from the client.

Barcode Scanning:

Uploading Attachments:

E-signature:

Please let me know your views on this if any of you have some suggestions for this application. I have built this application just for a good practice and learning for Application Development Concepts as a managed package and for Salesforce App-Exchange consideration implementation.

As Salesforce has introduced its own Lightning Field Service Application recently so I dropped this idea to place on AppExchange.

Thanks All for reading, Happy Coding and Be in touch for good work.

Amit Goyal

Email: amitgoyal09@gmail.com

Skype: amitgoyal09

Overlay Screen on Visualforce Page without any CSS or Plugin

Hi All,

My todays post is related to the standard solution for Overlay Screen, I have suffered a lot whenever I got some implementation for the Overlay screen because I did that with CSS and so many things to remember and apply in this. Recently I have found a standard solution for the Overlay screen , which is not required to apply any CSS and no headache to apply the validation and Error message from Apex; we could do that through simple javascript functions.

Take an Example: Here I have a button, which will trigger a javascript function to display the popup screen.

Onclick of the button, we will get a overlay screen like the given snapshot.

We could bind the inputtext or inputfields as well in case we need to accept some picklist or lookup values etc.  Onchange of the textboxes we could validate the value and assign in a javascript variable. Onclick of Ok button it will call a javascript function which will validate the values and call actionfunction to perform the logic in apex controller. Onclick of cancel it will simply close the overlay screen. The performance is better and faster in comparison to custom overlay screen.

When you will press ok, you could see a message for success of the logic like in the image given below.

Check the code below:

Visualforce Page:

Apex Controller:

Hope this will be helpful for you.  Happy Coding J

Feel free to contact if you have anything in which I could help you.

Thanks,

Amit Goyal

Email: amitgoyal09@gmail.com

Skype: amitgoyal09

ActionFunction is not calling the actionmethod on Visualforce Page: Issue, Approach and Solution

Hi All,

Recently I faced an issue at the time of developing a dynamic and advanced visualforce page with a custom template and standardstylesheets=”false”. By the way these parameters were not related to the issue but I am just mentioning my implementation in consideration.

The Scenario is, I am having a command button or html button, onclick of that I am calling a js function and from that js function I am doing something on the visualforce page like setting value of some DOM Component and styling etc… After that I am calling my actionfunction to call an Action Method which is connected to a function in my Apex Controller.

Code Example:

actionstatus id="status1" startText="Processing..." 

actionFunction name="saveRecord" status="status1" action="{!SaveRecord}" reRender="errMsg" 

HTML Button tag with type="button" and onclick="saveRecord (); return false;"
OR commandButton onclick=" saveRecord (); return false;

The Issues is, onclick of the button my js function is getting called, from that js function my actionfunction is getting called instead of that reloading the page. I solved the reloading by putting return false on my button at the time of calling the javascript function. I could see the status in my UI but that actionfunction still not calling the actionmethod. I am able to see the console logs before calling the actionfunction and after calling the actionfunction with no js error. I am able to see the actionstatus but there is no entry in the debug log for my save method call. I tried by replacing the apex function by thinking may be some error in apex function which is doing something wrong but nothing worked.

Strange was I haven’t found specific solution for this issue in my search anywhere so I applied the following approach to find the cause of issue.

Approach to find the cause: I removed all my visualforce code and placed one section by another and found that in a Selectlist I directly reference a lookup field in value parameter, when I was placing that portion, my button is not working.

Solution: I removed that direct reference and used a string parameter instead. Onchange of that selectlist I populated the value of the string to the lookup field and my button starts working, means the actionfunction is calling the action method now.

Suggestion: Directly referencing the lookup field or Id on the visualforce page could cause unexpected behavior in your functionality sometime not all the time so try avoiding that.

Thanks,

Amit Goyal

Email: amitgoyal09@gmail.com

Skype: amitgoyal09

Adding Picklist values conditionally on the Visualforce page

Hi All,

Thanks for appreciating my previous blog posts and sorry for the delay for in my new blogpost.

Today I am sharing with you, how can we add some picklist value on the visualforce page conditionally.

Scenario, Like if you have some requirement in which you don’t want to accept new record with some status or picklist value but you want to display that for existing records. You can’t consider inputField in that case as well. So the simple, easier and solution with less effort is:

Create a list in your Apex Controller and display on your Visualforce page with apex:selectlist and apex:selectoptions, so that all required field will be there and add the additional value by using apex:SelectOption with itemDisabled property by define the condition.

One more thing, I wanna share and ask, we have a rendered attribute for the apex:SelectionOption but I were not getting that property functional in my practice, so if anyone knows something about the reason, please share with me.

I will get back to you with my next post soon. Happy Coding J

Feel free to contact if you have anything in which I could help you.

Thanks,

Amit Goyal

Email: amitgoyal09@gmail.com

Skype: amitgoyal09

Polling System - Component Using Lightning Design System and Challenges with RemoteObjects

Hi All,

My today’s post is related to Polling System - Component, I made this polling system component using Lightning Design System so that we could display multiple polls together on a single page based on our design like vertically or horizontally or as this is a component we could use it on multiple pages by using the same component [As you all must know the use of Visualforce Component].

Challenges with RemoteObjects:

While developing this component, I face some challenges which I want to share with you all, like as I have just started using RemoteObjects in this month so it’s a new experience and fun for me. I tried to use RemoteObjects in Components but I was not able to do that as we could use that only in the page.

So I built the component by using Apex and tried to use the RemoteObjects on the page to the get the list of polls and pass the ids [User-Id, Poll-Id and Serial-Number or you should say Record-Number to manage the unique DOM element ids] to the component through that list in the RemoteObjects callback but that is also possible.

Reason: The reason is RemoteObjects are page centric so anyhow we could not use the RemoteObjects with the Visualforce Components; it was my finding for this week. Let me know if I am wrong somewhere, I will be more than happy if you rectify my mistake if I am making any.

Let’s come back to polling component which I made:

I have built the 4Options and 2Options polling for my Demo, if you have any more or less options requirement than you could modify the implementation based on that as well. Here is screenshot of the Polling-Page on which I have used the Polling-Component.

You could use this component with content at any place in section or could display the multiple polls on a single page vertically or horizontally, that is all based on your design like Grid or Table whatever you need to apply.

After selecting the option, you will need to click on the Submit button to poll. After submitting the Poll with display the result the result like in the following screen:

I am planning some more changes to display the results in more meaningful and efficient way, let me know if you have some idea on this.

If you are having some requirement or planning to try this or need help to know the technique or guidance, feel free to put your suggestions/comments/ask questions or connect with me.

Happy Coding J

Thanks,

Amit Goyal

Email: amitgoyal09@gmail.com

Skype: amitgoyal09

Public Site - New Design with Lightning Design System and Related Stuff

Hi All,

Today I am sharing a lot of work I did so far, it’s Salesforce Public Site which I have built by using a combination of Lightning Design System and AngularJS, Remote Objects, Visualforce and Apex Controller.

Like I shared my Web-To-Lead Form, [which I built by using Lightning Design System and AngularJS, Remote Objects on Visualforce Page] with you in my last post. This is an enhanced for that. I am using that Web-To-Lead Form on this Public Site as Enquiry-Form Menu in the Top Right Section.

I have connected my old public site [Visualforce page and Apex], new public site with Lightning Design System and My Blog with each other so that you could navigate to check the Demo and my work.

Here is a screenshot of my blog and the navigation:

Live Demo: Blog 

Here is the screenshot of my public site – New Design with navigation and menus:

Live Demo: Public Site - New Design

I have given a functionality to post comment through this site, so you could put your comments, after commenting on this you will get a email if comment successfully submitted without errors, it any error than you could see that message on the page. Please comment, what you think about the pages and your views on this so I could add the functionality whatever you need to see.

I could help you with that if you need any specific functionality or guidance regarding that. If you will click on the comment button, you will see a section for comment as in the following screen: 

Here is the screenshot of my public site – Old Design with menus:

Live Demo: Public Site - Old Design

All three screens are linked with each other so you could test the design, flow and functionality. Let me know your thoughts on this or how could I improve as per your views.

In the next step to the Public Site – New Design, I will share with you the courses which I could offer with my Online Training's and the Demos and Applications which I have built and whatever I could share with you. 

Happy Coding :)

Regards,

Amit Goyal

Email: amitgoyal09@gmail.com

Skype: amitgoyal09

WebToLead Form by using Lightning Design System, RemoteObjects and AngularJS on Visualforce Page

Hi All,

I have built a form by using AngularJS and Remote Objects with Lightning Design System, It was really a fun to develop this functionality. We have two options while working with Lightning Design System as per my present knowledge.

1.)  We could apply classes to our Visualforce DOM Elements from the Lightning Design System CSS to avoid plenty of work and changes.

2.)  We could use Remote-Objects to connect our page with the Objects and Applying JS Validation on the data and fire DML actions.

In the second option we could have some challenges and bit time consuming for fresher’s like me for this page but as this is for the study, it’s pretty much interesting to work with AngularJS and Remote Objects with Lightning Design System.

Below is the screenshots of the form which I have built.

I have created a header, footer as Visualforce component to display on my Web-To-Lead page.

You could check the live Functionality on the link given below:

Web-To-Lead Live Link

Let me know if you need any guidance on this. I will keep posting new and interesting things like this. Hope you will like it. Happy Coding J

Regards,

Amit Goyal

Email: amitgoyal09@gmail.com

Skype: amitgoyal09