Vous consultez une page technique concernant le logiciel de gestion Mercator. Celle-ci contient des informations spécifiques destinées aux professionnels de Mercator. Souhaitez-vous être redirigés vers des informations plus générales ?


   Ne plus poser cette question

Paramétrage XAML des écrans de modification

0000002823     -      01/06/2018

MercatorPenguin 2.0 permet la modification de certaines données dans Mercator. Pour cela, il est nécessaire de paramétrer des écrans qui seront disponibles dans l'application mobile. Essentiellement, ce paramétrage XAML fera usage d'EditControls propres à MercatorPenguin. Toutefois, les contrôles standards de Xamarin Forms pourront aussi être utilisés. Ce sera principalement pour le cas du Label, qui permet d'afficher une information non modifiable.

Comme pour les bundles de type "Liste", il est possible d'effectuer une substitution d'une valeur d'une propriété par le contenu d'une colonne dans la DataRow de base (DataRow de base = l'enregistrement complet dans la table ACTION pour une action du CRM, le record complet du client pour une fiche de signalétique client, ...). Pour cela, il suffit d'utiliser le caractère @ et de mettre le nom de la colonne en majuscule.

Par exemple : pour l'affichage du C_ID d'un client associé à une action.

<Label Text="@ID_SIG" FontSize="12" />

EditEntry

L'EditEntry est l'objet qui permet la saisie d'un texte libre sur une seule ligne ou d'un nombre. Il est associé à une colonne de la DataRow de base par sa propriété Source. Cette propriété doit être obligatoirement complétée et correspondre à une colonne de cette DataRow. Le type numérique ou pas est automatiquement détecté par MercatorPenguin et l'objet se comporte différemment en fonction de cette caractéristique : clavier complet pour les caractères, clavier numérique pour les zones numériques. Dans le cas d'un type numérique avec décimales, il est possible de spécifier une propriété Decimals avec le nombre de décimales souhaitées. Une propriété UpperCase à mettre à "True" ou "False" permet de gérer la casse automatique vers les majuscules.

<m:EditEntry Placeholder="Sujet"  Source="objet" HorizontalOptions="FillAndExpand" />

Le contenu saisi dans un EditEntry peut, selon la source associée, être validé. Ce sera le cas pour des champs tels que le numéro de TVA, les comptes bancaires, ... Il est important de noter que cette validation n'est pas effectuée durant la saisie mais lors de la sauvegarde. Le cas échéant, un message sera affiché et le focus sera placé dans la zone dont le contenu est refusé.

Un EditEntry peut aussi automatiquement offrir une liaison vers un signalétique, comme par exemple pour les liaisons croisées entre signalétiques. Cette liaison s'active selon la reconnaissance par MercatorPenguin de la source de l'EditEntry. Une fois la liaison activée, la validation de la zone via le clavier virtuel affichera, le cas échéant, une liste permettant de sélectionner la fiche souhaitée.

Si un EditEntry est associé à un signalétique, il est opportun de placer à proximité un objet de type TargetSigLabel. Celui-ci affichera le libellé associé à la fiche sélectionnée dans l'EditEntry. Dans ce TargetSigLabel, la propriété Origin est obligatoire et doit reprendre la source de l'EditEntry correspondant.

Exemple d'EditEntry et de son TargetSigLabel correspondant 

<StackLayout Orientation="Horizontal">
<m:EditEntry Placeholder="Article" Source="c_id_art" Margin="0,0,25,0" WidthRequest="120" />
<m:TargetSigLabel Origin="c_id_art" Font="Medium" VerticalOptions="Center" HorizontalOptions="FillAndExpand" />
</StackLayout>

Il est possible de modifier le libellé qui est affiché, d'une part dans la liste permettant la sélection de la fiche, d'autre part dans le TargetSigLabel. Pour cela, il faut modifier la fonction scalaire SQL associée. Par exemple, dans le cas d'un article : dbo.LIBTARGETSIG_STOCK. Ces fonctions sont créées automatiquement par MercatorPenguinServer mais ne seront ensuite jamais mises à jour. Il est dès lors tout à fait permis de modifier le contenu de ces fonctions afin d'afficher d'autres informations. Le retour de ces fonctions est toujours une seule chaîne de caractères. Le cas échéant, concaténez les informations désirées.

La recherche dans un EditEntry associé à un signalétique exécute la méthode Search du MercatorUi.Sig.Sig associé. L'algorithme de recherche est donc identique à celui utilisé dans Mercator pour une recherche semblable. De surcroît, il est possible d'intervenir par customizer, notamment via l’événement BeforeSearch pour influer sur la recherche. Il est aussi possible de modifier la requête SQL de recherche en implémentant l'interface IStringUpdater dans le customizer Sig. La requête SQL se reconnaît par cet ID : <ID>SIGSEARCH_STOCK_PENGUIN</ID> (STOCK à remplacer par le signalétique concerné).


EditEditor

L'EditEditor est un objet permettant la saisie de texte sur plusieurs lignes. Il sera typiquement utilisé pour la saisie de mémos connectés à une colonne SQL de type VarChar(MAX). Cette liaison se fait via la propriété Source.

<m:EditEditor Source="note" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"/>

EditPicker

L'EditPicker est l'objet qui permet de choisir une valeur dans une liste déroulante. Comme pour l'EditEntry, il faut lui spécifier la propriété Source pour l'associer à une colonne de la DataRow de base. Dans la plupart des cas, il n'est pas nécessaire de définir soi-même les éléments présentés dans la liste déroulante : tout comme dans Mercator, MercatorPenguin est capable de déterminer le contenu de cette liste sur base de la source.

<m:EditPicker Source="s_id_rayon" HorizontalOptions="FillAndExpand" />

Si toutefois, on souhaite indiquer une source de liste personnalisée, il est possible d'utiliser un des cas prévus ci-dessous :

Source alphanumérique et la valeur affichée est la valeur stockée dans la DataRow

<m:EditPicker Source="c_myfield" HorizontalOptions="FillAndExpand">
<Picker.ItemsSource>
<x:Array Type="{x:Type x:String}">
<x:String>Item 1</x:String>
<x:String>Item 2</x:String>
<x:String>Item 3</x:String>
</x:Array>
</Picker.ItemsSource>
</m:EditPicker>

Source alphanumérique et la valeur affichée n'est pas la valeur stockée dans la DataRow

<m:EditPicker Source="c_myfield" HorizontalOptions="FillAndExpand">
<Picker.ItemsSource>
<x:Array Type="{x:Type m:ItemString}">
<m:ItemString Id="Id1" Lib="Item 1" />
<m:ItemString Id="Id2" Lib="Item 2" />
<m:ItemString Id="Id3" Lib="Item 3" />
</x:Array>
</Picker.ItemsSource>
</m:EditPicker>

Source numérique

<m:EditPicker Source="c_myfield" HorizontalOptions="FillAndExpand">
<Picker.ItemsSource>
<x:Array Type="{x:Type m:ItemInt}">
<m:ItemInt Id="1" Lib="Item 1" />
<m:ItemInt Id="2" Lib="Item 2" />
<m:ItemInt Id="3" Lib="Item 3" />
</x:Array>
</Picker.ItemsSource>
</m:EditPicker>

 

Il est aussi possible d'indiquer une requête SQL qui sera utilisée pour déterminer les éléments proposés. Ceci se fait par le biais de la propriété ReqSql. Cette requête SQL doit produire une seule table qui contient, au choix :

  • une seule colonne de type "chaîne de caractères"
  • deux colonnes de type "chaîne de caractères", la première étant l'élément affiché et la seconde étant l'ID stocké dans la base de données
  • une première colonne de type "chaîne de caractères", contenant l'élément affiché, et une seconde colonne de type numérique, contentant la clé stockée dans la base de données.
<m:EditPicker Source="c_myfield" HorizontalOptions="FillAndExpand" ReqSql="select mycol from MYTABLE order by mycol" />

Nous attirons l'attention sur le fait que le nombre d'enregistrements ainsi renvoyés vers le picker doit rester raisonnable.


EditDatePicker

L'EditDatePicker permet la saisie d'une date. Il requiert une source dont le type est compatible avec une date. Celle-ci doit être indiquée dans sa propriété Source.

<m:EditDatePicker Source="s_mydate" HorizontalOptions="FillAndExpand" />

EditDateTimePicker

L'EditDateTimePicker permet la saisie d'une date et d'une heure. Il requiert une source dont le type est DateTime. Celle-ci doit être indiquée dans sa propriété Source.

<m:EditDateTimePicker Source="moment_1" HorizontalOptions="FillAndExpand" />

Etant donné que ce contrôle dispose de deux composants, il est doté des propriétés suivantes, agissant respectivement sur le composant "date" ou le composant "heure" :

  • WidthRequest1 et WidthRequest2
  • HeightRequest1 et HeightRequest2
  • MinimumWidthRequest1 et MinimumWidthRequest2
  • MinimumHeightRequest1 et MinimumHeightRequest2
  • HorizontalOptions1 et HorizontalOptions2
  • VerticalOptions1 et VerticalOptions2
  • Margin1 et Margin2

Ces propriétés sont disponibles pour agir sur le composant "date" :

  • MinimumDate
  • MaximumDate

EditSwitch

L'EditSwitch est un interrupteur qui est l'équivalent d'une case à cocher (checkbox). Il est toujours associé à une colonne de type boolean, via sa propriété Source.

<m:EditSwitch Source="fait" BackgroundColor="%ThemeColor%" />

EditImage

L'EditImage permet d'afficher et de modifier une image associée à une colonne varbinary(max), via sa propriété Source. Les autres types d'images (images associées à une URL ou images associées à un nom de fichier) ne sont pas pris en charge.

<m:EditImage Source="s_image1" Margin="25,0,0,0" HorizontalOptions="FillAndExpand" HeightRequest="250" Aspect="AspectFill" />

La modification de l'image se fait en cliquant sur le bouton "Choisir Photo". Celui-ci offre les possibilités suivantes :

  • Choisir Existante : sélectionner une photo dans la photothèque de l'appareil
  • Prendre Photo : utiliser l'appareil pour prendre une photo
  • Touch Pad : présente un écran permettant de saisir, par exemple, une signature écrite en mode "touch pad".

Cet objet dispose des propriétés MaxWidth et MaxHeight qui permettent de spécifier en pixels la taille maximale de la photo. MercatorPenguin effectuera un redimensionnement. Ceci est nécessaire afin de ne pas envoyer vers MercatorPenguinServer des photos trop lourdes en raison de leur haute définition. (Valeur par défaut : 640 x 480 pixels)

Via sa propriété optionnelle ButtonText, il est possible de changer le texte du bouton "Choisir Photo".

Si on souhaite que le bouton "Choisir Photo" ne présente pas de boite de dialogue, mais démarre automatiquement un des choix possibles, il faut ajouter la propriété PhotoAction qui doit alors prendre une de ces trois valeurs :

  • ChooseExisting
  • TakePhoto
  • TouchPad

Sa valeur par défaut est Ask.


EditScanButton

L'EditScanButton permet d'utiliser l'appareil photo du mobile comme lecteur de codes-barres. Ce bouton doit être associé à un EditEntry afin d'y placer le résultat du scan. Cela se fait par sa propriété TargetSource qui doit reprendre la source de l'EditEntry concerné.

Exemple en association avec S_CLE1 :

<StackLayout Orientation="Horizontal">
    <m:EditEntry Source="s_cle1" Placeholder="Clé 1" Margin="0,0,15,0" HorizontalOptions="FillAndExpand" />
    <m:EditScanButton TargetSource="s_cle1" />
</StackLayout>