Anpassen von Formularen mithilfe lokaler CSS-Dateien

Das Feld LocalCSSFilePath der Aktivität Create Form kommt der Notwendigkeit entgegen, das Formular nach Ihren Wünschen anzupassen.

Bei der Verwendung der lokalen CSS-Datei sollten Sie einige Dinge beachten:

• Die globalen Stile werden sofort nach dem Festlegen des CSS-Dateipfads angewendet.
• Bestimmte Komponentenstile müssen als Klassen konfiguriert werden. Verwenden Sie einen relevanten Namen. (z. B. .username-label oder .submitButton-color).

• Die Formularvorschau zeigt die Stiländerungen nicht an, wenn Sie den CSS-Dateipfad als Variable festlegen. Um eine Vorschau der Änderungen anzuzeigen, verwenden Sie hartcodierte Werte für den Pfad Ihrer CSS-Datei.

Hinweis: Die Eigenschaft LocalCSSFilePath ist ab Version 1.3.0 des Pakets UiPath.Form.Activities verfügbar.

Tutorial

So entwerfen Sie das Formular mit bestimmten Darstellungsanforderungen:

1. Erstellen Sie eine CSS-Datei mit Ihren Stileinstellungen und speichern Sie sie auf Ihrem lokalen Gerät. Um beispielsweise die Beschriftungsfarben zu ändern und dem Formular einen benutzerdefinierten Hintergrund hinzuzufügen, haben wir die folgende CSS-Datei erstellt:

   body {
       background-image: url('https://images.pexels.com/photos/6590885/pexels-photo-6590885.jpeg');
       background-repeat: no-repeat;
       background-attachment: fixed;
       background-size: cover;
   }
   .lastname-label
   {
      color : red;
      font-size : 15px;
      font-weight : 10px;
   }
   .firstname-label
   {
      color : green;
      font-size : 17px;
      font-weight : 30px;
   }
   .city-label
   {
      color : blue;
      font-size : 19px;
      font-weight : 50px;
   }
   .eligible-label
   {
      color : purple;
      font-size : 12px;
      font-weight : 30px;
   }

2. Geben Sie in der Aktivität Formular erstellen > Eigenschaft Format > LocalCSSFilePathden Pfad zur CSS-Datei ein (z. B. "/file://C:\User heCssFile.css").

   Sie können auch den Pfad zur lokalen CSS-Datei als Variable speichern und den Variablennamen in das Feld LocalCSSFilePath eingeben .

   
   

   

   
   
3. Öffnen Sie den Formular-Designer, und navigieren Sie zu der Komponente, auf die Ihre Anpassung abzielt.
4. Geben Sie auf der Registerkarte Anzeige der Zielkomponente > Feld Benutzerdefinierte CSS- Klasse den Namen der benutzerdefinierten CSS-Klasse ein, die in der Datei konfiguriert ist. Dadurch werden die Daten in der CSS-Datei an Ihr Formular gebunden. Um beispielsweise die Beschriftung für das Dropdown-Menü Stadt anzupassen, geben Sie die entsprechende CSS-Klasse city-labelein.
   
   

   

   
   
5. Speichern Sie die Komponente.
6. Wiederholen Sie die Schritte 3 bis 5 für jede Komponente, die Sie mithilfe Ihrer lokalen CSS-Datei anpassen müssen.
7. Speichern Sie das Formular.

Beispielworkflow

Um den vollständigen Workflow zu überprüfen oder eine zukünftige Referenz zu haben, laden Sie das XAML-Beispielherunter