Direkt zum Hauptbereich

CSS Switch in Visualforce Page

Es ist schon erstaunlich, was man alles mit CSS und ohne Einsatz von JavaScript und Grafiken erreichen kann.
Das folgende Beispiel zeigt einen Switch eingebaut in eine Visualforce Seite.




Auszug aus Visualforce Page
--------------------------------------
<!-- BUTTONS -->
<div style="border:0px solid blue; width:100%; text-align:center;">
  <!-********************************-->
  <!-- SWITCH -->
  <!-********************************-->
  <apex:actionRegion >
    <apex:outputPanel styleclass="rss" rendered="true">
      <input type="checkbox" id="inputVersion" class="inputVersion" checked="checked"/>
          <label for="inputVersion" id="swtitchLabel">
            <i></i>
          </label>   
        <apex:actionSupport event="onclick" action="{!switchVersion}" rerender="version" status="switchVersionStatus"/>   
      </apex:outputPanel>
  </apex:actionRegion>
  <!-********************************-->                      
  <!-- SAVE -->
  <apex:commandButton styleClass="btn" value="Save" action="{!save}" />
</div>

                   
<!-- ********** AJAX LOADING STATUS ************-->
<apex:actionStatus id="switchVersionStatus">
  <apex:facet name="start">                                                                        
    <div class="switchVersionStatus">
      <img src="/img/loading32.gif" height="20"/>
    </div>
  </apex:facet>
</apex:actionStatus>
                 
<apex:outputPanel id="version">
  <!-- hier wird der dynamische Inhalt geladen -->
</apex:outputPanel>


Styles

--------------------------------------

