Orchard Shape Tracing - Orchard1.1

Topics: General
Apr 13, 2011 at 7:16 AM

Hi, I have tried out the shape tracing features under Orchard V1.1. Anyway the feature mostly displaying the information of the widget on the pages. How does the tool can help designer to edit or add some styling css directly onto the widget? Thanks.

Apr 13, 2011 at 7:20 AM

It will help you create shape overrides. For styling, there is good old Firebug.

Apr 13, 2011 at 7:36 AM
Edited Apr 13, 2011 at 7:36 AM

Thanks, buddy. Do you have any plan to enhance the designer tool to be more powerful for designer side?

Apr 13, 2011 at 8:51 AM

It's pretty powerful already. You can click Create and it will generate a specific template override in your theme which is really amazing.

For styling etc. there's no point replicating anything already offered by Firebug or the built-in developer tools in other browsers (which in any case are able to be support specific features of those browsers that would otherwise be impossible)

However... since the code displays are already using CodeMirror 2 for syntax highlighting, it could well be possible to get client-side editing with Intellisense that would persist changes back to the server. Possible but dangerous :)

Apr 13, 2011 at 9:59 PM

OMG, the "Create" button is AMAZING!


Apr 13, 2011 at 10:08 PM

Only started using V1.1 recently but gotta add that shape tracing is the dogs bolloxs and it really helps in gaining an understanding into what is going on underneath.

Apr 14, 2011 at 1:57 AM
Edited Apr 14, 2011 at 4:03 AM

Strange. I still can't see the create button yet. I have already switch the themes to Contoso Themes.

I got this kind of message:

Line: 2
Error: Unable to get value of the property 'alternate': object is null or undefined

Apr 14, 2011 at 9:23 AM
0xB33F wrote:

OMG, the "Create" button is AMAZING!


I was impressed when I saw it :)

vteck328 - if you switch back to TheThemeMachine does it work? Or is there another module or customization you've made that's conflicting somehow?

Apr 15, 2011 at 2:23 AM

Hi randompete,

  I switched back already to ThemeMachine and the situation is still remain same. Still hit the error  --》 Error: Unable to get value of the property 'alternate': object is null or undefined。 thanks.

Still haven't find out which stuff's conflicting it...

Apr 15, 2011 at 8:41 AM

Well, disable any non-core modules until you find out.

Have you made any changes to anything in Orchard itself?

Apr 18, 2011 at 3:12 AM

I just copied from orchardv1.1  codeplex.com. Then i start it up and install designer tool directly. After that, i tried to click and coming out the same error. Thanks.

Apr 18, 2011 at 3:53 AM

Ok; so where is the error displaying? Is there any more detail than "line 2" - i.e. which file is the error happening in?

Apr 18, 2011 at 4:32 AM

i click every widget on the home page of themeMachine. Click Shape and prompt 

Line: 2
Error: Unable to get value of the property 'alternate': object is null or undefined



Apr 18, 2011 at 4:50 AM

Is an error log file generated?

Apr 18, 2011 at 4:56 AM

it's generate the error log file: orchard-error-2011.04.18-12_54_09.952. Anyway i opened it and it's empty in the content. Nothing.

Apr 18, 2011 at 6:38 PM

Could you provide a copy of the HTML source provided to the client ? It seems to be a Javascript issue.


Apr 19, 2011 at 2:23 AM

Hi Sebastien,

  Found that it's working in Firefox browser, but Internet Explorer 9 cannot work and prompt error as mentioned before. Finding that IE Browser is not compatible.


SCRIPT5007: Unable to get value of the property 'alternate': object is null or undefined

anonymous code (1), line 2 character 2511


