November 2006 - Posts

WSS 3.0: What prevents visitor from accessing your site?
23 November 06 10:11 AM | cakriwut | 1 comment(s)

English

If you have worked with Sharepoint 2003 development, you probably already familiar with this problem. The site is accessible only by the Administrator - but not ordinary users (visitors). If ordinary users try to access, then he redrected to Access Denied page.

rwt prevent

In all version, this can be caused by improper access exception handling in one of installed web part in web page. For example, web part that access special property for previledge users (say, Groups property in SPUsers, etc). In WSS 3.0 / MOSS 2007, I have found at least two more reason that prevents visitor from accessing the site.

  1. Un-published / un-approved web page component
    WSS 3.0 is using master page, page layout and content page to define the whole page outlook. So, a web part page is actually composed by those three components.
    WSS 3.0 also combine the concept of simple web publishing, where any changes to the page component must follow check-in/out, approval and publishing process. So, changing web page (add or remove web part, content etc) won't be reflected - unless you publish it.
    Since a web part page composed by three components, then web publishing procedure also applicable to the other page component. Thus for instance, if you forget to publish a master page then all web part page which use that master page will become inaccessible - except for current editor. In this condition, even the site owner won't be able to access it.
  2. Improper sub folder permissions
    WSS 3.0 has redefined how the factory handle web request. Its now implemented as HTTP Module - so no more "Managed" - "Unmanaged" path anymore.
    This in fact bring greater flexibility for the developer to put their own supporting files - such as custom style; controls; script folder. However, inappropriate NTFS security for those folder could also prevent users from accessing web part pages.
    Usually, you must allow read NTFS permission to everyone - before the web part page become accessible again.
Share this post: | | | |
WSS 3.0 : New Extensions for Visual Studio 2005
13 November 06 04:14 PM | cakriwut | with no comments

English (versi Indonesia)

New WSS 3.0 extensions for Visual Studio 2005, wow its great. It includes project templates for,

  • Web Part
  • Team Site Definition
  • Blank Site Definition
  • List Definition

What the best part is Sharepoint Solution Generator - this is must try tool kit.

Download at http://www.microsoft.com/downloads/details.aspx?familyid=19f21e5e-b715-4f0c-b959-8c6dcbdc1057&displaylang=en

--o0o--

Indonesia (English version)

Hari ini secara tidak sengaja, waktu WSS 3.0 di Microsoft, saya menemukan ekstension Visual Studio 2005 untuk WSS 3.0. Didalamnya ada beberapa template proyek, al.

  • Web Part
  • Team Site Definition
  • Blank Site Definition
  • List Definition

Satu lagi yang patut dicoba dari tools ini adalah Sharepoint Solution Generator - hmm... makhluk apa ini ya?

Download filenya di http://www.microsoft.com/downloads/details.aspx?familyid=19f21e5e-b715-4f0c-b959-8c6dcbdc1057&displaylang=en

Share this post: | | | |
Sharepoint 2003: Developing Information Kiosk in 5 hours
12 November 06 01:13 AM | cakriwut | with no comments

English

One of common question from client when we offer Sharepoint's is "Can you make nice impression on the design?". We can use Macaw Sharepoint skinner to customize the design. Macaw uses HttpModule and sets of regex match and replace technique. However, I still found it difficult to produce liquid design using that tool.
Let's assume the client want to have information kiosk to be delivered in very short time. If we wanna use Macaw then we must create skinning template that is not very intuitive to do - at least for me. So, what is the alternative?
Here I'll show a difference approach, thus we can deliver the solution quicker - using out-of-the-box capabilities in Sharepoint and less coding (only javascript and some css).

Ok, let's start with the design from Graphic Designer - below

rwt 5hours 01

Assignment:

  1. The above image shows main theme of the kiosk
  2. Information kiosk will display list of company and detail information for each company - using consistence design with the main page
  3. All pages will be shown in 800x600 screen in a kiosk.
  4. The administrative area will use standard Sharepoint's UI.
  5. Estimated Time for full Appearance (ETA) is 5.00 hours

Planning (est. 1.00 hours, ETA 5.00 hours)

  1. We will use graphic designer tools (Macromedia, Photoshop etc) to help us with the layout.
  2. Sharepoint Designer / Frontpage 2003 will be use to apply new layout to the default.aspx.
  3. We also create two or more new pages template for list and detail page.
  4. We will create custom list for the company list.
  5. Javascript , CSS and xslt queries to help us more on some functions - such as full text search.

Slicing and Applying Design Template (est. 1.30 hours, ETA 4.00 hours)

Since we have only very limited time, then help from graphic designer tools is very importance. Open the design in Macromedia / Photoshop, and make slices to the design. There are two part that we need to slice,

  1. Image that involved in transition, such as button / image button which change on mouse over action
  2. Image that represents web part place holder

