Lecture 3 minutes
Depuis sa version 7, Sugar propose des champs dans l'entête des vues enregistrement.
Pour la plupart des modules, on y retrouve l'icône du module, le champ name et des boutons d'action permettant de passer l'enregistrement courant en favori ou de s'abonner à son actualité.
Il peut vous arriver d'avoir envie d'un champ particulier de votre enregistrement dans cette zone. Il apparaîtra bien en évidence et sera visible quel que soit l'onglet actif de la vue.
Dans cet exemple, nous allons modifier la vue enregistrement des comptes pour placer le numéro de téléphone principal dans l'entête.
Voici à quoi ressemble la vue enregistrement standard. Le téléphone, que nous allons ensuite déplacer est mis en évidence :
Nous allons modifier le fichier custom/modules/Accounts/clients/base/views/record/record.php comme suit:
Localisez cette portion de code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
array( 'name' => 'panel_header', 'label' => 'LBL_PANEL_HEADER', 'header' => true, 'fields' => array( 0 => array( 'name' => 'picture', 'type' => 'avatar', 'size' => 'large', 'dismiss_label' => true, 'readonly' => true, ) , 1 => array( 'name' => 'name', 'events' => array( 'keyup' => 'update:account', ) , ) , 2 => array( 'name' => 'favorite', 'label' => 'LBL_FAVORITE', 'type' => 'favorite', 'dismiss_label' => true, ) , 3 => array( 'name' => 'follow', 'label' => 'LBL_FOLLOW', 'type' => 'follow', 'readonly' => true, 'dismiss_label' => true, ) , ) , ) , |
C'est le tableau qui définit les éléments de l'entête de la vue.
Ajoutez le champ téléphone (nom technique phone_office) à ce tableau:
|
1 2 3 4 5 |
4 => array( 'name' => 'phone_office', 'readonly' => false, 'dismiss_label' => true, ) , |
Enregistrez vos modifications puis faites une réparation rapide et reconstruction.
Voici à quoi ressemble votre vue maintenant:
"Mais il n'a pas bougé mon téléphone", pensez-vous.
Eh bien pas tout à fait. En réalité, le champ téléphone qui se trouvait dans la vue est toujours là. C'est vrai. Mais si vous baladez votre souris dans l'entête de la vue, un petit stylo apparaît. le champ téléphone est bien là. Il lui manque juste un peu de CSS pour l'afficher correctement.
Pour finir, nous allons donc supprimer le champ téléphone de la vue principale en passant par le studio.
Ajoutons quelques règles CSS pour que le champ téléphone s'affiche correctement.
Créez le fichier custom/themes/custom.less et ajoutez-y les lignes suivantes:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
.headerpane { & > h1 { span[data-type="phone"] { &.record-cell { .table-cell-wrapper { min-width: 50px; white-space: nowrap; .record-label, .index { display: inline-block; position: relative; margin: 0; padding: 0; } } } } } } |
Faites une nouvelle réparation rapide et reconstruction.
Et voilà! Le champ téléphone est bien là, dans l'entête. Exactement là où on l'attendait !
On peut améliorer la qualité des interfaces et mettre en évidence certaines informations cruciales ainsi.
Vous aurez compris que vous pouvez améliorer tout ça avec un peu de CSS ou en affichant le label à côté du champ.
Prenez cependant garde de bien vérifier que les champs ajoutés n’empêchent pas l'affichage correct des boutons, notamment sur des écrans de résolution modeste.
