@Office365 All day workshop session form – #WSPDC #FEDSPUG

Please fill out the form with information regarding your September 15th session.

Here’s the link to the form “Office 365/ WSPDC-FEDSPUG Workshop”:
https://forms.office.com/Pages/ResponsePage.aspx?id=s-9nLu0cLUWaTCcBE_yjdVAWhSsb_V5AmaMkdX07jB5UNlNIR1E1SUVMTE5aV0REVTRESjhNU0k0VS4u

Thanks a tonne for your participation and contribution.

Submit a new idea! Ideas for #Office365 #SharePoint custom feedback using lists,CSS & scripts

Its a beautiful day outside. Drizzles with a sweet sweet rainbow. Looking out longingly I got an idea,

How about we work on a fun form exercise?! It’ll be pretty, it’ll be functional and it’ll be in #Office365 with simple controls and script. Sounds fun no?

I thought it was. I was also inspired by Netflix, Starbucks and all things good and great in this world including but not limited to W3CSS, Bootstrap, JS and oh wait! SHAREPOINT and FORMS!!!

Since the code part is pretty self explanatory, am not gonna delve(see what I did there wink wink) deep in it. Still, to recreate this pretty form, you need to
  •  Create a list (SubmitYourIdea in this sample and yep am pretty creative)
    • Structure of the list is pretty straightforward, a few custom columns depending on what you want to gather from contributors:
      liststruct.png

       

  • Create a script file in your Site Assets (or anywhere else you please) call it PutYourThoughts.js (cause… why not?) You are welcome to copy the script and edit to suite your taste. I just chose something fun to do as a proof of concept and share it with my interweb peeps.
  • Create a site page and include the script file reference in a Content Editor Web Part/Script Editor web part. Save and page and here you go, a  completely responsive form for your folks to submit ideas on new projects/categories/just badmouth how awful the current project sucks. Freedom of speech rules!ideaform.png

Where is the Netflix and Starbucks connection you ask? Well, the form theme is inspired from them. So thanks folks!

What are the other uses/ possible derivatives using this idea?

  1. You can collect feedbacks(on your sites, projects, etc.,)
  2. Use this as a way to gather ideas from your team/staff
  3. Connect this with a #flow and extend its usage more! 🙂

Enjoy your new incoming ideas! Keep learning and sharing. Almost forgot, here is the solution in action with a not so subtle hint of enhancement to the code.

 

No script editor installed? Want to style your page? No Problem!

As the old adage goes “Where there is will there is way!”, “Necessity is the mother of invention.”, or as the Tamil saying goes, வல்லவனுக்கு புல்லும் ஆயுதம். “If you have the ability and talent, you can achieve success with whatever (minimal) resources available at your disposal.” (for more on this check here)

As long as I have a notepad, I can create scripts, HTMLs, jQueries and magical flip/ bling CSS effects on any page. Mostly on Office 365 SharePoint Online pages hehe! But, this is not about the wonders of all that you can do with Notepad.

This is about what other options you have at your disposal, that would allow you to build stunning appealing Site Pages in a matter of hours with a list of useful online resources that I use and like. So, here goes:

Number 1:

LayoutIt.png

Top of the list is LayoutIT: http://www.layoutit.com/ this is a bootstrap front end code builder. You can spin up a responsive grid system page with rows and columns effortlessly. All you have to do is drag and drop your number of containers/rows and how many columns you want in it? 6/6 or 4/4/4 or one row? Its all visual and it can’t get any easier than that.

Once you are satisfied with your mockup skeletal design, you can download the code and customize it to your sites/client requirements.

Example: http://www.layoutit.com/build

Here you can see nested Containers and Rows with Column and Navigation elements. You can remove and add additional divs, CSS and Scripts as well and download the file. (You can sign up, but you can get the code forgoing the option as well..pretty cool in my opinion)