After all slices are in place then we are ready to export it to HTML layouts - along with required images. Export it and open the new html page in Sharepoint Designer / Frontpage 2003. Start applying the layouts by opening default.aspx in Frontpage 2003.

  • Removes existing web part from the page
  • Moves form tag to after end of main table
  • Copy the new layouts table inside the form, and don't forget to import all required images too
  • Hide main table by adding style="display:none" as css attribute to the table

rwt 5hours 04

And using similar scenario, you can continue to apply the layouts design for the other page too - in this case (detail information and list).

Full Text Search and List (est 1.00 hours , ETA 2.30 hours)

Searching can be seen as ,

  • using search "engine" in WSS / Sharepoint, but with a little drawback. All results will be displayed in standard Sharepoint's UI or we must develop custom page so we can render it according to the desired layout.
  • filtering list column using search criteria. This is our preferred approach, since the result can be data view which can be customized using xslt for desired appearance

Following the last reason, we need to create custom list for company information - name it "Information" list. The "Information" list will store any information about the company - including the description; each in separate field. Remember, that we will use filtering as our full text search, so we also need description row in the list!

rwt 5hours 05

In the templated list page (created in Slicing & Applying Design Template) , put two web parts,

  • Content Editor Web Part, to hold the script for searching
  • List view web part, to show "Information" list