The error stop this statement: );if(typeof($value.alternate)!=='undefined' && ($value.alternate)!=null){__.push($.encode((typeof($value.alternate)==='function'?($value.alternate).call($item):.........



anonymous(jQuery, $item) {


$=jQuery,call,__=[],$data=$item.data;with($data){__.push('<div class="shape grid-display"> <ul class="properties"> <li class="sgd-s"><div class="name">Shape</div><div class="value">');if(typeof(shape.type)!=='undefined' && (shape.type)!=null){__.push($.encode((typeof(shape.type)==='function'?(shape.type).call($item):(shape.type))));}__.push('</div></li> <li class="sgd-t"><div class="name">Active Template</div><div class="value"><a id="activeTemplate" href="#">');if(typeof(shape.template)!=='undefined' && (shape.template)!=null){__.push($.encode((typeof(shape.template)==='function'?(shape.template).call($item):(shape.template))));}__.push('</a></div></li> ');if((typeof(shape.template != shape.originalTemplate)!=='undefined' && (shape.template != shape.originalTemplate)!=null) && (typeof(shape.template != shape.originalTemplate)==='function'?(shape.template != shape.originalTemplate).call($item):(shape.template != shape.originalTemplate))){__.push(' <li class="sgd-ot"><div class="name">Original Template Template</div><div class="value">');if(typeof(shape.originalTemplate)!=='undefined' && (shape.originalTemplate)!=null){__.push($.encode((typeof(shape.originalTemplate)==='function'?(shape.originalTemplate).call($item):(shape.originalTemplate))));}__.push('</div></li> ');}__.push(' <li class="sgd-d"><div class="name">Display Type</div><div class="value">');if(typeof(shape.displayType)!=='undefined' && (shape.displayType)!=null){__.push($.encode((typeof(shape.displayType)==='function'?(shape.displayType).call($item):(shape.displayType))));}__.push('</div></li> <li class="sgd-a"><div class="name">Alternate (');if(typeof(shape.alternates.length)!=='undefined' && (shape.alternates.length)!=null){__.push($.encode((typeof(shape.alternates.length)==='function'?(shape.alternates.length).call($item):(shape.alternates.length))));}__.push(')</div> <div class="value">&nbsp;</div> <ul> ');if(typeof(shape.alternates)!=='undefined' && (shape.alternates)!=null){$.each((typeof(shape.alternates)==='function'?(shape.alternates).call($item):(shape.alternates)),function($index, $value){with(this){__.push(' <li> <div class="name"> <form action="/OrchardLocal/Orchard.DesignerTools/Alternate/Create" class="inline link" method="post"><input id="Alternate" name="Alternate" type="hidden" value="');if(typeof($value.alternate)!=='undefined' && ($value.alternate)!=null){__.push($.encode((typeof($value.alternate)==='function'?($value.alternate).call($item):($value.alternate))));}__.push('" /><input id="Template" name="Template" type="hidden" value="');if(typeof($value.template)!=='undefined' && ($value.template)!=null){__.push($.encode((typeof($value.template)==='function'?($value.template).call($item):($value.template))));}__.push('" /><input id="ReturnUrl" name="ReturnUrl" type="hidden" value="');if(typeof($value.returnUrl)!=='undefined' && ($value.returnUrl)!=null){__.push($.encode((typeof($value.returnUrl)==='function'?($value.returnUrl).call($item):($value.returnUrl))));}__.push('" /> <button type="submit" class="create-template">Create</button> <input name="__RequestVerificationToken" type="hidden" value="4d72rdQmQXETc7KSyDhPLuIZsfBqEOtO3H5kqQhrGTA0QKJEs6bCdfm1eJJl+XPaH8v9i8y5+M/jLPzd8m0AgkXE+0OOJciKV9XehgHv15eBOnrDfyya6BUz0BsbdTwg6lMUhBunTd4JpN/gAJ+zU6NDXmGI/++Xv5iGU6MWmxF+CKhgsbo1RcZXW5GipcdP9a2Eejrrqatfo4GRcEs3WSzt3pXGfDZctWIQ5oTgbWg=" /></form> </div> <div class="value">');if(typeof($value.filename)!=='undefined' && ($value.filename)!=null){__.push($.encode((typeof($value.filename)==='function'?($value.filename).call($item):($value.filename))));}__.push('</div> </li> ');}});}__.push(' </ul> </li> <li class="sgd-w"><div class="name">Wrappers (');if(typeof(shape.wrappers.length)!=='undefined' && (shape.wrappers.length)!=null){__.push($.encode((typeof(shape.wrappers.length)==='function'?(shape.wrappers.length).call($item):(shape.wrappers.length))));}__.push(')</div> <div class="value">&nbsp;</div> <ul> ');if(typeof(shape.wrappers)!=='undefined' && (shape.wrappers)!=null){$.each((typeof(shape.wrappers)==='function'?(shape.wrappers).call($item):(shape.wrappers)),function($index, $value){with(this){__.push(' <li><div class="name">&nbsp;</div><div class="value">');if(typeof($value.filename)!=='undefined' && ($value.filename)!=null){__.push($.encode((typeof($value.filename)==='function'?($value.filename).call($item):($value.filename))));}__.push('</div></li> ');}});}__.push(' </ul> </li> </ul> </div>');}return __;