A blog dedicated to Salesforce Ohana

Google Polymer - Override Style

Here in this post, we will understand how we can override the default style in Google Polymer.

Step 1 -
Create the web component Hello-World-Override-Style.html as shown below -
<link rel="import" href="../bower_components/polymer/polymer.html">
<polymer-element name="Hello-World-Override-Style" noscript>
    <style type="text/css">
        p {
            color: red;
        }
    </style>
    <template>
        <style type="text/css">
            p {
                font-family: Verdana;
                color: blue;
            }
        </style>
        <p>Hello Sudipta Deb</p>
    </template>
</polymer-element>
As you can see we have two styles defined. Style 1 (Outside template tag) is just making the color of the font red and Style 2 (inside template tag) is making the font color as blue as well as set the font to Verdana.

Source Code @ https://github.com/suddeb/Learning-Polymer/blob/master/elements/Hello-World-Override-Style.html
Step 2 -
Create the html page to refer the web component. Name of the html page is: testHello-World-Override-Style.html.
<!DOCTYPE html>
<html>
<head>
    <title>Hello World Test with Google Polymer</title>
    <!-- Load the platform support library -->
    <script type="text/javascript" src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
    <!-- Load the component -->
    <link rel="import" href="elements/Hello-World-Override-Style.html">
</head>
<body>
    <!-- Declare the element by tag -->
    <Hello-World-Override-Style></Hello-World-Override-Style>
    <p>Hello Pradipta Deb</p>
</body>
</html>

Source Code @ https://github.com/suddeb/Learning-Polymer/blob/master/testHello-World-Override-Style.html

Step 3 -
Let's check the output -

Now as you can see that Style 2 is applied to the text inside the template of the web component. But Style 1 is applied to rest all <p> tags.

So this post demonstrated how to override the default style in Google Polymer. Any feedback, please let me know. Thanks.
Share:

Types of Chart for Dashboard in Salesforce


Salesforce reports are a great way to view and analyse data. If you’re new to Salesforce reports check out our Introduction to Salesforce Reports. Salesforce dashboards and charts are a helpful visual representation of your reports. Since dashboards and charts are much faster to look at and understand than reading a report they come in handy.

TYPES OF SALESFORCE CHARTS
There are a few different ways that you can summarise data with Salesforce charts. Depending on the type of data you have there are a few different charts you can use.

  • Vertical and Horizontal Bar Chart (Use horizontal bar chart to compare more groups than vertical)
  • Line Chart (best for showing data over time)
  • Pie / Donut Chart (Both are used to compare a group of data to the total. Donut Charts show the total in the middle)
  • Funnel Chart (best for sales opportunities)
  • Scatter Chart (Helps to visualise the correlation between values on a report)
Share:

Types of Report in Salesforce


