Salesforce1 Developer Week
•Transferir como PPTX, PDF•
5 gostaram•2,606 visualizações
Developers and students from 60+ Developer Groups spanning 22 countries will be working together to explore Salesforce1 Platform technologies. Salesforce experts will be on-hand at each event to help you reach new heights with your development skills. Join the group nearest you to participate in this global event: http://bit.ly/QLX9Kv Our experts will train you on how to use, configure, and develop the Salesforce1 mobile app. Take a look at this presentation to see what's in store!
Recomendados
Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (20)
Semelhante a Salesforce1 Developer Week
Semelhante a Salesforce1 Developer Week (20)
Mais de Salesforce Developers
Mais de Salesforce Developers (20)
Último
Último (20)
Salesforce1 Developer Week
- 1. Salesforce1 Developer Week Bringing developers around the world together to build mobile apps.
- 3. The Salesforce1 Mobile App RUN YOUR BUSINESS FROM YOUR PHONE.
- 4. Introducing Salesforce1 All your past investments... Drag and drop UI customization Notifications Platform Publisher Actions ...now in the future Download Salesforce1 App today All Your Customizations All Your Devices All Your CRM All Your Apps https://yourinstance.salesforce.com/one/one.app
- 5. An App That Anyone Can Build Check out this app. It’s completely custom and requires no coding.
- 6. Mobile Navigation (aka Left Nav) Mobile Administration Mobile Navigation
- 7. Page and Compact Layouts SObject Page LayoutSObject Compact Layout
- 8. Another app that requires no coding… Let’s look at another app. This one has a bit more action in it.
- 9. List Views Sobject Tab New List View Tapping an object in the Left Nav displays your List Views and your Recent records
- 10. Expanded Lookup Parent Sobject Compact Layout Child SObject Page Layout Expanded Lookup Show additional info for Parent records
- 11. Built-in Map Integration for Accounts & Contacts Account any record populate Billing Address or Shipping Address fields Map icon will automatically display at the top of the detail page.
- 12. Spring ‘14: Twitter component for Social Contacts Customize Social Accounts & Contacts Social Accounts & Contacts Settings enable Social Accounts & Contacts Enable Twttier Contacts Page Layouts Edit select Components, drag the Twitter component to the Mobile Card section Contacts Any record enter twitter handle Grabs Twitter feed for Contact Will add new screen shot
- 13. Publisher Actions Global: Create Global Actions Object Specific: SObject Buttons, Links & Actions New Action Page Layouts control which actions show in what order
- 14. Let’s hook up to another service Directions and check-in app – HTML5 geolocation API – Google Directions mashup – Radial distance query Global vs Object Specific
- 15. Visualforce – Mobile Cards Mobile Cards - Visualforce Pages on Record Detail (VF page needs to the extend Standard Controller)
- 16. Visualforce – Publisher Actions Visualforce Pages as Publisher Actions (VF page needs to the extend Standard Controller for use with Object Specific Publisher Actions) JavaScript Pub-Sub library available to interact with the publisher publisher.setValidForSubmit publisher.post publisher.close
- 17. Visualforce in Salesforce1 <apex:page docType="html-5.0" …> ‘Available for Salesforce Mobile apps’ flag enabled Developers are responsible for making the VF page ‘mobile ready’ – Use a Responsive Design framework like Bootstrap or Mobile Design templates – Leverage touch and swipe events where appropriate Use JavaScript Remoting/VF Remote Objects for better performance Use HTML5 for device features like Geolocation and Camera access
- 18. Connecting to the rest of the internet In this app we can consume and integrate data from GitHub into our customer service workflow.
- 19. Visualforce – Left Nav Visualforce Pages in Left Nav JavaScript navigation library available sforce.one.navigateToSObject etc.
- 20. Visualforce – Custom Publisher Action Visualforce Pages as Custom Publisher Actions Standard Controller JavaScript publisher library available Sfdc.canvas.publisher.publish etc
- 21. Visualforce – Formula Field Link Visualforce Pages as Formula Field Links Works great in Salesforce1!
- 22. Two ways to build Mobile Apps Customer-Facing Mobile Services Custom Mobile Apps Employee-Facing Out-of-the-box AppExchange Apps: Dropbox Concur Evernote ServiceMax More Custom Apps and Integrations: SAP Oracle Everything Custom More Sales, Service and Marketing Accounts Cases Campaigns Dashboards More Salesforce1 Mobile App
- 23. Building Customer Facing Apps on Salesforce1 This app runs on Heroku and Postgres and syncs up data on Force.com.
- 24. Consumer Application with Heroku Connect Case CampaignProduct Contact Interactio n CampaignProduct Contact Interactio n Marketing Manager Customer Heroku Connect REST
- 25. Heroku Connect Object Mapping
- 26. The Salesforce1 App and Platform Fast non-programmatic mobile app development Many hooks available to the developer to leverage HTML5/JS/CSS supported Visualforce Development HTTP standards based services integration Great for internal employee facing apps and public consumer facing apps
- 27. Resources You most important link: bit.ly/s1mobile
- 28. Thank You
Notas do Editor
- This is salesforce1. Salesforce1 is comprised of all the applications that run on top of Salesforce1 Platform Services, and Salesforce1 Platform APIs and served up using the Salesforce1 Mobile App. The consolidation of the platform services combined with their APIs make up the Salesforce1 Platform. We have taken this route so that we can enable you, the developer, to create a multitude of mobile applications easily, reliably and with massive flexibility.We are here to talk about driving a mobile app revolution in the enterprise. Today I want you to join me on a journey that takes us from the quickest and easiest way to mobilize your applications for your company all the way through to building massively scalable public facing customer applications.
- And it all starts with the Salesforce1 Mobile App. The Salesforce1 Mobile App allows your company to run your entire business right from your mobile device. Nearly every feature of every app that you have in the Salesforce desktop browser app is accessible from Salesforce1.
- Not just CRM, Service Cloud and Marketing Cloud, but all the customizations that you have made as well as all the Custom Applications that you have made. Salesforce1 is about getting to your business data anywhere and anytime.Let’s take a quick tour of the Salesforce1 App.This should be done either using your device. You should check out reflector, air display or if you have a direct connection from the device to the projector.Show the chatter Feed.Show the left hand nav.You can see all the peopleGroupsAnd scrolling down, CRMService and MarketingAnd also custom objectsDrill into an objectShow the related listsDetailEditableClick the plus buttonThese are quick actionsDo a quick actionBack to left nav – here are your custom VF appsShow a VF page, maybe mappingGo to a detail and show a mobile cardAll of the features that I showed you are accessible to you as a developer for customizing. The first 10 years of Salesforce were about making building amazing business apps on the web using a combination of point and click and programmatic techniques. The next 10 years is about bringing that same ease of development to building mobile apps.Let me show you some of the apps that you can build and also demonstrate how you can take your current skillset and apply it to mobile app development.
- This first app requires almost no effort to bring to the salesforce1 app. This app is a data driven app in that I can completely leverage the built in salesforce customization tools. This is a custom object for keeping track of donations. I can add a donation to the app, giving it a description and a value associating it with a contact record.. Full accessible on my device.Here’s how I built it.Create a new custom object with three fields (default name field, picklist for demo type, url field for demo link)Create a custom tab for the objectGo to salesforce1 and show the object now in the AppBoom! Let’s change the page layout.Change something in the page layoutRevisit the app in salesforce1Yes, that is the new face mobile app development. Let’s review the parts of the salesforce1 app that we interacted with.
- By creating our custom tab we were able to have it show up in our left nav!
- We also create a compact layout which is automatically used when the record is accessed from salesforce1! But there is a lot more we can do, even still without coding.
- Demo package: https://login.salesforce.com/packaging/installPackage.apexp?p0=04ti0000000CsmiPackage contains: - custom fields for Contact, custom action for Contact, compact layout for Contact - custom object Interview, includes custom action, compact layout, custom List View for My Interviews – change this List View to match your usernameOrg setup: - remove fields and related lists that aren’t needed on Account and Contact, they clutter the story - create data for Account, Contact, and Interview - create a 2nd user (your boss)Slide Talk Track: This app is for Campus Recruiting. It can be used by any company or organization looking to recruit students for jobs, internships, or volunteer work. It was inspired by a custom mobile app created by SwathiRamini at Teach for America for their campus recruiters.When recruiters visit campuses, they do not bring their laptops, but they always have their phones. Without Salesforce1 Mobile, they take handwritten notes and then enter them into the Campus Recruiting app in salesforce.com when they get back to the office. Sometimes, that is days later, if they are visiting many schools. With Salesforce1 they have their interview schedule in their hand, and can capture their notes and outcomes with a few taps.Let’s take a look…[switch to demo on your phone/tablet]Demo Script: For example, I need to go to Drew University today, so I can search for Drew in the global search to access the Drew account record. From here I can tap on the map icon and that will open the map application on my phone, in this case it is Google Maps. I love this because when I click on addresses from most websites it opens google maps in the browser, which is not as user-friendly on the phone.(This should be done either using your device. You should check out reflector, air display or if you have a direct connection from the device to the projector.)Show the chatter Feed.Show the left hand nav.Search for an account.Tap the Map icon on the account.Close the map and reopen Salesforce1.Once I get to Drew, I check my Interview schedule by swiping to the Left Nav and tapping Interviews and selecting My Interviews, a custom List View I created in the browser – the Salesforce1 Mobile App is just reading that same metadata to display the lists. I see I have an interview with Sarah Scribble at 11:30. I can see this, and the location, right at the top of this detail view. This top section is customizable, and you should include the 4 fields that mobile users will need to see most when on the road.Back to left nav – tap Interviews, My InterviewsTap a specific interview, show detail viewI am at the room on time, but Sarah is not there. I swipe to see more information about Sarah as I wait – I do this via an Expanded Lookup element that was added to the Page Layout as a Mobile Card. We’ll see how to do this in a minute. I can see she’s a Junior majoring in Math. That might be handy because not a lot of people like to teach Math.Swipe to show related info, show Expanded Lookup mobile card for contact info.Now I’m getting impatient, so I click into Sarah’s contact record. Here I can quickly call her to see where she is. I do that (not really, but note that the Log a Call screen displays automatically when you dial from the Contact record, saving the user a couple of clicks and gently reminding them to log all calls). She’s on her way, so I have some time. I use that time to learn more about her by swiping to the right pane of the Student details and check out her Twitter feed to see what she’s been saying [note: use my twitter feed, @rockchick322004, or yours if you prefer].Tap a specific contact, show detail view. Click phone icon (in the top section). Don’t call. Close Log a Call screen.Swipe to related info, show Twitter feed.Sarah arrives and we have a good interview. I quickly schedule a follow-up interview for her with my manager, Reid, for later in the day. I do that with a Publisher Action on the Contact record which lets me create a child record. Behind the scenes the Interview Status is set to Scheduled, and now it will appear in Reid’s Interview list.Click the plus buttonShow the custom quick action, New Interview. Create a new interview, making your 2nd user the Interviewee.Finally, I need to record my notes while they’re fresh and indicate whether there is potential for hiring her. I do that by navigating back to the Interview record, which is here in the Related List, just like it would be in the Desktop app (note that you can see the new Interview here as well). From here I can tap the Interview and then tap the plus button on the lower right and tap on the Log Interview quick action. This is a custom Publisher Action, created with just point & click. I’ll show how to do that in a second… Sarah was pretty awesome and I think she’d be a great Math teach at Teach for America, so I enter that and tap Submit. What I’ve just done is updated the Interview record with my notes and outcome, and also, behind the scenes, the Interview Status field was updated to Complete. Setting values automatically, using the new Predefined Values feature for Publisher Actions, is a great way to save your users time when they are on their mobile device.Still on the Contact detail. the plus buttonSwipe to related info.Tap your Interview record.Click the plus buttonShow the custom quick action, Log Interview. Enter the interview info, submit.That’s it! In this scenario, I would go on to my next interview, and at the end of the day, instead of having to transcribe all of my handwritten notes into my laptop in the office, or my hotel, I can spend time socializing with my friends or watching movies in my hotel.[switch to desktop browser]Have Setup open to the Schema Builder, showing only Account, Contact, and Interview.Now, let’s take a look behind the scenes to see how I created this custom Campus Recruiting app without any code.The data model schema for the Campus Recruiting app is simple. It leverages standard Accounts and Contacts, and a custom object for Interviews that has a Master-Detail relationship with Contact. It is because of that relationship that I can use point & click to create the “New Interview” Publisher Action on the Contact object. I can do this for both Master-Detail and Lookup relationships.I won’t demo everything I did to set this up, because most of it you are already familiar with – it is the same Setup work you do in the desktop browser app. However, I would like to walk through creating a Publisher Action, since that is something you will be doing a lot. Let’s add a new Publisher Action on the Contact that will let the interviewer quickly update the Education Information for the Student they are interviewing.Close Schema BuilderIn Setup’s QuickFind, enter “Contact”. Click Buttons, Links & Actions under the Contact node.Click New Action. Show the Action Types and Target Objects. Create an Action of type “Update a Record”, label “Update Education”.Action layout should contain only Name, Grade, and Major. If time, show the Predefined Values, even though there isn’t a good example for this use case. Important to know how powerful these are - you can select a specific Picklist value, or use Formulas to set any of the field types Formulas support as a return type (Text, Number, Checkbox, etc.).Nav to Contacts – Page Layouts and add the Update Education action to the Publisher.Don’t bother going back to the phone to demo this, you can just show it in the Contact detail page Publisher. Makes the point that they are the same.
- Hidden slide – use if bad internet connection, or if you don’t plan to demo the Publisher Action.
- This highlights the features we used in this app.Not sure if we’re planning to use this throughout the deck, so this is hidden.
- Let’s review the other parts of the salesforce1 app that we interacted with.You are going to see 5 different apps today, and I don’t expect you to remember every click. You can dig into these features in Setup and the documentation when you get started building your own app.First is List Views. Main point here is that they are the same as the ones your user has access to in the desktop application, including custom List Views they add.
- Next is the Expanded Lookup. In the Page Layout Editor, there is a new category called Expanded Lookups, and you drag the one you want into the Mobile Card section. It will only display in Salesf orce1 Mobile, not on the Desktop app.The fields for the Expanded Lookup are defined by the Primary Compact Layout definition for the object in the lookup. So, in our case that was the Contact object. This is important because the Compact Layout also controls the fields at the top of the detail page in Salesforce1 Mobile, and you can only have 4 fields, so choose carefully.
- One great trick is the built-in map integration for Account & Contact records. Note this is ONLY on Accounts and Contacts, not on custom objects, but it is pretty cool.
- Anothergreat non-code trick to use to amaze your friends is the new Twitter component for Social Contacts in Spring ’14. Follow these steps to set it up and you’re users will have easy access to their Contacts social feed right from Salesforce1 Mobile.
- This last feature is the secret sauce of Salesforce1 Mobile success in your company. The thing is, like any sauce, you want to use it wisely. Not enough quick actions, Salesforce1 feels cumbersome, too many, users get overwhelmed. This is the area you want to really focus on when you are gathering requirements from your users – what are the 3-4 things they are ALWAYS doing on the road. Define those as Publisher Actions, setting Predefined Values whenever possible to save even more time, and you will be a hero.
- Here is an app that leverages a common feature of a lot of mobile apps, the ability to check in to a location. In this case, we are going to enable checking in when have arrived at an account for some business. Because this app is targeted at a field sales person, we have also added the ability to get driving directions.[Demo the app]To build this kind of app, we need to use a combination of declarative and programmatic platform features. First, let’s take a look at the directions part of the app. We have used a VF page and can easily leverage a mapping API to provide the users current location coordinates from her device and the coordinates of the account to request proper directions from the mapping provider.There are a couple of things I’d like to point out about this visualforce page. First, it uses a standard controller, in this case the account standard controller. This is important for providing the context that this page will run in. When designating a standard controller, you are essentially specifying that this page is appropriate for including on an Account standard layout.The rest of the page is really almost copy and paste from a sample for the Google directions API. We include a reference to the directions javascript library. We are leveraging HTML5’s geolocation feature to obtain the users current location, and then setting a destination based on the account object made available from the standard controller.Once we have this visualforce page ready to go we need to integrate into the Account details standard page layout. For salesforce1 we can do this using a mobile card. Mobile cards are only displayed from within the salesforce1 mobile app. Let’s go ahead and edit the page layout. Now, scrolling down we can find this section called “Mobile Cards”. Now, because we indicated the Account standard controller on our page, it shows up here in the group of available Visualforce pages. We can now just drag that page to the mobile card section and drop it in place and save our layout. That’s all it takes. When the detail loads, our page is passed the appropriate account object and it all just works.Now to the check in functionality. This is slightly different from the directions in that the context for this feature should be global instead of the context of a single record, like an account. First, let’s take a look at the page. In this case I have a custom controller to provide access to the Chatter API. This page is also using knockout.js to control the flow of the page. You can, of course, use any Javascript library or framework that you like. This page also is a good example of using our Mobile Template library for rapid salesforce1 app development. Finally, we are referencing our publisher.js library that provides key functionality for interacting with the salesforce1 app container.Once an account has been selected, we execute the code that publishes a notification that the submit button can now be activated. The salesforce1 app itself is subscribed to the “setValidForSubmit” notification and will do all the work of enabling the submit button for us. On the other side of the pub/sub technique, we are listening for a particular action also. In this case we are subscribed to any “publisher.post” notifications. When we receive this we can make a remote action call to our custom controller to create the check in task. Finally, when that call returns, we ask salesforce1 to close our check in action.Making the check in action available to salesforce1 is very straight forward. First, we create the global action. Just select new and Visualforce action type. With the action created we can now add it to the Global Layout for the publisher. Editing the global layout gives me access to every global action in my org and allows me to add and remove and re-order all the actions that are in the publisher. All publisher actions show up as quick actions in salesforce1.This kind of app is really impactful and easy to create. Let’s review our integration points within the salesforce1 mobile app for this kind of app.
- A couple of things that you should do to make your Visualforce pages work well in the salesforce1 app. Always use the doctype attribute on your page tag. This provides access to the most current features of HTML from your javascript code.There is a check box on the metadata detail page for your Visualforce pages that needs to be checked. If for some reason your page is not showing, double check that you have made it available for salesforce mobile apps.You need to style your pages appropriately for the device you are targeting. Responsive design CSS and JS are great ways to target multiple devices with one code base.
- Imagine you're working on a product that has some or all of its code in a GitHub repository. This app integrates GitHub Issues with Cases in Salesforce. As a user, I can browse open issues assigned to me, link them to cases, and see the link on the Case record. The app does OAuth against GitHub, obtaining an access token to call the GitHub REST API and retrieve issues and comments.Preparation:You will need a GitHub account. If you do not already have one, you can sign up at https://github.com . You will also need to create a repository on GitHub. If you already have a repository with issues, then great - use that; otherwise, go to https://github.com/new and create a new repository. Create some issues in the new repository and assign them to yourself (select them in the issues screen for your repository, click 'assignee' and select yourself).You will also need to create a GitHub app specific to your org. Go to https://github.com/settings/applications , click 'Register new application', and enter:Application Name: Issues in GithubHomepage URL: https://github.com/metadaddy-sfdc/IssuesInGitHubApplication description: Link GitHub issues to Cases in Salesforce1Authorization callback URL: https://instance.salesforce.com/apex/github_callback_htmlIMPORTANT: Replace 'instance' as appropriate for your DE org - e.g. na15.Keep the GitHub app window around - you'll need to copy Client ID and Client Secret.To install the app into a DE org, go to the GitHub repository for this project - https://github.com/metadaddy-sfdc/IssuesInGitHub - and click 'Install Unmanaged Packed' from there.You will need to add the app's tab to the left nav menu - go to Setup | Mobile Administration | Mobile Navigation, move 'Issues in GitHub' to the 'Selected' list, click 'Up' to move it just after 'Groups', and click 'Save'.Now add the GitHub link and publisher action to the Case Page Layout. Go to Setup | Customize | Cases | Case Layouts, and click 'Edit' next to 'Case Layout'. Drag the 'GitHub Link' field and drop it under 'Case Number' in the 'Case Information' section. Click 'Actions' in the palette, drag 'Link to GitHub Issue' and drop it in the 'Publisher Actions' between 'Post' and 'Log a Call'. Save the page layout.You will also need to create a Custom Setting record with the app's Github credentials. Go to Setup | Develop | Custom Settings, click 'Manage' next to 'GitHub App Settings' and create a new record with:Name: Github AppClient Id: copy from GitHub app windowClient Secret: copy from GitHub app windowSource code is in the GitHub repository at https://github.com/metadaddy-sfdc/IssuesInGitHubIn your DE org, pin 'Cases' to the top of the Search results - in the regular browser interface to your DE org, search for any text you like, hover over the 'Cases' entry in the 'Records' list on the left, and click the pin that appears. Cases will move to the top of the Records list. This just makes it easier to find cases during the demo.The app writes a GitHub access token to your user record. Netween demos, you will need to delete the access token to be able to show authorization with GitHub. Go to your User record in your DE org (Setup | Manage Users | Users | click your user's name), click 'Edit', then scroll down to the 'Additional Information' section and delete the GitHubAccessToken value. Hit 'Save'.Show the app on a real phone if you can (using AirServer or Reflector to show your phone's screen on your laptop). Next best is to use the iOS simulator. If you have to use your laptop browser, use Chrome and enable mobile emulation (https://developers.google.com/chrome-developer-tools/docs/mobile-emulation) - this will correctly generate the touch events that Salesforce1 is expecting.Run through the demo at least a couple of times, and leave some issues linked to cases.Running through the app:In the Salesforce1 Mobile App, open the left nav menu, and select 'Issues in GitHub'. If you deleted your GitHub access token (see 'Preparation', above), you should see a login page with the GitHub logo. Touch the logo, and you will be prompted to log in to GitHub, and authorize the app to access your data. Don't worry if it skips the login page and goes straight to authorization - if you've been round this loop, the browser has your GitHub cookie - it's not important for the demo flow. Also, if you don't see the GitHub authorization screen within a few seconds, just close the window and touch the GitHub logo again - occasionally this page seems to glitch.Once you've authorized the app, you should see a list of issues from GitHub. This JavaScript single-page app, running on a Visualforce page in Salesforce1, is retrieving this data directly from GitHub, without hitting the Apex controller.Note that it will only show open issues assigned to you, so if you see an empty list of issues, go create some in GitHub and assign them to yourself (see 'Preparation', above). You can touch an issue to drill down and see more detail, including any comments posted to the issue, and any cases that the issue is linked to. You can touch a linked case to go to its record detail page - seamless integration between the app and Salesforce1.Now let's link an issue to a case. Open the left nav menu, and select 'Cases' (it should be visible at the top of the 'Recent' sub menu - if not, you'll need to pin it in the Search results - see 'Preparation', above). Select a Case, and open the publisher (plus sign on bottom right of screen). Select 'Link to GitHub Issue' and you should see a list of issues. This time, touching an issue will select it for linking to the case. A link icon will appear to indicate the selected issue. You can play around in this screen a little - the icon will move to the last touched issue, and touching the linked issue will deselect it.When you've selected an issue, touch 'Submit' at the top of the screen. You'll be taken back to the Case record, which will refresh. Swipe left to see the Case detail, and scroll down to the 'GitHub Link' field. Touch 'View GitHub Issue' and the detail page for the linked issue should appear. Notice that the linked case is listed on the issue detail. Note that, currently, the 'spinner' stays active, even though the detail page has loaded. I'm investigating why this is the case - it might be fixed by the time you run through this.Exploring the code:Due to time constraints, we'll highlight the important integration points, but the code is on GitHub for anyone to dig deeper.Start on the github_app_htmlVisualforce Page. Point out the <apex:page> attributes - we're using showHeader="false", sidebar="false", standardStylesheets="false" and applyHtmlTag="false" to get complete control over the page.The app uses AngularJS and the Ionic Framework - the CSS and JavaScript for this is loaded from static resources. AngularJS is a client-side MVC framework - it allows you to divide up your JavaScript app into modules. You can see the includes for the modules in github_app_html under the "<!-- the app's js -->" comment. You can also see where the app gets the GitHub API access token from the Visualforce Page's Apex controller, in the {!accessToken} merge field.Open that Apex controller - the GithubController class. The Apex controller reads the access token from the User record in its constructor. Notice in the 'onLoad' action method, if there is no access token, the onLoad method returns a redirect to the login page. The Visualforce Page runs this action method before it renders the page - this is what activates the GitHubOAuth login. We won't go down the OAuth rabbit hole here, but the code is all there if anyone wants to take a look.Back on the github_app_htmlVisualforce Page, scroll down to the bottom - the <ion-nav-view> element is where the app content will be rendered. This app comprises a number of views that can be dynamically loaded from templates.Open the github_app_js static resource - this is where the app is configured. Scroll down and you'll see a set of 'states' that associate a url with a template and controller, all broken down into their own static resource files. You can see the states for the issue list, issue detail, and link views.Open the github_issues_html static resource. Notice the <ion-list>, containing an <ion-item>, with an 'ng-repeat' attribute. This is very similar to a Visualforce <apex:repeat> - we're iterating through a list of issues, showing some fields from each one. Notice the link - it has a # prefix - we don't want to go to a different page to see issue detail; we want to show a different view, and the # is followed by a path, containing an encoded issue url. When the user touches the list item, that link will be followed, loading the issue detail view.Open the github_controllers_js static resource. The first controller, IssuesCtrl, simply loads all issues from the Issues service. In AngularJS, controllers simply marshall data into the template - services retrieve data.Open the github_services_js static resource. The 'all' function retrieves a list of issues from GitHub. Skip past the error handling to see where it caches the issue list, and builds a map so that issues are easily accessible to the app from their URL without going back to the GitHub API. This function uses 'promises' to simplify asynchronous programming. The function returns a promise that the caller can use to get the data later, without building a stack of callbacks.Open the github_link_js static resource. This is the publisher action for linking an issue to a case. Since it runs in the context of a Case record, it uses the Case standard controller, but we define GithubController as an extension. Scroll down and you'll see that the HTML is almost identical to github_app_html, except that we pull data from the Apex controller (the {!case.Id}, {!case.CaseNumber} and {!case.GitHub_Issue__c} merge fields) and add it to the AngularJS root scope so that it is accessible to the AngularJS controllers.A little lower down, you can see the integration with Salesforce1. We use the publisher library, activating the 'Submit' button in the 'publisher.showPanel' handler, and, when the user hits submit, we call the attachIssue method on GithubController to attach that issue to the case. Go to the GithubController class and scroll down to the attachIssue method - it's really very simple.Now look at the 'Buttons, Links & Actions' page for Case. You'll see the publisher action there. Click its 'Edit' link and you'll see the Visualforce page there. Now go to the Case 'Page Layout' and point out the action in the list of publisher actions.There are quite a few moving parts here, but the end result is a very seamless user experience. With this app in Salesforce1, the user can move between issues from GitHub and Cases from Salesforce in a very natural way.
- Just to recap, we used the left nav bar to navigate to the issues list, and the issue detail page used the sforce.one library to navigate to a linked case, providing that seamless integration.
- Our custom publisher action allowed a context-specific operation – linking an issue to a particular case – here we used the publisher library to manage the action page lifetime
- And, though it’s not specifically a feature of Salesforce1, adding a formula field to the Case object allowed us to navigate straight to its linked issue – another seamless integration.
- All the applications we looked at so far were employee-facing, and the Salesforce1 Application is by far the fastest and easiest way to make these applications available to your employees.If you need to build a customer-facing application, you may need more control over the user experience and the branding. In that case, the solution is to build a custom app, and leverage the Salesforce 1 platform as the back-end of the application. Let’s take a look at an example.
- Let’s say you work for a large consumer product company, and you want to extend your marketing campaigns to include a loyalty program. Your company has millions of customers and you want to create an app that can push offers and products to them as a reward for being a great consumer of your product.Let’s take a look at an app that does exactly that.Access the following URL: http://devweek.herokuapp.com[Tap Sign Up, then tap the Back button without signing up. Tap Sign In, and “Login with Facebook”]As a customer of this company, I can sign up for the loyalty program within the app and login, or I can just login with Facebook. When I sign up or login with Facebook, a Contact is automatically created in Salesforce.[Wait for Facebook login to complete]On the first screen, I can see my profile including my status (Gold, Silver, Bronze) and my point balance. Some of this information, including my profile picture was pulled directly from Facebook.[Click ‘Edit’ (upper right)]- I can change my personal information including my profile picture, and my preferences. When I click Save (upper right button), the Contact object is updated. [Click the Menu button (left side of the Header)]When I click the menu button, I can see the different options available in the app[Select Special Offers]I can select ‘Special Offers’ to see a list of offers that the company pushes to its loyal customers. These offers come from the Campaign object in Salesforce.[Optional: if you have access to the org, show the corresponding campaigns in Salesforce][Select one of the offers]- I can select an item in that list to see the details of a specific offer. In the Offer Details screen, I can:share the offer on social media (only Facebook is implemented at this time) redeem the offer, which will show a QR code that can be scanned at the cash registraror save the Offer to my Wallet to make it easy to access it at a later time . Some of these activities like ‘Share on Facebook’, or ‘Save to Wallet’ are tracked in the Interaction custom object in Salesforce[Optional: if you have access to the org, show the Intecactions in Salesforce][Go back to the menu and select Wallet]Let’s go back to the menu and select ‘Wallet’ to see the offer I just saved.[Go back to the menu and select Products]I can also select Products to see a list of new Products the company wants to share with me. This list comes from the Product2 object in Salesforce.[Optional: if you have access to the org, show the corresponding products in Salesforce][Select a product]Again, I can select a Product in the list to see the Product Details. In the Product Details screen, I can share the Product on social media or add the Product to my wish list [The Add to Wish List button is not implemented at this time][Go back to the menu and select Store Locator]The store locator option shows my position on a map, and a list of stores near me. Clicking a store in the list will center the map on the store location.[You can also tap the location pin (upper right corner) to go back to your location][Go back to the menu and select Help]The Help option lets me provide feedback or ask a question. When I click Submit, a case is automatically created in Salesforce.
- This app leverages standard technologies and practices for building mobile web apps. Here is the architecture for building this kind of customer engagement app.The Marketing organization manages the content of the application (Campaigns and Products) in Salesforce through the browser or the Salesforce1 app. As I said before, Users of the app become Contacts in Salesforce.The consumer app runs in Heroku. It’s built in JavaScript on Node.js, but it could have been written in any other language supported by Heroku: Java, Ruby, or PHP.The Node application accesses the Salesforce data in a Postgres database running in Heroku. “Heroku Connect” is used to synchronize the data between your Salesforce org and the Postgres database. In this app, “Heroku Connect” syncs Product, Campaign, Contact and Interaction (a custom object that keeps track of the user interactions in the app: Facebook Likes, Offers saved to wallet, Offers redeemed, etc.)“Heroku Connect” provides bi-directional synchroniztion:- Products and campaigns are copied from Salesforce to Postgres- App Users are created in Heroku and pushed as contacts to Salesforce. Interactions are also pushed from Heroku to Salesforce.Heroku Connect is a great solution to access Salesforce data from a custom app. One thing to be aware of is that the data sync process is asynchronous: the sync process kicks in every 10 minutes. That is appropriate for many types of data. However, if you need immediate “real time” data, you can still use API calls. For example in this application, when a the user fills in the Help form, a Case is created in Salesforce using an API call through nforce. This may be justified by a contractual clause that guarantees a response with a certain amount of time.The client app accesses the data in Heroku using a REST API defined in the Node.js app. These are API calls to your custom app, in other words they don’t count towards your API limits.The client of the application is built with AngularJS and the Ionic framework.So in summary, we built an entirely custom application, and the Salesforce1 platform made it easy to implement the back-end and to deeply integrate with the Salesforce data and processes that are managed by the Marketing organization using the Salesforce1 app or Salesforce in the browser.
- Backup slide: Use this slide if you want to go deeper on Heroku Connect and don’t have access to it to demonstrate live.Heroku Connect is very simple to set up:You simply map Salesforce objects to Postgres database tables. For each object, you can specify which fields to synchronize. That’s it! Heroku Connect takes care of keeping the data in sync.