Note: Make sure to include your cdn in the file you downloaded (duh!) Even better, get the latest minified(or not) bootstrap libraries into your Site Assets/ Scripts reference them instead.

Number 2:

http://dabblet.com/ This site is super cool as I like how it has multiple visualization options for your scripts and custom classes. Ya don’t have to wait at all! I’m an impatient person and I was to see the result right away and it works great for me 😉

What you see below is the “Result” of the rendered bootstrap script I quickly drafted from LayoutIT above. So far so good and pretty cool eh?

dabbletResultRender.png

Number 3:

http://plnkr.co/

You want to learn angular/ bootstrap/ jQuery. Want to curiously browse other folks attempts at learning the same and get inspired by their solutions? Want to share your solutions with the community?

Want to style your code? Want to check the syntax? Get the references to latest CDNs and include them automagically? You get the idea…. get to Plnkr!

If you have a GitHub account, you can use it to join login with the same on Plnkr as well. Its all awesome. Save your plunks and show off your work!

Plnkr.png

Ofcourse there is also W3schools editors you can try

https://www.w3schools.com/html/default.asp

With these tools under your belt, you can tackle some of the day to day design challenges if your environment doesn’t have development tools yet and you still wish to be productive and contribute to the team, progressing towards your assigned task completion – these can come in very handy.

These are a few of my go-to tools and I wanted to share them with ya! Now, after all that mentions, if I don’t show something colorful, I’ll feel I didn’t give you any take-aways for the time you spent reading this. 🙂

So here ya go: My last post talked about getting SharePoint Site Usage reports in Office 365 SharePoint Online page and how you can get a cool looking dashboard with Excel Web Access web part.

