Monday, March 5, 2012

Part 1: Attach file to Web Part using module feature

Step 1: Open visual studio 2010 | New | Project | Empty Sharepoint Project , project name is: ApplyCssUseModuleFeartureSanbox
Step 2: Choose deploy sanbox solution
Step 3: Add new Item
Step 4: Choose Module, name is CallFileCssOrScript
Step 5: View UI below
Step 6: Rename Sample.txt file to Sample.css
Step 7: Copy  code  Url="_catalogs/masterpage" RootWebOnly="TRUE" List="116" and paste to here
Step 8: Delete Url  CallFileCssOrScript\ 
Step 9: Copy  Type="GhostableInLibrary" IgnoreIfAlreadyExists="TRUE" and paste to here
Step 10: Open file Sample.css and delete content
Step 11: Paste code below to content of file Sample.css
Step 12: Add new Item | Web Part | name is ApplyCssUseModuleFeartureSanbox
Step 13: Write code  CreateChildControls
using System;
using System.ComponentModel;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using Microsoft.SharePoint;
using Microsoft.SharePoint.WebControls;

namespace ApplyCssUseModuleFeartureSanbox.ApplyCssUseModuleFeartureSanbox
    public class ApplyCssUseModuleFeartureSanbox : WebPart
        protected override void CreateChildControls()
            //Create new table object
            Table table = new Table();
            table.GridLines = GridLines.Both;
            //The first row
            TableRow tableRow = new TableRow();
            tableRow.CssClass = "tableRow";//Call css from module
            TableCell tableCell = new TableCell();
            tableCell.Text = "Your name";
            tableCell = new TableCell();
            tableCell.Text = "Email";
            tableCell = new TableCell();
            tableCell.Text = "Phone number";
            //The second row
            tableRow = new TableRow();
            tableCell = new TableCell();
            tableCell.Text = "Do Quoc Hung";
            tableCell = new TableCell();
            tableCell.Text = "";
            tableCell = new TableCell();
            tableCell.Text = "0909263861";
Step 14: before build, you test file: don’t appear file in Folder Debug ?
Step 15: Build Project
Step 16: After Build, you see appear 2 file below
Step 17: Then Package Project
Step 18: Appear Error because path with length more 248 character (if error)
Step 19: Right click project | Properties | Edit Assembly name and Default namespace
Step 20: Edit to ApplyCss for Assembly name and Default namespace
Step 21: Rebuild project
Step 22: Delete two old file below (if true)
Step 23: Package project
Step 24: Result, file .wsp created
Step 25: Open Site | Site Action | Site Setting 
Step 26: Click Solution link
Step 27: Click Icon Upload Solution
Step 28: Choose file .wsp in your  folder bin\debug
Step 29: Click Ok | click Icon Active
Step 30: Add Web Part – Click Site Action | Edit Page
Step 31: Click Tab Insert | choose Web Part
Step 32: in Categories Web Part | Choose Category  Custom | Choose your file .WSP and click Add
Step 33: Click tab Page | Click Icon Stop Editing
Step 34: Result below but css don’t Apply

Step 35: you can test file Sample.css when you register in Element.xml of Module below and result you see file is exist
Step 36: Reason css don’t apply because css do not register, you paste code below to your Web Part
      //Register to file css
      Literal literalCss = new Literal();
      literalCss.Text = "<link rel='stylesheet' type='text/css' href='/_catalogs/masterpage/Sample.css'/>";
Step 37: Rebuild project and build project and package project again, then Deactive WSP | choose you .wsp file and click icon Deactive
Step 38: Poupup appear, you click Deactive Icon
Step 39: Result below, Css is apply to table…


Post a Comment