Please see the Installation section below for more on how to install on your Sandbox / Demo org.
Please note: sample code (metadata api and dx formats) are is also available in the mdapi and dx folders above
Have your end users ever needed to provide a customizable launchpad within Salesforce (Lightning Experience or Mobile)?
We've provided two specific components: the 'Tile Launcher' and 'Hero Button' components to provide a secured way for your end users to start their day.
They can navigate to other apps, other areas within salesforce choosing from a user sortable list of tiles - all as a one stop launching pad.
Customizable with any choice of standard icons, secured by custom permissions and navigatable to internal or external areas.
Or Administrators can easily highlight upcoming activities or events - using a customizable Hero Button that can navigate them to other pages or external apps.
All in a way that is intuitive for where your users are.
Now with the ability to show device and form factor specific tiles.
So you can link to your custom or native iOS or Android apps in a single unified way - made even more powerful with the power of Single Sign On
NOTE: This project is for demonstration purposes. For more information, please see the Licensing section below
1. Assign either of the following permission sets:
- Tile Launcher Demo Admin - someone that can administer the Tile Launcher
- Tile Launcher Demo Participant - someone that can see the Tile Launcher
(the base permissions are: access to the Tile Launcher app builder page, and read access to the Tile Launcher Entry objects)
2. Access the Tile Launcher from the 'App Launcher' dice
Either from the Desktop:
Or from Mobile:
Especially on mobile, what is a click vs a drag can be very important. Otherwise this can mean constantly making changes that weren't intended.
To change the order, enter 'Edit Mode' through the pencil icon in the top right of the launcher.
(Once you are done changing, leave Edit Mode with the disk icon to save your changes)
Note: the icons on desktop change, to indicate they can now drag and drop.
Editing icons on mobile also change appearance, but instead move to the next position up.
Once you are done with your changes, leave edit mode - through the save icon, to save your changes.
1. As an administrator (or someone with the Tile Launcher Demo Admin permission set), Navigate to the list of Tile Launcher Entries
| What to enter | Description | Example |
|---|---|---|
| Tile Launcher Entry Name | Not shown to users, but human name to find this tile | Example Tile |
| External Id | Not shown to end users, but used for simpler data loads | uniqueNameUsedWhenLoading |
| Description | Description shown to the end user - next to the icon | Your gateway to wonders! |
| Type | The type of target we reference. More below | URL or Named Page |
| Target | The url to navigate to. (We recommend removing the domain) | Recommended: /lightning/page/home although https://your-domain.my.salesforce.com/lightning/page/home works too |
| Icon Name | One of the names from the lightning design sytem | account, entitlement_process or environment_hub |
| Icon Group | The group the icon belongs to (the header in the list) | Standard Icons means 'standard', Custom Icons means 'custom' |
| Permission | The API name of the custom permission required to see this tile. Blank if anyone can see it. | YourCustomPermissionAPIName |
A Hero Image (often known as a banner) provides a simple way to convey a message to an audience, and a call-to-action as it navigates them where they can learn more.
Simply drag and drop the Hero Button within the App Builder to use. (The App Builder is found under Setup)
It will be available to users that see that page.
(To use your own banner images, please see the Static Resource Hero Images section below)
| What to enter | Description | Example |
|---|---|---|
| Resource Name | API Name of the image Static Resource to show. See Below for uploading your own banner images. | MyExampleHeroImage |
| Target Address | URL Address to direct users when they click the Hero Image | https://www.salesforce.com |
| Description | Alt Text to show for screen readers on the Hero Image. | Earn more while on the go. Click here for more. |
| Width | CSS width of the image (either in pixels or percentage) | 100px OR 100% OR Auto |
| Height | CSS height of the image (either in pixels or percentage) | 100px OR 100% OR Auto |
The Hero Carousel is an extended version of the Hero Button - to allow for a series of Calls-to-Action (instead of a single one).
The list of Hero Notification records are available by default within the Tile Launcher component, but can also be found by searching 'Hero Notifications' in the Lightning App Launcher (dice in the top left)
This list of custom objects let you define which Hero Notifications that users will see, and when.
Simply click the edit or new button to create a new record.
| What to enter | Description | Example |
|---|---|---|
| Hero Notification Name | Internal name for this record | Example Hero 1 |
| External Id | External Ids allow for simple data loading. Through Data Loader, or other tools | ex_Hero1 |
| Resource Name | API Name of the image Static Resource to show. See Below for uploading your own banner images. | MyExampleHeroImage |
| Priority | Images are shown based on decreasing priority. | 10 |
| Title | If description is shown: the tile of the card | Earn more commissions on the go |
| Description | If description is shown: the body of the card. | Now you can earn more commissions with the Salesforce mobile app. Click here to learn more... |
| Alternative Text | Alternative text for the image - used with screen readers. | Alt text for the hero image... |
| URL | Where to navigate the user when the click this hero image. | https://www.salesforce.com |
| Type | The type of target we reference. More below | URL or Named Page |
| Start Date | Heros will only be shown after the start date (or immediately if no start date provided) | 1/1/2020 7:00 am |
| End Date | Heros will only be shown until the end date (or always shown if no end date provided). | 1/1/2024 7:00 am |
| division1, division2, division4 |
Note that the Hero Notification records have a unique External Id - intended to simplify data loading.
Simply drag and drop the Hero Button within the App Builder to use. (The App Builder is found under Setup)
It will be available to users that see that page.
(To use your own banner images, please see the Static Resource Hero Images section below)
| What to enter | Description | Example |
|---|---|---|
| Allow AutoScroll | Automatically switch between hero images (if there are multiple) | true |
| AutoScroll Slide Duration | If AutoScroll enabled: # Seconds that each image is shown | 5 |
| Show Description | Whether to show the text area underneath the image (true) or not (false) | false |
Static Resources are a place to provide images in a way accessible to logic.
We use static resources to store/reference the images used in the Hero Images / Banners, so they can be leveraged within the Hero Button and Hero Carousel components.
To see a list of current Static Resource, search for 'Static Resource' in the Setup quickfinder.
Clicking on the Name (or API Name in this case) of the Static Resource will show the Static Resource Detail.
(This includes the API Name and a link to preview the file and size. It also includes whom created the Static Resource, and any description)
Click the 'New' button on the Static Resource list.
| What to enter | Description | Example |
|---|---|---|
| Name | API Name of the image Static Resource to show. (Must be letters, numbers or underscores) | MyExampleHeroImage |
| Description | Description of the resource (only available through API) | Description of my Resource. |
| File | A file uploader to provide the image. | |
| Cache Control | Cache Control indicates if the resource can be shared across users (Public) or per user (Private). | Public |
Once the resource has been created, just copy the Name (or the API Name) - as this indicates the resource we will use.
- URL - any external system - uses NavigateToURL
- Knowledge Article - reference a knowledge article
- Named Page - access: 'home', 'chatter', 'today'
- Navigation Item - Custom Tab
- Object Page - Recent or list views for an object
- Record Page - Directly access a record
- Record Relationship Page - Related List
All except URL use the Lightning:Navigation component to navigate to different areas of the app based on the PageReference patterns. See Here for more on what those types mean
Although the Type isn't as important yet (it finds the first match based on Priority of the Custom Metadata records), it is important to align as best as possible for the day that it is necessary.
To simplify its use, and to allow for any number of other formats to be supported (as will happen with quarterly reports), navigation translates the URL provided to lightning events - using lightning:navigation
These match to the URL provided (in order of 'preferred sort order' - from most specific to most generic) and will navigate based on the first pattern that matches.
The list of all matches are found (and can be extended under the Tile Launcher Navigation Format - custom metadata (also found under Setup -> Custom Metadata)
| Field | Description | Example |
|---|---|---|
| Name | Human readible name for what this pattern matches | ex: Object Pattern - specific |
| Description | The description for others to find | Navigates to a specific record.like /r/{objectApiName}/{actionName}?filterName=Recent |
| Navigation Type | Which type of navigation does this represent Not used heavily, but may be required someday. |
ex: Knowledge Article or Object Page |
| Priority | Items with higher priority are checked first (e.g. more specific rules should be placed higher) | 2 |
| URL Format | The regular expression to use to match | \/o\/([^?/]+)\/([^?/]+)[?]filterName=([^&]+) |
| Navigation Object Format | JSON to provide when navigation (based on the pattern) | { "type": "standard__objectPage", "attributes": { "objectApiName": "<%=_1%>", "actionName": "<%=_2%>" }, "state": { "filterName": "<%=_3%>" } } |
For example:
| Field | Value |
|---|---|
| Name | Object Pattern 2 |
| Navigation Type | Object Page |
| Priority | 200 |
| Description | Navigates to pages specific to a record: for example: /o/{objectApiName}/{actionName}?filterName=Recent for more information, please see: More Here |
| URL Format | \/o\/([^?/]+)\/([^?/]+)[?]filterName=([^&]+) |
| Navigation Object Format | { "type": "standard__objectPage", "attributes": { "objectApiName": "<%=_1%>", "actionName": "<%=_2%>" }, "state": { "filterName": "<%=_3%>" } } |
Please note, the replacements use _1 for regex match 1, _2 for regex match 2, etc.
Custom Permissions are a configurable way to specify whom can access which type of feature.
We use Custom Permissions with the Hero Carousel to segment what types of Hero Notifications or Tiles that the user can see.
For more information on Custom Permissions, please see Custom Permissions in the Salesforce Help
For example, say that we have users that need to Administer Hero Images and Tile Launcher Entries.
We can see the list of Custom Permissions by searching for Custom Permission within the Setup Quick find.
Here we can create a new Custom Permission that we we can assign to users, and enforce (at different areas) that only users with this Custom Permission can proceed.
(In our case, we simply specify using the Custom Permission API Name on either the Hero Notification record or Tile Launcher Entry record, and it takes care of hiding the tiles)
Custom Permissions can be assigned out either:
Both simply by selecting the Custom Permission from the list, and adding it to the list of enabled Custom Permissions.
There are three methods available for you to install this demo, so you can play around with it:
(Please note, all are intended as demonstrations and are not intended for deployment to Production as is)
This works very similar to an App Exchange install.
Please login to an available sandbox and click the link below.
https://test.salesforce.com/packaging/installPackage.apexp?p0=04t6A0000038HvFQAU
(or simply navigate to https://YOUR_SALESFORCE_INSTANCE/packaging/installPackage.apexp?p0=04t6A0000038HvFQAU
if you are already logged in)
It is recommended to install for Admins Only (but all options will work)
Next, click on the 'dice' and open the 'URL Hack Demo' app.
and run Setup from the Demo Setup tab.
This will then perform any additional setup (such as creating records, etc).
Thats it. See the How to Use section for how to use the app.
This assumes you have already installed the Salesforce CLI and Connected the Salesforce CLI to your org.
However, the Salesforce CLI can be used with any org and does not require Salesforce DX to be enabled. (Although enabling the DX / Dev Hub would give some great benefits, and would only require care of certain object permissions: Scratch Org Info, ActiveScratchOrg, NamespaceRegistry - as they are not available in all orgs)
1. Run the following command:
sfdx force:mdapi:deploy -d mdapi -u [[orgAlias]] -w
2. Add the permission set to your user
sfdx force:user:permset:assign -n TileLauncherDemoAdmin -u [[orgAlias]]
3. Open the Org and run the Tile Launcher Setup
Next, click on the 'dice' and open the 'URL Hack Demo' app.
and run Setup from the Demo Setup tab.
This will then perform any additional setup (such as creating records, etc).
Thats it. See the How to Use section for how to use the app.
Copyright 2019 Salesforce
(MIT)
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent