Comment : ajouter un contrôle personnalisé à un écran HTML pour une application LightSwitch
Vous pouvez ajouter des contrôles personnalisés HTML à un écran d'un client pour une application d' LightSwitch .À l'aide de contrôles personnalisés, vous pouvez afficher ou collecter des informations d'une manière qui dépassent les fonctions du HTML prédéfinis contrôle pour LightSwitch.
Référencement de contrôles personnalisés
Pour utiliser un contrôle personnalisé sur un écran, vous devez d'abord ajouter une référence de fichier au projet, puis vous ajoutez une balise de script au fichier default.htm.
Pour référencer un contrôle personnalisé
Dans Explorateur de solutions, choisissez Affichage des fichiers de la liste dans la barre d'outils.
Ouvrez le menu contextuel pour le dossier Scripts, choisissez Ajouter, puis choisissez Élément existant.
Sélectionnez le fichier JavaScript (.js) pour le contrôle personnalisé, puis choisissez le bouton Ajouter .
[!REMARQUE]
Certains contrôles personnalisés requièrent que vous référencez également les fichiers de support supplémentaires.Consultez la documentation pour le contrôle personnalisé pour toutes les spécifications.
Dans <script> la section du fichier default.htm pour votre projet, ajoutez une balise de script qui ressemble à l'exemple suivant, où MyControl est le nom de votre contrôle personnalisé :
<script type=”text/javascript” src=”Scripts/MyControl.js” charset=”utf-8”></script>
Ajout de nouveaux contrôles et remplacement des contrôles existants
Vous pouvez ajouter un nouveau contrôle personnalisé à un écran ou remplacer un contrôle existant HTML dans LightSwitch.
Pour ajouter un contrôle personnalisé à un écran
Dans Arborescence de contenu de l'écran, sélectionnez un groupe.
Dans la barre d'outils Concepteur d'écran, dans la liste Ajouter un élément de disposition, choisissez contrôle personnalisé.
La boîte de dialogue Ajouter un contrôle personnalisé s'ouvre.
Dans la zone de texte Spécifiez les données du nouveau contrôle personnalisé, entrez l'élément ou la collection à lier au contrôle.
Par exemple, entrez Customers.selectedItem.PostalCode à lier à un code postal d'un client, ou entrez Customers.selectedItem à lier à l'enregistrement de client entier.
Ajoutez le code qui lie les données à une propriété spécifique du contrôle.
Pour plus d'informations, consultez l' Liaison de données à une propriété du contrôle personnalisé plus loin dans cette rubrique.
Pour remplacer un contrôle existant par un contrôle personnalisé
Dans Arborescence de contenu de l'écran, sélectionnez le contrôle que vous souhaitez remplacer.
Dans la fenêtre Propriétés, ouvrez la liste Type du contrôle, puis choisissez contrôle personnalisé.
Ajoutez le code qui lie les données à une propriété spécifique du contrôle.
Pour plus d'informations, consultez l' Liaison de données à une propriété du contrôle personnalisé plus loin dans cette rubrique.
Liaison de données à une propriété du contrôle personnalisé
Vous devez lier les données spécifiées dans la boîte de dialogue Ajouter un contrôle personnalisé à une propriété spécifique du contrôle personnalisé.
Pour lier des données à une propriété du contrôle personnalisé
Dans Arborescence de contenu de l'écran, choisissez le contrôle personnalisé.
Dans la fenêtre Propriétés, cliquez sur le lien hypertexte du La modification affichent le code .
Dans l'éditeur de code, ajoutez le code similaire à l'exemple suivant à la méthode d'afficher :
createMyControl(element, contentItem, “max-width: 300px; max-height: 300px”);Ce code affiche le contrôle au moment de l'exécution.Remplacez MyControl par le nom de votre contrôle, et modifiez les paramètres d' max-height et d' max-width si nécessaire.
Ajoutez le code pour toute fonctionnalité supplémentaire que le contrôle requiert.Consultez la documentation pour le contrôle personnalisé pour toutes les spécifications.