Sunday 21 June 2015

Use Google Polymer Paper buttons in Visualforce page

Visulforce page:

<apex:page showHeader="false">
<head>

  <meta charset="utf-8"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes"/>

  <title>paper-button</title>

  <script src="https://www.polymer-project.org/1.0/components/webcomponentsjs/webcomponents.js"></script>

  <link href="https://www.polymer-project.org/1.0/components/font-roboto/roboto.html" rel="import"/>
  <link href="https://www.polymer-project.org/1.0/components/core-icon/core-icon.html" rel="import"/>
  <link href="https://www.polymer-project.org/1.0/components/core-icon/core-icon.html" rel="import"/>
  <link href="https://www.polymer-project.org/1.0/components/paper-button/paper-button.html" rel="import"/>

  <style shim-shadowdom="shim-shadowdom">
    body {
      font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;
      font-size: 14px;
      margin: 0;
      padding: 24px;
      -webkit-tap-highlight-color: rgba(0,0,0,0);
      -webkit-touch-callout: none;
    }

    section {
      padding: 20px 0;
    }

    section > div {
      padding: 14px;
      font-size: 16px;
    }

    paper-button.colored {
      color: #4285f4;
    }

    paper-button[raised].colored {
      background: #4285f4;
      color: #fff;
    }

    paper-button.custom > core-icon {
      margin-right: 4px;
    }

    paper-button.hover:hover {
      background: #eee;
    }

    paper-button.blue-ripple::shadow #ripple {
      color: #4285f4;
    }

  </style>
</head>
<body unresolved="unresolved">

  <template is="auto-binding">
    <div id="clicker" on-tap="{{clickAction}}">
  <section>

    <div>Flat buttons</div>

    <paper-button>button</paper-button>
    <paper-button class="colored">colored</paper-button>
    <paper-button disabled="disabled">disabled</paper-button>
    <paper-button noink="noink">noink</paper-button>

  </section>

  <br/>

  <section>

    <div>Raised buttons</div>

    <paper-button raised="raised">button</paper-button>
    <paper-button raised="raised" class="colored">colored</paper-button>
    <paper-button raised="raised" disabled="disabled">disabled</paper-button>
    <paper-button raised="raised" noink="noink">noink</paper-button>

  </section>

  <section>

    <div>Custom button content</div>

    <paper-button class="colored custom">
      <core-icon icon="check"></core-icon>
      ok
    </paper-button>
    <paper-button class="custom">
      <core-icon icon="clear"></core-icon>
      cancel
    </paper-button>
    <br/>
    <paper-button>
      <a href="https://www.polymer-project.org" target="_blank">link</a>
    </paper-button>

  </section>

  <section>

    <div>Toggle buttons</div>

    <paper-button toggle="toggle">button</paper-button>

    <paper-button toggle="toggle" raised="raised" noink="noink">noink</paper-button>

    <paper-button toggle="toggle" active="active" class="colored">active</paper-button>

    <paper-button toggle="toggle" raised="raised" active="active" class="colored">active</paper-button>

  </section>

  <section>

    <div>Styling options</div>

    <paper-button class="hover">hover</paper-button>
    <paper-button class="blue-ripple">custom ripple</paper-button>

  </section>
</div>
</template>

  <script>

    function clickAction(e) {
      var t = e.target;
      if (t.localName === 'paper-button') {
        if (t.hasAttribute('disabled')) {
          console.error('should not be able to click disabled button', t);
        } else {
          console.log('click', t);
        }
      }
    }

    addEventListener('template-bound', function(e) {
      e.target.clickAction = clickAction;
    });

  </script>

</body>

</apex:page>

Demo: https://www.polymer-project.org/0.5/components/paper-elements/demo.html#paper-button
--------------------------------------------------------------------------------------------------------------------------
Posted by at No comments:

Using Google Polymer component in Visualforce page.

Recently google released Polymer 1.0.

Hope you will like it

In 0.5 Polymer element collection:  https://www.polymer-project.org/0.5/docs/elements/


Polymer's core elements - https://www.polymer-project.org/0.5/docs/elements/core-ajax.html

 Polymer's paper elements - https://www.polymer-project.org/0.5/docs/elements/paper-button.html

 For using polymer in visualforce page. We need to add 
 <script src="https://www.polymer-project.org/0.5/components/webcomponentsjs/webcomponents.js"></script>

 Webcomponent script

 Below is the Polymer core-pages example

 <apex:page showHeader="false">
<head>
  <meta charset="utf-8"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
  <title>core-pages</title>
  <script src="https://www.polymer-project.org/0.5/components/webcomponentsjs/webcomponents.js"></script>
  <link rel="import" href="https://www.polymer-project.org/0.5/components/core-pages/core-pages.html"/>
  <style>
    html, body {
      height: 100%;
    }
    body {
      font-family: sans-serif;
    }
    core-pages {
      width: 300px;
      height: 300px;
      border: 1px solid black;
      -webkit-user-select: none;
      border-radius: 5px;
    }
    core-pages > div {
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: inherit;
    }
    core-pages.fancy {
      border: none;
      margin-left: 2em;
    }
    core-pages.fancy > div {
      opacity: 0;
      -webkit-transform: translate3d(-100px, 0, 0) scale(0.9);
      transform: translate3d(-100px, 0, 0) scale(0.9);
      transition: all 1s cubic-bezier(.03,.56,.7,.98);
      color: white;
    }
    core-pages.fancy > .one {
      background-color: red;
    }
    core-pages.fancy > .two {
      background-color: green;
    }
    core-pages.fancy > .three {
      background-color: blue;
    }
    core-pages.fancy > .four {
      background-color: purple;
    }
    core-pages.fancy > .five {
      background-color: black;
    }
    core-pages.fancy .core-selected + div {
      -webkit-transform: translate3d(100px, 0, 0) scale(0.9);
      transform: translate3d(100px, 0, 0) scale(1);
    }
    core-pages.fancy .core-selected {
      opacity: 1;
      -webkit-transform: translateX(0);
      transform: translateX(0);
    }
    core-pages.fancy div.begin {
      -webkit-transform: translate3d(100px, 0, 0) scale(0.9);
      transform: translate3d(100px, 0, 0) scale(0.9);
    }
  </style>
