Anpassen von Formularen mithilfe lokaler CSS-Dateien

The LocalCSSFilePath field of the Create Form activity comes to greet the necessity of customizing the form to your preference.

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 LokalerCSSDateiPfad 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. In the Create Form activity > Format property > LocalCSSFilePath, input the path to the CSS file (for example, "/file://C:\User heCssFile.css").

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

   

3. Öffnen Sie den Formular-Designer, und navigieren Sie zu der Komponente, auf die Ihre Anpassung abzielt.

4. In the Display tab of the targeted component > Custom CSS Class field, write the name of the custom CSS class configured in the file. This binds the data in the CSS file to your form. For example, to customize the label for the City drop-down, input the corresponding CSS class city-label.

   

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

Laden Sie das XAML-Beispielherunter, um den vollständigen Workflow zu überprüfen oder später darauf zurückgreifen zu können