<style>  
        .clear {
            clear: both;
        }
       
        .rss{
            padding-right:20px;
        }
       
        #swtitchLabel {
            width: 80px;
            height: 20px;
            display: inline-block;
            position: relative;
            border-radius: 14px;
            -webkit-background-clip: padding-box;
            -moz-background-clip: padding-box;
            background-clip: padding-box;
            background: rgb(138,138,138);
            background: -webkit-linear-gradient(top, rgba(138,138,138,1) 0%, rgba(140,140,140,1) 14%, rgba(159,159,159,1) 72%, rgba(164,164,164,1) 100%);
            background: -moz-linear-gradient(top, rgba(138,138,138,1) 0%, rgba(140,140,140,1) 14%, rgba(159,159,159,1) 72%, rgba(164,164,164,1) 100%);
            background: -o-linear-gradient(top, rgba(138,138,138,1) 0%, rgba(140,140,140,1) 14%, rgba(159,159,159,1) 72%, rgba(164,164,164,1) 100%);
            background: -ms-linear-gradient(top, rgba(138,138,138,1) 0%, rgba(140,140,140,1) 14%, rgba(159,159,159,1) 72%, rgba(164,164,164,1) 100%);
            background: linear-gradient(top, rgba(138,138,138,1) 0%, rgba(140,140,140,1) 14%, rgba(159,159,159,1) 72%, rgba(164,164,164,1) 100%);
            box-shadow: inset 0 2px 5px 0 rgba(0, 0, 0, 0.32), inset 0 -1px 0 0 rgba(0, 0, 0, 0.1);
            line-height: 20px;
            font-style: normal;
            color: #fff;
            text-shadow: 0 1px 1px rgba(0,0,0,0.1);
            font-weight: bold;
            -webkit-box-reflect: below 0px
                -webkit-gradient(linear, left top, left bottom,
                color-stop(0.5, transparent),
                to(rgba(255, 255, 255, 0.3)));
            -moz-transition: all 1s ease-in;
            -webkit-transition: all 1s ease-in;
            -o-transition: all 1s ease-in;
            transition: all 1s ease-in;
            cursor: pointer;
        }
       
        #swtitchLabel.attention:hover {
            background: rgb(238,159,7);
            background: -moz-linear-gradient(top,  rgba(238,159,7,1) 0%, rgba(240,171,8,1) 45%, rgba(243,182,15,1) 100%);
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(238,159,7,1)), color-stop(45%,rgba(240,171,8,1)), color-stop(100%,rgba(243,182,15,1)));
            background: -webkit-linear-gradient(top,  rgba(238,159,7,1) 0%,rgba(240,171,8,1) 45%,rgba(243,182,15,1) 100%);
            background: -o-linear-gradient(top,  rgba(238,159,7,1) 0%,rgba(240,171,8,1) 45%,rgba(243,182,15,1) 100%);
            background: -ms-linear-gradient(top,  rgba(238,159,7,1) 0%,rgba(240,171,8,1) 45%,rgba(243,182,15,1) 100%);
            background: linear-gradient(to bottom,  rgba(238,159,7,1) 0%,rgba(240,171,8,1) 45%,rgba(243,182,15,1) 100%);
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ee9f07', endColorstr='#f3b60f',GradientType=0 );
        }
        #swtitchLabel.attention:hover:before {
            content: "☢"; /* &#9762; */
            font-size: 22px
        }
        .inputVersion[type=checkbox]:checked ~ #swtitchLabel.attention:hover:before  {
            content: "on";
            font-size: 14px
        }
       
       
        #swtitchLabel i {
            position: absolute;
            top: -4px;
            right:60px;
            width: 24px;
            height: 24px;
            display: block;
            border-radius: 24px;
            background: rgb(255,255,255);
            background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(252,252,252,1) 11%, rgba(228,228,228,1) 50%, rgba(221,221,221,1) 53%, rgba(205,205,205,1) 97%, rgba(191,191,191,1) 100%);
            background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(252,252,252,1) 11%, rgba(228,228,228,1) 50%, rgba(221,221,221,1) 53%, rgba(205,205,205,1) 97%, rgba(191,191,191,1) 100%);
            background: -o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(252,252,252,1) 11%, rgba(228,228,228,1) 50%, rgba(221,221,221,1) 53%, rgba(205,205,205,1) 97%, rgba(191,191,191,1) 100%);
            background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(252,252,252,1) 11%, rgba(228,228,228,1) 50%, rgba(221,221,221,1) 53%, rgba(205,205,205,1) 97%, rgba(191,191,191,1) 100%);
            background: linear-gradient(top, rgba(255,255,255,1) 0%, rgba(252,252,252,1) 11%, rgba(228,228,228,1) 50%, rgba(221,221,221,1) 53%, rgba(205,205,205,1) 97%, rgba(191,191,191,1) 100%);
            box-shadow: inset 0 -3px 3px 0 rgba(0, 0, 0, 0.1), inset 0 -1px 1px 0 rgba(255, 255, 255, 0.4), 0 2px 0 0 rgba(0, 0, 0, 0.2);
            -webkit-transition: all 200ms ease;
            -moz-transition: all 200ms ease;
            -o-transition: all 200ms ease;
            -ms-transition: all 200ms ease;
            transition: all 200ms ease;
        }
       
        #swtitchLabel i:before {
            content: "";
            display: block;
            position: absolute;
            top: 50%;
            left: 50%;
            width: 14px;
            height: 14px;
            margin: -7px 0 0 -7px;
            border-radius: 18px;
            background: rgb(239,239,239);
            background: -webkit-linear-gradient(top, rgba(239,239,239,1) 0%, rgba(225,225,225,1) 6%, rgba(225,225,225,1) 24%, rgba(229,229,229,1) 94%, rgba(242,242,242,1) 100%);
            background: -moz-linear-gradient(top, rgba(239,239,239,1) 0%, rgba(225,225,225,1) 6%, rgba(225,225,225,1) 24%, rgba(229,229,229,1) 94%, rgba(242,242,242,1) 100%);
            background: -o-linear-gradient(top, rgba(239,239,239,1) 0%, rgba(225,225,225,1) 6%, rgba(225,225,225,1) 24%, rgba(229,229,229,1) 94%, rgba(242,242,242,1) 100%);
            background: -ms-linear-gradient(top, rgba(239,239,239,1) 0%, rgba(225,225,225,1) 6%, rgba(225,225,225,1) 24%, rgba(229,229,229,1) 94%, rgba(242,242,242,1) 100%);
            background: linear-gradient(top, rgba(239,239,239,1) 0%, rgba(225,225,225,1) 6%, rgba(225,225,225,1) 24%, rgba(229,229,229,1) 94%, rgba(242,242,242,1) 100%);
            box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.1);
        }
        #swtitchLabel:hover i {
            box-shadow: inset 0 -3px 3px 0 rgba(0, 0, 0, 0.1), inset 0 -1px 1px 0 rgba(255, 255, 255, 0.4), 0 2px 0 0 rgba(0, 0, 0, 0.3);
        }
        #swtitchLabel:active i:before {
            box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.3);
        }
       
        #swtitchLabel:before {
            content: "off";
            margin-left: 30px;
            text-transform: uppercase;
            -webkit-transition: all 200ms ease;
            -moz-transition: all 200ms ease;
            -o-transition: all 200ms ease;
            -ms-transition: all 200ms ease;
            transition: all 200ms ease;
        }
       
        #swtitchLabel:after {
            content: "Category Search";
            right: 60px;
            width: 150px;
       
            text-transform: uppercase;
            font-size: 10px;
            font-weight: bold;
            color: #999;
            text-shadow: 0 1px 1px rgba(255,255,255,0.5), 0 -1px 1px rgba(0,0,0,0.1);
            position: absolute;
            top: 0;
        }
       
        .inputVersion[type=checkbox]:checked ~ #swtitchLabel:before {
            content: "on";
            text-transform: uppercase;
            margin-right: 30px;
            margin-left: 0;
        }
       
        .inputVersion[type=checkbox]:checked ~ #swtitchLabel:after {
            xcontent: "Category Search";
            xright: -170px;
        }
       
        .inputVersion[type=checkbox]:checked ~ #swtitchLabel{
            background: rgb(141,173,51);
            background: -webkit-radial-gradient(center, ellipse cover, rgba(141,173,51,1) 0%, rgba(146,178,55,1) 24%, rgba(157,187,64,1) 55%, rgba(166,194,78,1) 100%);
            background: -moz-radial-gradient(center, ellipse cover, rgba(141,173,51,1) 0%, rgba(146,178,55,1) 24%, rgba(157,187,64,1) 55%, rgba(166,194,78,1) 100%);
            background: -o-radial-gradient(center, ellipse cover, rgba(141,173,51,1) 0%, rgba(146,178,55,1) 24%, rgba(157,187,64,1) 55%, rgba(166,194,78,1) 100%);
            background: -ms-radial-gradient(center, ellipse cover, rgba(141,173,51,1) 0%, rgba(146,178,55,1) 24%, rgba(157,187,64,1) 55%, rgba(166,194,78,1) 100%);
            background: radial-gradient(center, ellipse cover, rgba(141,173,51,1) 0%, rgba(146,178,55,1) 24%, rgba(157,187,64,1) 55%, rgba(166,194,78,1) 100%);
        }
       
        .inputVersion[type=checkbox]:checked ~ #swtitchLabel i {
            right: -6px;
        }
       
        /* you can hide leter */
        .inputVersion:before {
            xcontent: "Logic:";
            margin-left: -35px;
            font-size: 10px;
            color: #333;
        }
        .inputVersion {
            display:none;
            position: absolute;
            bottom: 5px;
            left: 50%;
            margin-left: 10px;
            opacity: .1;
          -webkit-transition: all 0.3s ease-out;
             -moz-transition: all 0.3s ease-out;
               -o-transition: all 0.3s ease-out;
                  transition: all 0.3s ease-out;
        }
        .inputVersion:hover {
            opacity: 1;
        }                   
                   
     .switchVersionStatus{
            display: block;
            position: absolute;
        }              
                   

    </style>