</head>
<body unresolved="unresolved" fullbleed="fullbleed" horizontal="horizontal" center="center" center-justified="center-justified" layout="layout">
  <core-pages id="first" selected="0">
    <div>One</div>
    <div>Two</div>
    <div>Three</div>
    <div>Four</div>
    <div>Five</div>
  </core-pages>

   <core-pages class="fancy" selected="0">
    <div class="one">One</div>
    <div class="two">Two</div>
    <div class="three">Three</div>
    <div class="four">Four</div>
    <div class="five">Five</div>
  </core-pages>

   <script>
    document.querySelector('#first').onclick = function(e) {
      this.selected = (this.selected + 1) % this.items.length;      
    };

     document.querySelector('core-pages.fancy').onclick = function(e) {
      this.selected = (this.selected + 1) % this.items.length;
      this.async(function() {
        if (this.selectedIndex == 0) {
          this.selectedItem.classList.remove('begin');
        } else if (this.selectedIndex == this.items.length - 1) {
          this.items[0].classList.add('begin');
        }
      });
    };
  </script>

 </body>
</apex:page>

 Demo: https://www.polymer-project.org/0.5/components/core-elements/demo.html#core-pages

 --------------------------------------------------------------------------------------------------------------------------
Posted by at No comments:

Salesforce Inbound Email Service


First create Apex classes that implement the Messaging.InboundEmailHandler interface.

global class myHandler implements Messaging.InboundEmailHandler {
 global Messaging.InboundEmailResult handleInboundEmail(Messaging.InboundEmail email, Messaging.InboundEnvelope envelope) {
 Messaging.InboundEmailResult result = new Messaging.InboundEmailresult();
          return result;
      }
  }

Controller

global class TestEmailServices implements Messaging.InboundEmailHandler
{
    global Messaging.InboundEmailResult handleInboundEmail(Messaging.inboundEmail email, Messaging.InboundEnvelope env)
    {
        //Initialize the variables
        Messaging.InboundEmailResult result = new Messaging.InboundEmailResult();
        //Check whether email subject startsWith NEW: or not
        if(email.subject.startsWith('NEW:'))
        {
            Case objCase = new Case(Subject = email.subject., Description = email.body, Status = 'New');
            insert objCase;//insert the task
            //create task for newly created task with same subject and email body
            Task objTask = new Task(Subject = email.subject, Description =  email.body , Status='Not Started', whatId = objCase.Id );
            insert objTask;
            esult.message = 'Successfully created Case and Task';
            result.success = true;
            return result;
        }
        else
        {
result.message = 'Please try again.';
result.success = true;
return result;
        }
}
}

This Apex class will create a case an task with email subject and email body.
And return a message to user.

IN Setup part

First Goto Setup --> Develop --> Email Service

Create new email service and choose this apex class.

and save and new Email address

Here you can provide any email address :- example
Click on active and Context User 
II
In Accept email from - You can set any domain or any email address like example@gmail.com or gmail.com

then save it.

Below you can find the addresses
like
example@1kz9xrgxvig77xehrsq4duu3puip1c1r38wgk8t03f7mjdcqwr.9-vzoieaq.ap1.apex.salesforce.com

Now Activate your email service.
Open your gmail and send an email to above address with subject starts with NEW:

 Done.




Posted by at No comments:

Access Cookies from different visualforce pages


Working with Cookie

 This is the Cookie class
https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/apex_classes_sites_cookie.htm

PageReference methods:-
https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/apex_System_PageReference_methods.htm

For example;- I have 2 VF pages.

1. CookieTest1
2. CookieTest2

We will create cookies in CookieTest1 page level and access those cookies in CookieTest2 page level.

Below the code checkout.

1. CookieTest1

<apex:page controller="CookieTest1Controller">
<apex:form >
    <apex:commandButton value="Click" action="{!createCookies}"/>
</apex:form>
</apex:page>

Controller:-

public class CookieTest1Controller
{
    public CookieTest1Controller()
    {
    }
    public pagereference createCookies()
    {
        Account objAccount = [SELECT Id from Account limit 1];
        Cookie objCookies = new Cookie('accId',objAccount.Id ,null,-1,false);
        pagereference pg = new pagereference('/apex/CookieTest2');
        pg.setCookies(new Cookie[]{objCookies});
        return pg;
    }
}

Here we are creating cookie and setCookies.
After that we will get this cookie in second page.

2. CookieTest2

<apex:page controller="CookieTest2Controller">
    <apex:detail subject="{!AccId}"/>
</apex:page>

Controller:-

public class CookieTest2Controller
{
    public Id AccId {get;set;}
    public CookieTest2Controller()
    {
        Cookie counter = ApexPages.currentPage().getCookies().get('accId');
        AccId =  Id.valueOf(counter.getValue());
    }
}

Based on accId we will get the Account id which was stored in cookie.


Posted by at No comments:
Subscribe to: Posts (Atom)