SalesForce integration — custom UI functionality - force.com

My company wants to use SalesForce as its backend for a new Web application that we are building. We will host the Web application with an ISP on our own servers. The integration points mainly involve sending customer and transaction data via the API. In essence, the Web application will have its own database, but will send over customer and transaction data to saleforce at key points.
The plan is to use SalesForce as a backend, so that we can save some time in developing all of this. What I don't understand though, is how custom functionality is handled by SalesForce?
Let's assume that our application offers some functionality. How would we expose that functionality in the SalesForce application? Initially I had imagined we could reference this function/page (in our app) via an iframe from the salesforce app — but this does not seem to be possible... are there any other options?
So, to summarise, I need to show parts (or pages) of our web app in the SalesForce UI. If I can achieve this, it would mean that the customer services team can do everything in one interface (handle tickets, update user data etc.).
I am at my wit's end with this, it's even causing some sleepless nights. I would appreciate any useful advice!

If you create a visualforce page using a standard controller, you will be able to embed that visualforce page on page layouts of that object type. You can then iframe your web app into that visualforce page.
I.e. if you create the following visualforce page, you can drag it onto your case layout:
<apex:page standardController="Case">
<iframe src="http://your-web-app-url" style="width: 100%; height: 100%;" />
</apex:page>
You will need seperate but similar visualforce pages if you need your app on other objects than case.

Alternatively, you could expose your data to Salesforce via some API (xml or Json) and then build your application natively in Salesforce with apex and vf. This presents a different set of challenges, but the user experience is better in my opinion.

Consider using Force.com Canvas, now GA, which is an added-value iframe with more security and easier integration with Salesforce APIs than raw iframes - see https://stackoverflow.com/a/17484855/992887

Iframes should be possible - If you are using standard layouts, try creating Visualforce components containing iframes - like the example above.
If it is a simple application/part, I would recommend developing the application on Force.com itself - We have build some very complex enterprise level apps on Force.com - although I would add that Apex/Visualforce is an immature language for building complex apps and many times you will be dealing with its limitations. But once you make it, it works like a charm.

Related

Link from a Fiori application to a normal web application

It's not a programming question but much more of a concept question.
I have a web application which was built using HTML and JS on the front-side and using Spring MVC on the back-end.
And I want to create a dashboard which can give me a lot of KPI data in a panel just like Fiori menu has.
What I'd like to do is to create those dashboard using Fiori, and when I click on the Fiori panel, it would move me into my web application HTML page.
Is it possible to be done?
Well, yess, you can open any url from a Fiori App or dashboard. You can even create iFrame Integration (if your “other” app will allow it).
You may have deeper integration (since Fiori is also a web app in the end), but that would require deep understanding of both. And may (most probably will) require mods on both apps

Right way to design a mobile ASP.NET MVC 4 data entry application with HTML5 offline capabilities