Labels:

Kommentare

Kommentar veröffentlichen

Beliebte Posts aus diesem Blog

Salesforce.com Certified Advanced Administrator (WI15)

Im Vergleich zu den beiden Consultants Zertifizierungen war die Advanced Admin ein Spaziergang!
Allerdings ganz ohne Vorbereitung schafft man die Prüfung auch nicht.


Hier sind einige Fragen/Antworten aus der aktuellen Prüfung.

1. Capabilities of collaborative forecasting?
- Rename categories
- Forecast using opportunity splits
- Overlay Quota
- Add categories
- Select a default forecast currency setting

2. We have four Sales Regions. Each of the region's VPs wants to have a dashboard emailed every Monday.
- Create a separate dashboard for each VP
- Create one dashboard using Visualforce
- Create one dashboard that includes a filter for each region
- Create a reporting snapshot

3. User is trying to access content in a library, but receiving an insufficent privileges message.
How to troubleshoot?
- has the user's profile the CRM content permission enabled
- user has been granted permission "Viewer" to the library
- user's record has the CRM content permisson enabled
- …
Kommentar veröffentlichen
Mehr anzeigen

Emails mit APEX | SINGLE_EMAIL_LIMIT_EXCEEDED

Email-Versand mit Visualforce und Apex kann schon manchmal Kopfschmerzen bereiten....

