Simple Form-Button w/ JavaScript-Function

Dieses Beispiel zeigt das Erstellen eines neuen Buttons auf dem Kontakt-Formular innerhalb einer neuen Gruppe. An den Button ist eine JavaScript-Funktion gebunden. Der Button soll nur bei bestehenden Kontakten angezeigt werden.

Umgebung:Microsoft Dynamics CRM 2011 RC
(vanilla/Out-Of-The-Box)

Deployment:
onpremise

Benötigte Komponenten:

• 2 Icons
• simplebuttonlib.js
• SimpleButton_1_0.zip

#1: Lösung SimpleButton erstellen
Zuerst erstellt man eine neue Lösung "SimpleButton" im CRM. Dieser Lösung fügt man die bereits vorhandene Entität "Kontakt" hinzu.

1.1 Lösung SimpleButton

#2: Icons der Lösung hinzufügen
Für den Button benötigt man zwei Icons. Diese müssen die Auflösung 16x16 Pixel und 32x32 Pixel haben.
 

SimpleButton16.png

 


SimpleButton32.png

Diese beiden Bilddateien werden ebenfalls der Solution "SimpleButton" als Webressource hinzugefügt.

2.1 Lösung SimpleButton mit Icons

#3: JavaScript-Bibliothek der Lösung hinzufügen
Der Code, der bei einem Klick auf den Button ausgeführt werden soll, wird in der Datei "simplebuttonlib.js" hinterlegt.

function buttonClick()
{
   alert("Do some action here!");
}

Die JavaScript-Datei wird der Lösung auch hinzugefügt.

3.1 Lösung SimpleButton mit JavaScript-Bibliothek

#4: Lösung "SimpleButton" exportieren
Die Lösung wird nun in die Datei "SimpleButton_1_0.zip" exportiert. Der Export muß "unmanaged" vorgenommen werden.


#5: Button-XML (RibbonDiffXml) in die Lösung einfügen
Die ZIP-Datei aus #4 entpacken und die XML-Datei "customizations.xml" zum Bearbeiten öffnen. Ziemlich am Ende der Datei sollte sich folgender Textblock finden:

<RibbonDiffXml>
  <CustomActions /> 
  <Templates>
    <RibbonTemplates Id="Mscrm.Templates" />
  </Templates>
  <CommandDefinitions />
  <RuleDefinitions>
    <TabDisplayRules />
    <DisplayRules />
    <EnableRules />
  </RuleDefinitions>
  <LocLabels />
</RibbonDiffXml>

Dieser XML-Knoten ist durch den folgenden zu ersetzen:

<RibbonDiffXml>

<CustomActions>
  <CustomAction Id="MyCustomGroup.MaxSize.CustomAction"
    Location="Mscrm.Form.contact.MainTab.Scaling._children"
    Sequence="120">
    <CommandUIDefinition>
    <MaxSize Id="MyCustomGroup.MaxSize"
        GroupId="MyCustomGroup.Group"
        Sequence="61"
        Size="LargeLarge" />
    </CommandUIDefinition>
  </CustomAction>
  <CustomAction Id="MyCustomAction"
    Location="Mscrm.Form.contact.MainTab.Groups._children"
    Sequence="60">
    <CommandUIDefinition>
      <Group Id="MyCustomGroup.Group"
      Command="MyCustomGroup.Command"
      Title="$LocLabels:MyGroupTitle"
      Sequence="62"
      Template="Mscrm.Templates.Flexible2"
      Image32by32Popup="$webresource:new_SimpleButton32.png">
        <Controls Id="MyCustomGroup.Controls">
          <Button Id="MyButton"
            Command="MyCommand"
            LabelText="$LocLabels:MyLabelText"
            ToolTipTitle="$LocLabels:MyLabelText"
            ToolTipDescription="$LocLabels:MyToolTip"
            TemplateAlias="o1"
            Image16by16="$webresource:new_SimpleButton16.png"
            Image32by32="$webresource:new_SimpleButton32.png" />
        </Controls>
      </Group>
    </CommandUIDefinition>
  </CustomAction>
</CustomActions>

<Templates>
  <RibbonTemplates Id="Mscrm.Templates"></RibbonTemplates>
</Templates>

<CommandDefinitions>
  <CommandDefinition Id="MyCommand">
    <EnableRules>
      <EnableRule Id="MyWebClient.EnableRule" />
      <EnableRule Id="MyNotNew.EnableRule"/>
    </EnableRules>
    <DisplayRules>
      <DisplayRule Id="MyFormStateNotNew.DisplayRule" />
      <DisplayRule Id="MyWebClient.DisplayRule" />
    </DisplayRules>
    <Actions>
      <JavaScriptFunction
        Library="$webresource:new_simplebuttonlib.js"
        FunctionName="buttonClick" />
    </Actions>
  </CommandDefinition>
  <CommandDefinition Id="MyCustomGroup.Command">
    <EnableRules>
      <EnableRule Id="MyNotNew.EnableRule" />
    </EnableRules>
    <DisplayRules>
      <DisplayRule Id="MyWebClient.DisplayRule" />
    </DisplayRules>
    <Actions />
  </CommandDefinition>
</CommandDefinitions>

<RuleDefinitions>
  <TabDisplayRules />
  <DisplayRules>
    <DisplayRule Id="MyFormStateNotNew.DisplayRule">
      <FormStateRule State="Create" InvertResult="true" />
    </DisplayRule>
    <DisplayRule Id="MyWebClient.DisplayRule">
      <CrmClientTypeRule Type="Web"/>
    </DisplayRule>
  </DisplayRules>
  <EnableRules>
    <EnableRule Id="MyWebClient.EnableRule">
      <CrmClientTypeRule Type="Web" />
    </EnableRule>
    <EnableRule Id="MyNotNew.EnableRule">
      <FormStateRule State="Create" InvertResult="true" />
    </EnableRule>
  </EnableRules>
</RuleDefinitions>

<LocLabels>
  <LocLabel Id="MyLabelText">
    <Titles>
      <Title languagecode="1033" description="Simple Button" />
    </Titles>
  </LocLabel>
  <LocLabel Id="MyToolTip">
    <Titles>
      <Title languagecode="1033" description="Simple Button Demo" />
    </Titles>
  </LocLabel>
  <LocLabel Id="MyGroupTitle">
    <Titles>
      <Title languagecode="1033" description="Demo" />
    </Titles>
  </LocLabel>
</LocLabels>

</RibbonDiffXml> 

Nach dem Speichern muß noch die "customizing.xml" in der ZIP-Datei aktualisiert, bzw. das Archiv neu erstellt werden.

#6: Lösung importieren und veröffentlichen
Die neuerstellte Anpassungsdatei aus #5 wird nun in das CRM importiert. Anschließend werden alle Anpassunge veröffentlich.

#7: Ergebnis überprüfen
Öffnet man nun ein Kontakt-Formular, erscheint unser "SimpleButton" auf dem Ribbon. Ein Klick auf ihn öffnet eine MessageBox.

7.1 SimpleButton in Aktion!

--

:: Links / Weiterführende Information:

• Solution SimpleButton_1_0.zip
• Result on demand - Walkthrough: Add a Custom Group to an Existing Tab for a Specific Entity