I'm creating a PoC of an ASP.NET MVC 4 mobile application (tablets) for field operators that needs to support offline capabilities. It's a relatively simple data entry application with a WebAPI backend that will use a SQL database as persistent storage.
This is the first time I'll be implementing offline support, so I'm a bit unsure of which is the best way to design this. Right now I can think of two ways, and not sure which one is better or more correct.
What I want is that whenever there is internet connectivity, the information is retrieved from the server. If the connection is lost, I want the latest information to be cached/served and available to display to the user.
Based on a few tests that I've made, the way the HTML5 offline support appears to work is that as soon as any of the Views is loaded, the browser will check the manifest and cache the version of each page at that moment of time. If my understanding is correct, that means that if the user adds new entries after the browser downloaded the manifest files, then those records would not show in the offline version.
One way I can think to work around that is to change the manifest version (since I'm generating it dynamically) every time it is served, but i feel that would defeat the purpose..or at least be incredibly inefficient bandwidth-wise.
The only other alternative that I can think of is not using regular MVC (not passing the records/db information as the model property or a ViewBag property) to display the records, but just retrieve the json for the page information needed and save in local storage. Then, generate the view using a template or javascript based on the information in localstorage. That would work either online or offline, wouldn't it?
I'm not sure if I'm approaching this the wrong way. Would building an SPA or a simple HTML/javascript application be more appropiate? Maybe using a JS framework? At this point I have some ability to determine what technology or framework we'd use.
Any guidance is greatly appreciated.
Based on a few tests that I've made, the way the HTML5 offline support appears to work is that as soon as any of the Views is loaded, the browser will check the manifest and cache the version of each page at that moment of time. If my understanding is correct, that means that if the user adds new entries after the browser downloaded the manifest files, then those records would not show in the offline version.
This is why you shouldn't use server side rendering. When the server mixes data with formatting before sending to the browser it means that the browser can't tell the difference between the two. HTML5 and Javascript are perfectly capable of handling templating on their own so why not let them?
Write your MVC application as nothing but a series of controller methods. Do not use "views" per-say. Instead use straight HTML files that use javascript to make AJAX requests to the server for data. Populate the HTML view with the data and you're golden. Then you can cache the HTML files because they're static and you can save the data separately for offline mode.
Adding to the accepted answer, there's a thorough post in this matter titled:
Build an HTML5 Offline Application with Application Cache, Web Storage and ASP.NET MVC.
The guy explains everything using a sample/complete app and do a great job explaining each and every point.
Besides that, if you really want to get the crème de la crème from modern web dev with offline capabilities, I'd suggest you take the 2 parts course by extraordinaire/star developer John Papa. It uses the SPA = Single Page Application UI paradigm.
The course is available at Pluralsight:
Building Apps with Angular and Breeze - Part 1
Building Apps with Angular and Breeze - Part 2
Enjoy as much as I'm enjoying it. Make sure you check this keyword/feature in the course: WIP = Work In Progress.
If you're interested, here's is a repo where I keep the updated course's code:
https://github.com/leniel/SPACodeCamper

Converting a regular MVC site for use in phonegap

I have a site that's done using ASP.NET MVC and jQuery. Is it possible to modify my existing project without too much of rework so that it can be used in phonegap to create iphone/android apps?
Here's an approach: move your logic to an MVC WebAPI (or other REST/webservice) project, then convert the MVC site into a simple html/javascript/css/image site (Mobile site). Then refactor your Mobile site to use Ajax/JS to query the WebAPI/Rest services you created. Once you've separated your code this way, you can then package the Mobile site with Phonegap. I'm not sure how much work that will be for you or your project. If you're using a lot of Html Helpers or Razor markup in your views it may be too involved.
The core point of my suggestion here is to separate your mobile UI layer and the backend processing layer so you can only package the Html5/UI/Javascript layer with Phonegap and leave the backend processing on your web server. I don't think I need to explain this, but obviously the app packaged with Phonegap is not going to have the MVC/.Net framework available on the mobile device to render views or execute controllers, etc. By migrating your UI to be simple Html5 and Javascript you can use Ajax/Jquery/Javascript calls against your backend, which you will probably want to host in ASP.Net MVC WebAPI.
Edit: Guess there was some confusion about my suggestion. I'm not saying this is the only way to do go, but this is what I'm familiar with as it's how our team builds our desktop/web + mobile + phonegap + mvc4 + webapi + kendoui application. This pattern works well for us so maybe it'll work for you too, or at least give you some ideas on how to structure your solution. Good luck!
I'm not sure but you need a server to compile the ASP.NET right? so I don't think that will work for you. I think you need to work with AJAX to do your ASP.NET work and separate your ASP.NET code and your HTML-jQuery because Phonegap wants a index.html file. You can store your ASP.NET files at a server tough
The answer to your question really depends on the type of site you are trying to convert. Are you just trying to put a native framework around HTML and get your app into an app store?
If it is is mostly or entirely informational in nature and you have simply used MVC to build brochure-ware type pages then it should be fairly easy to move. This assumes that there is little to no logic other than page to page navigation.
If your site instead pushes a lot of data around that relies on a back-end server you will need to re-architect it to store data locally or pre-fetch it via a manifest. Next you will need to implement a strategy that allows you to push your local data back to the server.
Does you app need to run in a disconnected state?
Phonegap is one of the options if you want to target multiple mobile platforms & may be most widely used. Since you are using jQuery, jQueryMobile will be a least learning-curve path to use. Effort is mostly on the front-end UI and will depend on how many screens you want to design to provide a sub-set or the full set of functionality you already have on the web UI. Most likely you will have to redesign your screens using the jquery-mobile UI widgets documented here. It is also a good way to show it to your customer the initial screen design with navigation.
jquery mobile is great for learning and designing , but it's slow in the web browser control that phone gap runs in .
you'll need a more lightweight framework for this .
you can use an inappbrowser control to show your site in case it's responsive , but you wont have the device camera and contacts and so ...
take a look at : http://docs.phonegap.com/en/3.0.0/cordova_inappbrowser_inappbrowser.md.html#InAppBrowser

Mobile site for existing app- New application or conditional rendering in existing app?

I am going to create a mobile site(using Sencha touch) for an existing website. The functionalities are coded already using Ruby on Rails. If I go with adding mobile site to existing one it will make me to add conditional rendering based on the request headers or else go with creating a separate app on m.mydomain.com. I am a bit confused. Please guide me to make a decision.
I would recommend creating conditional rendering inside the existing application, primarily because you will have access to the models and utility classes within that application.
If that's a significant problem for you, you could separate out the two codebases and have the mobile site be an engine of the application, so you would still have access to the main application's classes.
I would go with m.mydomain.com and redirect the user to this automatically based on their device. T
he good thing about this is that you can have a link at the bottom of the page that is "View full website" in case the mobile site isn't what the user wants.
This also makes it easy to have separate views for the mobile site, keeping them cleaner.
I recently made a sample app that you can view on github that does something very similar. The only difference is that I am not detecting the device, I have the user visit the appropriate URL. I also used jquery mobile, but the concepts are very similar. https://github.com/jfriedlaender/mobile_blog

Can Anyone Recommend an ASP.NET MVC Group Chat Control?

I need to provide a window on an ASP.NET MVC web page where registered users of the site can group chat live.
Can anyone recommend a component or control that can provide real-time group chat that I can embed on an ASP.NET MVC page?
I am willing to use free or commercial components, as well as a web service.
I looked into a few web 2.0 approaches, like:
Campfire - problem is, it takes you to a separate site, and I can't embed the chat window (at least that's what they said when I contacted support)
Meebo - requires that users have Meebo accounts (I think)
What's unique here is that I need to enable site users to chat live with each other - not with a central support person (like LivePerson, or the Meebo widget).
All you really need is an action to post new messages to, an action to poll for updates, and a div to place the items.
You can accomplish all of this pretty easily with ajax and those two actions on a ChatController in ASP.NET MVC.
+1 for Campfire though, it's a really well polished tool.
There's an unofficial developer API for Campfire called Tinder.
I saw that that 37 Signals was promoting it on their website here, so it's probably pretty good.

Resources