Editable link (examples) Scaffold

Added by Guy Fraser, last edited by David Peterson on Apr 28, 2008  (view change) show comment

This example scaffold shows some tricks and problems with making editable hyperlinks...

Scaffolding Solo

||My Link|[{text-data:WikiLink|width=300px}]|
||My URL|[http://{text-data:URL|width=300px}]|
||My Email|[mailto:{text-data:EmailAddr|width=300px}]|
  • "My Link", allows you to insert any page title, etc.
    If you click on the text box, it will unfortunately create a new page right there and then so you'll have to use the Tab key to focus the text box.
  • "My URL", automatically prefixes the website address with "http://".
    This works perfectly!
  • "My Email", allows simple entry of an email address without needing the "mailto:" part at the start (easier for new users).
    If you click on the text box, it will unfortunately create a new email with an ugly subject line so you'll have to use the Tab key to focus the text box.

Unfortunately, you cannot include custom on-screen text or tooltips - try the example below to see what happens:

|[My Link|{text-data:WikiLink|width=300px}|New Text]|
|[My URL|http://{text-data:URL|width=300px}|This is a URL link]|
|[My Email|mailto:{text-data:EmailAddr|width=300px}|This is an email link]|

Scaffolding + Reporting

You can combine Scaffolding with Reporting to give more flexibility, however the basic markup is more complex.

||My Link||{hidden-data}{text-data:WikiLink|width=300px}{hidden-data}{report-on:injected=true}[%data:WikiLink%]{report-on}|
||My URL|{hidden-data}{text-data:URL|width=300px}{hidden-data}{report-on:injected=true}[http://%data:URL%]{report-on}|

This method will let you mix in extra options for your link also, such as tooltips, etc. In fact, you can even provide Scaffold inputs for them if you wish. Eg:

{hidden-data}_Label:_ {text-data:Label} _Link:_ {text-data:Link} _Tip:_ {text-data:Tip}{hidden-data}{report-on:injected=true}[%data:Label%|%data:Link%|%data:Tip%]{report-on}

This will only display the text boxes when editing, and will update the link when saving.

Scaffolding + Reporting + Visibility = User Macro

If you will be using this frequently, turning it into a user macro is probably a good idea. We add the Visibility Plugin in for finer control.

Create a new user macro with the following settings:

Macro name: custom-link-data
Macro has a body: Yes, Convert macro body wiki markup to HTML
Output: Macro generates wiki markup
Template: 
{hide-if:action=view}{text-data:$param0|width=100px}{hide-if}{show-if:action=view}{report-on:injected=true}[#if($body)$body|#end%data:$param0% ]{report-on}{show-if}

You can then use this like so:

{custom-link-data:My Link}

Which will output a text box when editing, or a link when viewing. Or, if you want to specify the link text, do this:

{custom-link-data:My Link}Click me{custom-link-data}

Which will out put 'Click me' as the link text.

Labels

scaffold scaffold Delete
template template Delete
example example Delete
Enter labels to add to this page:
Please wait 
Looking for a label? Just start typing.

Comments (1)

 

  1. May 28

    MartinMitry says:

    couldnt get it working user macro: macro has a body convert macro body wiki ...

    couldnt get it working

    • user macro:
      • macro has a body
      • convert macro body wiki markup to HTML
      • Macro generates wiki markup 
        {hide-if:action=view}{text-data:$param0|width=100px}{hide-if}{show-if:action=view}{report-on:injected=true}[#if($body)$body|#end%data:$param0% ]{report-on}{show-if}
    • page content 
      {scaffold:linkliste}
{custom-link-data:My Link}Click me{custom-link-data}
{scaffold}
    • result in view mode 
      <span class="error">[Click me]</span>
    • result in edit mode 
      <input type="text" name="scaffold.linkliste.My Link" value="" tabindex="5" style='width: 100px;'/>

    using conf 2.5.8

    THANK YOU and Regards
    Martin