Entweder ist die Email zu groß, oder zu viele Attachments oder der HeapSize "beschwert sich" oder, wenn letztendlich alles läuft,  man wird von den Salesforce Limits zurück zum Ausgangspunkt katapultiert.

Das kann doch nicht so schwer sein!
Ist es auch nicht, wenn man das schon einmal gemacht hat ;-)

Habe eine Visualforce Maske zum Versenden von HTML Emails programmiert.
Diese werden als SingleEmailMessage gesendet:
Messaging.sendEmail(new Messaging.SingleEmailMessage[] { mail });
Sobald die Anzahl der pro Tag gesendeten Emails den Salesforce Limit "knackt", wird dem User die entsprechende Meldung eingeblendet.



Die auf die Org bezogene Limitierung lässt sich mit LIMITS.getLimitEmailInvocations() berechnen.

Hier ein Auszug aus den "Execution Governors and Limits"
https://developer.salesforce.com/docs/atlas.en-us.apexcode.meta/apexcode/apex_gov_limits.htm

A Dev Edition org ha…
Kommentar veröffentlichen
Mehr anzeigen

Salesforce - Datensätze sperren (Umsetzung)

Record Lock - nun, die Umsetzung.Wir haben bereits mehrere VisualForce Pages im Einsatz. Aus dem Grund ist das zuvor beschriebene Konzept darauf zugeschnitten. Selbstverständlich lässt sich der Code auch für Standard und Custom Objects verwenden, ohne den Einsatz von VisualForce Pages. Na ja, mindestens eine VF Page brauchen wir eigentlich schon - diejenige, die von dem dem "Edit" Button aufgerufen wird.

Ich zeige jetzt die wichtigsten Bausteine aus der Umsetzung.
1) Diese VF Page wird aufgerufen sobald man den "Edit" Button betätigt

<apex:pagestandardController="myObject"title="{!myObject.Name}"extensions="LockController"action="{!SwitchToPage}">
<!-- READ MODE --> <apex:includepageName="myObjectRead"rendered="{!isEditMode == false}"/>
<!-- EDIT MODE --> <apex:includepageName="myObjectEdit"rendered="{!isEditMode == true}"/>
</apex:page>

Folgendes passiert …
Kommentar veröffentlichen
Mehr anzeigen