Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Branding Nintex Forms

Branding of Nintex forms with customization

  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Branding Nintex Forms

  1. 1. Branding Nintex Forms Kushan Lahiru Perera
  2. 2. Objectives • Now that your forms work the way that you want them to we next spend some time to get them looking great. • You will learn how to edit the component of an individual form to ensure that they conform to your companies style guide or branding. • At first we focus on editing individual forms and later we will look at how to edit the default styles that are applied when a new form is created – this is a great way to ensure that all new forms are consistent and align with your corporate branding
  3. 3. Branding • its visual presentation of information • the writing style • the balance between imagery, text, and whitespace • clean and simple functional elements • error-free delivery
  4. 4. Prerequisites • Understanding Form Tools • Installing, Configuring, and Deploying Nintex Forms 2013 • Form Design Basics • Some knowledge on CSS, JavaScript and some JQuery
  5. 5. Some Facts.. • Nintex Forms is a really neat product and a much more user- friendly alternative to Microsoft’s InfoPath for designing SharePoint forms. • Nintex Forms also provides the ability to add optimized layouts for a selection of smartphones and tablets. You can also add your own devices (by user agent string) if Nintex’s default set of device layouts don’t serve all of your needs. • Not every company will want to use Nintex’s logo and the Nintex company colors for their forms.
  6. 6. Cleanup is the Best way start So the first step here is to get rid of all the controls that will not be available on all the designs, leaving only the logo and the bottom border line that will make my forms look purity.
  7. 7. Banner (Company Logo) • The next thing to change is the company logo. You can put that logo anywhere you like. In the SharePoint hive, which is where the Nintex Forms logo lives, or you could put an image file into a document library. /*#region $HabaneroCustomStyles */ img.hcf-logo { height: 25px; margin: 15px 10px; width: 135px; }
  8. 8. Updating the Background Color of Input Controls • We update the specific piece of CSS that is titled nf-form-input. • Here we change the background color to the #DDDDDD that we set for the border color
  9. 9. • There are four major classes to be concerned about in a Nintex Form • nf-form-label • nf-form-input • nf-section • nf-section-bottom
  10. 10. Other CSS Classes
  11. 11. Other CSS Classes…continued
  12. 12. Demo (Organizational News letter subscriptions) • Change the banner and add logo as a separate image • Change background color to #6699FF • Format the button style using CSS • User must agree to proceed with submit
  13. 13. Globalize Form Template • If we have the template we have done so far we can reuse it in other forms you have • Export this form by clicking on the Export button in the ribbon and save it in the local location
  14. 14. • You can make this template available across the farm Central Administration -> Nintex Forms Management -> Manage Device Layouts. Under the devices, there's the template section where you can browse to your *.xml and Upload it
  15. 15. • Summary of steps for globalization • Create your template form and export it (template is basically modules which reuses across all forms • Import it as a template in Central Admin • Create your form with template
  16. 16. References • Setting a Nintex Form Template https://community.nintex.com/docs/DOC-1046 • Nintex forms with JavaScript http://summit7systems.com/enhancing-nintex-forms-with-javascript/ https://tekdoginc.com/javascript-in-nintex-forms/ http://www.slfiene.com/blog/2015/10/20/conditional-defaults-in-nintex-forms https://community.nintex.com/thread/2495 https://community.nintex.com/community/build-your-own/blog/2015/05/29/custom- validation-for-nintex-forms https://community.nintex.com/thread/2994
  17. 17. Thank you!