In Salesforce, we have four different types of report. I will explain each of them below -

  • Tabular Report This is the most basic report. It displays just the row of records in a table like format with grand total. Tabular reports cannot be used for generating dashboards. Below is a screenshot of Tabular Report on Opportunity object.

    • Summary Report - This is the most commonly type of report. It allows grouping of rows of data. It supports sorting and displaying subtotals. Summary Report can be used to create Dashboard. For example in the below report on Opportunity object, report is grouped by type as shown below -
    • Matrix Report - This is the most complex report format. Matrix report summarize information in a grid format. Matrix Report can be used to create Dashboard. Matrix reports allows records to be grouped by both columns and rows. Below is one example -
    • Joined Report - A Joined Report can have data from multiple standard or custom report types. A joined report can have five report blocks where you can add summary fields, apply sorting, filter. Below is one example of Joined Report (All Opportunity vs Open Opportunity) -
      



    [Note - Please refer Salesforce's documentation on Joined Report. There you will get more examples and also the limitations of Joined Report. Here is the link - Joined Report


    Share:

    Display Progress Bar using Formula Field in Salesforce - No coding is required


    In this post, I will show how you can create a progress bar just using formula field in Salesforce. No coding required.

    The requirement is that for "Job Application" object, we have a picklist called "Status" which is having the values as -
    Based on the value chosen in pick list, we need to display the progress bar showing the progress of Job Application. So let's do that -

    Step 1 -
    We need to upload two image files as Static Resources first. 
    Yellow bar -
    Green bar -

    Step 2 -
    Create a field called in the Job Application object which will calculate the progress based on the values chosen in the Status field. The screenshot given below -

    Step 3 -
    Create another formula field to display the progress. The detail of the field is given below -

    Done.!!
    Let's check how our Job Application page looks like -

    When Status = 'New' -
    When Status = 'Review Resume'
    When Status = 'Phone Screen'
    When Status = 'Schedule Interview'
    When Status = 'Extend an offer'
    When Status = 'Hired' / 'Rejected'

    Great. Any feedback, please let me know. Thanks.


    Share:

    Integrating Google Polymer with VisualForce - Salesforce


    I am making myself busy in learning Google Polymer since last 2 weeks. Believe me, Google Polymer is the future, not because of it is developer by Google, because of it's Web Component development style.

    Today morning, I was trying to integrate Google Polymer with VisualForce. I searched in Google, but there was hardly any stuffs how to integrate Google Polymer with VisualForce. So I thought why not document the basic steps with a Hello World example to demonstrate the integration of Google Polymer with VisualForce.

    Let's start -

    Step 1:
    Download Google Polymer on your machine. Please refer my previous blog post to understand the procedure.

    Google Polymer - How to install

    Step 2:
    Once you download the polymer, you will find a folder named "bower_components". Compress the folder with the name "Polymer.zip". (Note: you can choose any name here :-))

    Step 3:
    Upload the Polymer.zip as static resource in your development environment as shown below -

    Step 4:
    Create your web component(New VisualForce Page) with Label: Hello-World, Name: Hello_World
    <apex:page contentType="text/plain">
         <link rel="import" href="{!URLFOR($Resource.Polymer, '/bower_components/polymer/polymer.html')}"/>
         <polymer-element name="Hello-World" noscript="true">
            <template>
                <p>Hello <b>SUDIPTA DEB</b> from Google Polymer Web Component</p>
            </template>
        </polymer-element>
    </apex:page>
    
    Note: Created web component "Hello-World".

    Step 5:
    Create the VisualForce Page(testHelloWorld) to refer the Web Component as shown below -
    <apex:page >
        <script src="{!URLFOR($Resource.Polymer, '/bower_components/webcomponentsjs/webcomponents.min.js')}"/>
        <link rel="import" href="/apex/Hello_World"/>
      
        <body>
            <!-- Declare the web component by tag -->
            <Hello-World></Hello-World>
        </body>
    </apex:page>
    
    Note: In the body section, I just referred web component by name. Before that I just imported the previously created web component file named "Hello_World".

    Step 6:
    Now when you check the page, you will find - 

    Great!!. So finally we have successfully integrated Google Polymer with VisualForce. Now it's time to explore both the sea - Google Polymer and VisualForce.




    Share:

    Understand Field's Visibility with Field-Level Security and Page Layout


    We all know that Field-Level security (FLS) and Page Layout are very important concept. But let us understand the concept with multiple use cases. I always believe going through use cases/scenarios are the best way to learn the concept.

    Use Case 1:
    Object Name: Student
    Field Name: Student Name
    Field is required: Yes

    Let’s try to change the field’s security both in profile level as well as through page layout.

    Changing though Field Level Security @ Profile Level (say for profile: Sales User) –
    You can’t change Field Level Security for a field if the field is marked as required during declaration. The field will become visible for all the profiles as shown below -
    So is it possible to do something in page layout? Let’s check –
    Seems like here also you can’t do any changes. Below is the screenshot –
    So the conclusion is that if a field is marked as required during declaration, that field will remain required and visible in all the page layouts. You can’t make that field read-only also.

    Use Case 2:
    Object Name: Student
    Field Name: Student Age
    Field is required: No
    Now we can have multiple scenarios. They are listed below –
    Scenario 1:
    Visible for Profile – Sales User: No
    Visible for Profile – Executive User: Yes
    Required in Page Layout - Yes
    Observation:
    Logged in as Adams, Karen (Profile – Sales User)
    Logged in as Bassi, Brent (Profile – Executive User)

    Scenario 2:
    Visible for Profile – Sales User: Yes
    Read Only for Profile - Sales User: Yes
    Required in Page Layout - Yes

    Observation:
    Logged in as Adams, Karen (Profile – Sales User)
    Scenario 3:
    Visible for Profile – Sales User: Yes
    Read Only for Profile - Sales User: No
    Required in Page Layout - Yes
    Observation:
    Logged in as Adams, Karen (Profile – Sales User)

    Scenario 4:
    Visible for Profile – Sales User: Yes
    Read Only for Profile - Sales User: No
    Required in Page Layout - No
    Read Only in Page Layout - Yes

    Observation:
    Logged in as Adams, Karen (Profile – Sales User)
    Use Case 3:
    Object Name: Student
    Field Name: Student Age
    Field is required: No
    Visible for Profile – Sales User: No
    Validation Rule in Student Object: 


    Observation:
    Logged in as Adams, Karen (Profile – Sales User)
    So the conclusion is that validation rule still applies even if the field is set to not visible.

    Hope now you can get better understanding of the how Field-Level Security and Page Layout works together. Any feedback, please let me know. Thanks.





    Share:

    Google Polymer - First Hello World Component


    In this post, we will see how we can create our first web component with Google Polymer. It's very easy.

    But before that we should understand what is Web Component?
    As Google says, which I think is the best way how you can define Web Component -
    Truely Web Components are the future.

    Step : Create the Web Component - 
    Below is the code to create the web component "Hello-World" and save it as - "Hello-World.html"
    <link rel="import" href="../bower_components/polymer/polymer.html">
    <polymer-element name="Hello-World" noscript>
        <template>
            <span>Hello from <b>Hello-World</b>. This is a shadow DOM. </span>
        </template>
    </polymer-element>
    
    You can save it under <PROJECT ROOT DIRECTORY>elements\Hello-World.html.
    Two important things to remember here -

    • name attribute is must and it must contain "-". It specifies the name of the element and this is the name we should refer in other parts of the project.
    • noscript indicates that this is a simple html file and it doesn't require any script.
    Here we will create the html page "testHello-World.html" and inside that we will refer the newly created web component as shown below -
    <!DOCTYPE html>
    <html>
    <head>
        <title>Hello World Test with Google Polymer</title>
        <!-- Load the platform support library -->
        <script type="text/javascript" src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
        <!-- Load the component -->
        <link rel="import" href="elements/Hello-World.html">
    </head>
    <body>
        <!-- Declare the element by tag -->
        <Hello-World></Hello-World>
    </body>
    </html>
    
    As you can see that in the body section we have only declared the newly created web component. In this way we can refer this web component in many places. Another advantage is that any future changes/enhancement, we can do it one place and it will be reflected in all the places.

    Source Code @ https://github.com/suddeb/Learning-Polymer/blob/master/testHello-World.html
    Step : Start the Web Server -
    To test the file, we have to start the web server. The instruction for mac is given below -

    sudo python -m SimpleHTTPServer 80

    Below is the output when you run the code from browser - http://localhost/testHello-World.html



    Share:

    Google Polymer - How to Install

    There are many ways how you can install polymer. But I prefer the recommended way i.e. Installing with Bower. Bower is a very powerful tool which manages all your dependencies. So when you will install Polymer, all dependencies will be installed automatically. You don't need to install them one by one. At the same time, Bower handles any future update also.

    Below are the steps you need to do -

    1. Install Node and npm first from http://nodejs.org/
    2. Install Git from http://git-scm.com/
    3. Once you have installed Node and npm, Git, install Bower by issuing the below command -
    4. npm install -g bower
      
    5. Once done, Bower is installed in your machine.
    6. You need to create bower.json file for your application. Run the below command from root of your project (It will ask few questions which are very much self explanatory)-
    7. bower init
    8. Now install Polymer by -
    9. bower install --save Polymer/polymer
    10. That's all. 
    Note: In order to update, issue the command bower update.
    Share:

    Ideas in Salesforce


    Idea is a community for users where users can post, comment, vote for Ideas. Salesforce offers Idea community at https://ideas.salesforce.com.
    Below are the user permission required -
    • To view and vote for Ideas - "Read" on Ideas.
    • To create new Idea - "Create" on Ideas.
    • To edit Ideas and edit comments on Ideas - "Edit" on Ideas.
    Few Important Terminologies used in Ideas
    • Category, Ideas - Categories are values defined by Administrator that help to organise the Ideas into logical sub-groups.
    • Comment - As name says, this is basically the comments posted against Ideas that enable discussions.
    • Community Expert - A community expert is a member of the community who speaks for the organisation. When community expert posts a comment or idea, a unique icon displays next to his/her name. There can be multiple community expert.
    • Demote - If an Idea is not good you feel, you can click dislike button to subtract 10 points from its overall score. It decreases the idea's overall popularity.
    • Promote - Promoting an Idea will add extra 10 points to the overall score.
    • Half-life - This is the concept which will determine how quickly the old ideas are moving from the Popular Ideas subtab to make room for Ideas with more recent votes.
    • Idea Themes - It is a forum in which you invite community members to post ideas about specific topics.
    • Point - It determines the popularity of the Idea. Each vote for an Idea is worth 10 points. 
    • Status - It helps to track the progress of Idea. 

    Share:

    Solution Management in Salesforce Part V - Import Solutions

    Importing Solution in salesforce is very simple but powerful feature. If you have comma separated value (CSV) files, then you can import that file into Salesforce.  You need to make sure that the file you are going to import is ready by -
    Salesforce Field: "Solution Title" ==> Label for Import File: "Title"
    Salesforce Field: "Solution Details" ==> Label for Import File: "Body"

    Follow the steps to import -

    • Click on Setup | Data Management | Import Solutions.
    • Click Start the Import Wizard!
    • Follow the steps to import.
    That's all.
    Share:

    Follow Me

    Enter your email address:

    Delivered by FeedBurner

    Popular Posts

    Labels

    Salesforce (105) Apex (44) admin (27) ADM (20) visualforce (20) dev 501 (19) integration (18) learn salesforce (18) 501 (16) SOAP (13) lightning (12) tutorial (11) Certification. (9) javascript (8) Trigger (7) test class (7) unit testing (7) Sharing and Visibility (6) design pattern (6) report (6) security (6) trailhead (6) Advanced Admin (5) Certification (5) Kitchener Developer Group (5) New Features (5) SOQL (5) css (5) dashboard (5) debug (5) developer (5) formula (5) mobile (5) salesforce release (5) service cloud (5) solution management (5) use case (5) JSON (4) Lightning Experience (4) Salesforce DX (4) WebSphere (4) best practice (4) cast iron (4) component (4) deployment (4) github (4) html (4) polymer (4) profiles (4) responsive (4) tdd (4) ui (4) Advanced Apex (3) Architect (3) Live Chat (3) Online Event (3) Performance (3) Products (3) Role (3) Sales Cloud (3) Scratch Org (3) Study Notes. (3) Summer15 (3) Tips (3) Web Technology (3) dynamic apex (3) event (3) license (3) map (3) mapbox (3) singleton (3) version controlling (3) Bulkify (2) Data Architecture and Management Certification (2) Devops (2) Distributed Version Controlling (2) ES6 (2) Eclipse (2) Einstein (2) Enterprise Territory Management (2) Financial Services Cloud (2) Force.com IDE (2) Governor Limit (2) Groups (2) IBM (2) Implicit Sharing (2) JourneyToCTA (2) Kitchener User Group (2) Lightning Design System (2) Live Agent (2) Metadata (2) Opportunity (2) Price Book (2) REST (2) SOSL (2) Sharing (2) Spring 15 (2) Summer17 (2) Territory (2) ant (2) automation tool (2) basic (2) chatter (2) coding (2) communication (2) console (2) controller (2) documentation (2) flow (2) git (2) jquery (2) logging (2) object (2) permission (2) process builder (2) release (2) salesforce1 (2) strategy (2) xml (2) Action Plan (1) Action Plan Template (1) Agent Productivity (1) Analytics (1) Apex Sharing (1) Arrow (1) Asynchronous callout (1) Aura Framework (1) Bots (1) Browser (1) Bulk data load (1) CTA (1) Calendar (1) Canon (1) Case Management (1) Cheat Sheet (1) Classic (1) Community (1) Constructor (1) Contact Center (1) Continuation (1) Continuous Integration (1) Convert (1) Cookie (1) Custom Metadata (1) Custom Object (1) Customer (1) Decorator Design Pattern (1) Dev Hub (1) Diwali (1) Email (1) FSC (1) Function (1) Goals (1) Guide (1) Household (1) Ideas (1) Improvement (1) KPIs (1) Large Data Volume (1) LastModifiedDate (1) Lightning Web Component (1) Manual Sharing (1) Metrics (1) New (1) OOPS (1) OWD (1) Omni-Channel (1) Partner (1) Person Account (1) Photo (1) Pipeline (1) Platform Developer I (1) Presentation (1) Product Schedule (1) Profile (1) Promise (1) Prototype (1) Public Site (1) Query Plan (1) QuickReference (1) Reports (1) Retrieve (1) Role Hierarchy (1) SFDX (1) Salesforce Optimizer (1) Session (1) Sharing Rule (1) Sharing Sets (1) Site (1) Skills (1) Snap-ins (1) Spring 17 (1) Summer14 (1) Summer16 (1) Switch (1) SystemModStamp (1) User License (1) Users (1) Webservice (1) Winter'15 (1) Winter'17 (1) access (1) agile (1) app (1) approval process (1) aura (1) awesome (1) backup (1) bitbucket (1) book (1) campaign (1) change set (1) code (1) code coverage (1) configuration (1) csv (1) custom button (1) custom settings (1) customization (1) data loader (1) database (1) delegate Admin (1) describe (1) dom (1) dreamforce (1) duplicate (1) dynamic (1) equals (1) error (1) field-level security (1) folder (1) ftp (1) generic (1) gift (1) global describe (1) hashcode (1) import wizard (1) jenkins (1) keynote (1) long running requests (1) monitoring (1) mysql (1) page layout (1) personal (1) power of one (1) record type (1) relationship (1) request (1) review (1) sub-tab (1) tab (1) username (1) visual workflow (1) workflow (1)

    Blog Archive

    Total Subscribers

    Total Pageviews