If you would like to include Document Library analytics into the page as well with some prettied up links to Most viewed/popular documeents in the site’s libraries then

  • Try using LayoutIt for getting your desired bootstrap grid that appeals you
  • Take it to dabblet/plnkr and include the cdns for bootstrap for responsiveness and styles
  • Get the URLs for links you wish to display in your SharePoint Online site page., it could be your Most Popular Library items from the library ribbon icon, your top documents/ contributors. Your web site/blog address etc., and then include that in your script’s anchor tag with button style.
  • I used a library called font-awesome to derive icons from there for using in my images. They have a wide collection of icons CSS styles to choose from and I like to use them in all my projects.
  • So here goes: http://dabblet.com/user/SwethaSan 
    Below is the script with all external reference links to fontawesome as well as bootstrap cdns for responsiveness.

    <!DOCTYPE html>
    <html>
    <head>  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">  
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script></head>
    
    <body>  
    <h1>Namaskar, Vanakkam, Welcommen, Bonjour, Hola!!!!!</h1>  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">  
    <style type="text/css">    
    i {      color: white;    }        
    #t1 {      border: none;      border-spacing: 10px!important;    }       
    #t1 td,#t1 th {      padding-top: 25px;      padding-right: 70px;      padding-bottom: 25px;      padding-left: 70px;      
    border-radius: 7px;      border-collapse: separate;      background-color: white;    }        
    td:hover {      opacity: 1;      outline: none;      border-color: #9ecaed;      box-shadow: 0 0 10px #616466;    }        
    #content {      height: auto;      float: left;    }      
    </style>  
    <div id="container">    
    <div id="content">      
    <table id="t1">        
    <tbody>          
    <tr>            
    <td style="background-color:#ff7b5d"><a href="https://www.google.com" style="text-decoration:none;color:white;"><i class="fa fa-group fa-3x "></i><br/><br/>Google</a></td>            
    <td style="background-color:#c6acff"><a href="https://www.swethasankaran.com" style="text-decoration:none;color:white;"><i class="fa fa-check-square-o fa-3x"></i><p>Swetha Sankaran</p></a></td>            
    <td style="background-color:#72b1ff"><a href="https://www.microsoft.com" style="text-decoration:none;color:white;"><i class="fa fa-area-chart fa-3x"></i><p>Microsoft</p></a></td>          
    </tr>          
    <tr>            
    <td style="background-color:#9b2e73"><a href="https://www.youtube.com" style="text-decoration:none;color:white;"><i class="fa fa-adjust fa-3x "></i><p>YouTube</p></a></td>            
    <td style="background-color:#5bad4e"><a href="https://www.meetup.com/fedspug-wspdc" style="text-decoration:none;color:white;"><i class="fa fa-pie-chart fa-3x"></i><p>Women In SharePoint DC, FEDSPUG</p></a></td>            
    <td style="background-color:#e23155"><a href="https://www.linkedin.com/in/link2swe" style="text-decoration:none;color:white;"><i class="fa fa-newspaper-o fa-3x"></i><p>Link2Swe</p></a></td>          
    </tr>          
    <tbody>      
    </table>    
    </div>  
    </div> 
     <!-- content to be placed inside <body>…</body> --></body></html><!-- content to be placed inside <body>…</body> -->

Here is the video/script on display at dabblet in its full swing!

This is just a kick starter for all the possible things you can do with designing and making your Office 365 site functional until you get your tools deployed and available to use.

These are some of my go to options. Please feel free to comment/share other tools you use that makes your lives easier to provide efficient solutions that meets clients needs and satifies their requirements and we can learn together.

Sharing is most definitely caring and the more we share we grow stronger together! 🙂

With that wise thought of the day, signing off from www, is Swetha! Have a beautiful Thursday folks, may it bring you all sorts of happiness and productive solutions your way.

Peace.

WYSIWYG Business Cards App in SharePoint Online using @Nintex Forms and Workflow for @Office365 apps

Title: WYSIWYG Business Cards App in SharePoint Online using Nintex Forms and Workflow for Office 365 apps

Details:

A solution showcase session. ‘What you see is what you get’ in this business cards app for Office 365 SharePoint Online using Nintex forms and workflow apps for Office 365.

Business Case: 

Your customer has a business need where they want to preview their cards order as it would appear in print before they submit their request.

They want to preload user information when they log in to the system. When they submit their request, the manager who handles the processing should get ALL details of user submitting request with a means to view the requests in site.Anyone in the organization can submit request for cards and the manager should have access to everything in the system.

Learning Objectives:
In this session, attendees will learn how to create apps in Office 365 SharePoint online with preview panel of their data containing logged in user profile information as well as customize/ brand their forms.

Focus Areas:
#SharePoint, #Office365 and the Cloud and #Nintex apps for Office 365

Skill Level:
Introductory / Intermediate

Speaker Bio:

 

Swetha Sankaran is an Office 365 SharePoint online expert working with SharePoint and Microsoft BI stack since 2008. Currently focusing on Office 365 user adoption, apps, forms and workflows processes to automate several business processes from manual/ paper based forms.

She is a Microsoft Certified Specialist(SharePoint and Business Intelligence), Nintex Certified Forms and Workflow Professional, Computer Engineer, President – Women in SharePoint DC,ProductivityEDU and Co-Chair #FEDSPUG

Twitter: @SwethaSan
LinkedIn: Link2Swe
Blog: www.swethasankaran.com

Click here to RSVP

Loudoun SPUG

Include image in signature of your #Nintex workflow action email

It is really nice to include signature in your email messages. You can write about yourself(I know someone never gets tired of it), make it cursive, color it magenta, call it pet names and then live happily ever after….oh…that’s not what this post is about….ummm…

So, you can include cool creative signatures and it kinda gives a nice finish to the email.

Signature1

Better still, you can include your team/dept logo in the signature to give it a really neat touch.

To add logo to your signature

Send an Email(Or Task Assignment ‘Initial email options’) section > Select Image > Give web address of your logo and alternate text > Insert.

Signature2

This includes the logo in the signature section of your email body as seen in the email below.

Signature3

Pretty cool eh!