Open the page in Frontpage 2003 and convert List view web part to XSLT dataview (** due to known bugs in Sharepoint Designer, please don't convert to XSLT using it, at least beta 2 will mess up the dataview **)

rwt 5hours 06

Edit the new XSLT dataview so we can use URL paramater to filter the view. In this sample, I'll use "Search" as URL paramater name for the searching function.

rwt 5hours 08

Then modify the filtering rules so it works just like full text search.

rwt 5hours 07

The last modification in this page is to edit item link, so it open Detail information page instead of edit page. In this case I add new xsl variable "detailUrl" and modify default link tag for item. $detailUrl contains page location for Detail information page.

rwt 5hours 09

In the content editor web part create drop-down list, text box and submit button. Also make a javascript to construct URL parameter to filter the list.

rwt 5hours 10

Detail Information Page (est 1.00 hours , ETA 1.30 hours)

Using prepared templated detail information page, we'll put List view web part for "Information" list. Only single item description will be shown at a time - and we use XSLT to format the view. Compose the fields from "Information" list in a table or choose whatever you need to present in the detail page.
URL parameter filtering technique also applied here, in order to select item detail based on its ID.

rwt 5hours 11

 

Review and Package (est 0.30 hours, ETA 0.30 hours)

At last you can review the new kiosk and package it into fwp file - ready to deliver to the client. Don't forget to give some instructional direction to update the data in the list. Ups, its about the time 5.00 hours, developing information kiosk using Sharepoint out of the box functionalities, plus javascript, xsl and CSS.

This only to open our mind about one of Sharepoint's concept - "laveraging web application for business users".

 

Riwut Libinuko
-http://www.plasmedia.com-

Share this post: | | | |
MOSS 2007: Rounded Web Part , a Nifty Corners Cube hacks
02 November 06 06:14 PM | cakriwut | 2 comment(s)

English (versi Indonesia)

You might already know Nifty Corners Cube project, its a solution based on CSS and Javascript to get rounded corners without images. It's very handy because we can targets to the elements in web page using javascript and voila its rounded. All you have to do is to call

Nifty([CSS selector], [Options]);

CSS selector is the elements while options are rounded option for that element. Unfortunately, the nifty requires to attach function (NiftyLoad) to windows.onload, the function will search and add some css to make it rounded.

Sharepoint web part is one of best target for this component. Why? Because we can make more liquid page - by just using a simple javascript call.

However, if you look at default.master page of Sharepoint, there is a defined body.onload event

"BLOCKED SCRIPTif (typeof(_spBodyOnLoadWrapper) != 'undefined') _spBodyOnLoadWrapper();"

which will collide NiftyLoad() so the rounded web part can not be happened.

So, can we fix it?

Actually, Nifty already implements some fix to avoid such collision with existing windows.onload. However if we want to use it in Sharepoint - we must create some hacks to avoid collision with body.onload. Its a small javascript,

var bodyonload;
if(typeof(myNifty) != 'function') myNifty = function (){};
if(typeof(document.body.onload)=='undefined')
{
NiftyLoad = myNifty;
} else {
bodyonload = document.body.onload;
if(typeof(bodyonload) == 'function')
{
document.body.onload = function () {
bodyonload();
AddCss();
myNifty();
}
} else {
document.body.onload = function () {;
AddCss();
myNifty();
}
}
}

myNifty is our function to replace NiftyLoad. myNifty scripts actually call Nifty,

var myNifty = function () {
Nifty([CSS selector], [Options]);
}


Implementation
Master Page

  1. Add default niftyCorners.css and niftyCube.js to the end of of HEAD section in default.master page.

    Nifty1
  2. Add the above scripts hack to after end of BODY section in default.master page.


    Nifty2

Page Content (target page)

  1. Add content editor web part to insert any custom style and myNifty function.


    Nifty3
  2. Add myNifty function to the web part by clicking "Source Editor"

    Nifty4

  3. Clicking OK will automatically change the target web part rounded as you wish. In this case, I want my Pooling Web Part becomes rounded.

    Nifty5

  4. At last, don't forget to hide the content editor web part by defining hidden layouts.

And now we can have very liquid Sharepoint page just like this

Nifty6

-Riwut Libinuko-
Plasmedia

--o0o--


Indonesia (English version)

Anda mungkin sudah pernah tau tentang project Nifty Corners Cube. Nifty adalah solusi untuk membuat pinggir elemen web membulat dengan menggunakan CSS dan Javascript serta tanpa memerlukan gambar. Nifty sangat membantu karena kita dapat dengan mudah membuat pingir elemen di dalam web menjadi bulat dengan hanya memanggil javascript. Sintaks yang dibutuhkan cukup mudah yaitu

Nifty([CSS selector], [Options]);

[CSS selector] adalah elemen yang akan dibuat bulat ujungnya, sedangkan [Options] adalah opsi lengkungan yang dikehendaki. Akan tetapi, function javascript nifty (NiftyLoad) harus dijalankan pada saat windows.onload, function tersebut akan mencari dan menambah css agar elemen yang dikendaki ujungnya menjadi bulat.

Web part di Sharepoint adalah salah satu target yang paling cocok untuk solusi ini. Kenapa? Karena kita dapat membuat halaman sharepoint menjadi lebih menarik - dengan menggunakan javascript. Terlebih lagi, kita bisa tetap memanfaatkan seluruh web part sharepoint dan menampilkannya dalam bentuk yang lebih luwes.

Akan tetapi, jika kita teliti melihat ke halaman default.master dari Sharepoint, disana sudah terdefinisi satu fungsi di body.onload event

"BLOCKED SCRIPTif (typeof(_spBodyOnLoadWrapper) != 'undefined') _spBodyOnLoadWrapper();"

Fungsi tersebut akan mengganggu kerja NiftyLoad() sehingga web part dengan pinggir yang bulat tidak bisa dibuat.

Bisakah kita mengatasinya?

Sebenarnya, Nifty sudah mengimplentasikan beberapa fix untuk menghindari bentrokan fungsi semacam itu, namun masih terbatas untuk fungsi-fungsi yang ditempelkan di windows.onload. Jika kita ingin menggunakannya di Sharepoint - atau dihalaman lain yang mirip dengan Sharepoint, maka kita harus mengatasinya dengan cara kita sendiri. Tekniknya cukup sederhana, dengan menggunakan javascript sebagai berikut,

var bodyonload;
if(typeof(myNifty) != 'function') myNifty = function (){};
if(typeof(document.body.onload)=='undefined')
{
NiftyLoad = myNifty;
} else {
bodyonload = document.body.onload;
if(typeof(bodyonload) == 'function')
{
document.body.onload = function () {
bodyonload();
AddCss();
myNifty();
}
} else {
document.body.onload = function () {;
AddCss();
myNifty();
}
}
}

myNifty adalah fungsi baru yang dibuat untuk menggantikan NiftyLoad. myNifty pada dasarnya akan memanggil Nifty - sama seperty NiftyLoad,

var myNifty = function () {
Nifty([CSS selector], [Options]);
}


Implementasi
Master Page

  1. Tambahkan link ke niftyCorners.css dan niftyCube.js ke bagian akhir dari HEAD di halaman default.master.

    Nifty1
  2. Tambahkan script hack diatas di akhir dari bagian BODY di halaman default.master.


    Nifty2

Page Content (target page)

  1. Tambahkan content editor web part sebagai wadah untuk style kustom dan pendefinisian fungsi myNifty.


    Nifty3
  2. Definisikan fungsi myNifty kedalam webpat dengan meng-klik "Source Editor"

    Nifty4

  3. Dengan meng-klik OK , maka halaman akan disimpan dan pada saat refresh kita dapat langsung melihat hasilnya. Dalam contoh ini saya membuat Pooling Web Part ujungnya menjadi bulat.

    Nifty5

  4. Akhirnya, content editor webpart harus dibuat tersembunyi agar tidak menggangu layout.

Jadi mulai saat ini kita dapat membuat halaman Sharepoint tampil lebih cantik dengan memanfaatkan CSS dan Javascript.

Nifty6

-Riwut Libinuko-
Plasmedia

Share this post: | | | |