Using computed value from datasource value in design definition

Question

I have a custom control with a computed title in Design Definition:

text="<%=this.titleBarText%>">

I want to pass a title, computed by javascript:

document1.isNewNote()?'New document':'Edit document'

When i try it, I have an error:

Error generating custom visualisation for this custom control. Markup validation failed. Ensure 'Design Definition' source is valid.

My custom control works fine in browser, but I can't edit it in WYSIWYG-editor. How can I handle this error?

Design definition:

  <?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
    <xp:panel style='background-color:rgb(255, 255, 255);border-bottom-color:rgb(221, 221, 221);border-bottom-left-radius:4px;border-bottom-right-radius:4px;border-bottom-style:solid;border-bottom-width:1px;border-image-outset:0px;border-image-repeat:stretch;border-image-slice:100%;border-image-source:none;border-image-width:1;border-left-color:rgb(221, 221, 221);border-left-style:solid;border-left-width:1px;border-right-color:rgb(221, 221, 221);border-right-style:solid;border-right-width:1px;border-top-color:rgb(221, 221, 221);border-top-left-radius:4px;border-top-right-radius:
4px;border-top-style:solid;border-top-width:1px;box-shadow:rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;box-sizing:border-box;color:rgb(51, 51, 51);display:block;font-family:"Helvetica Neue", Helvetica, Arial, sans-serif
;font-size:14px;height:96px;line-height:20px;margin-bottom:20px;text-size-adjust:100%;width:592px;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);'>
        <xp:panel style='background-color:rgb(245, 245, 245);background-image:linear-gradient(rgb(245, 245, 245) 0px, rgb(232, 232, 232) 100%);background-repeat-x:;background-repeat-y:;border-bottom-color:
rgb(221, 221, 221);border-bottom-style:solid;border-bottom-width:1px;border-left-color:rgb(221, 221, 221);border-right-color:rgb(221, 221, 221);border-top-color:rgb(221, 221, 221);border-top-left-radius:3px;border-top-right-radius:3px;box-sizing:border-box;color:rgb(51, 51, 51);display:block;filter:
none;font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;font-size:14px;height:43px;line-height:20px;padding-bottom:10px;padding-left:15px;padding-right:15px;padding-top:10px;text-size-adjust:100%;width:590px;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);'>
            <xp:link escape="true" style='background-color:rgba(0, 0, 0, 0);box-sizing:border-box;color:rgb(51, 51, 51);cursor:auto;display:inline;font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;font-size:16px;height:auto;line-height:22.8571px;margin-bottom:0px;margin-top:0px;text-decoration:none;text-size-adjust:100%;width:
auto;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)'
                text="<%=(this.titleBarText?this.titleBarText:'Computed')%>">
            </xp:link>
        </xp:panel>

        <xp:panel style='box-sizing:border-box;color:rgb(51, 51, 51);display:block;font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;font-size:14px;height:51px;line-height:20px;text-size-adjust:100%;width:590px;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)'>

            <xp:panel style='border-top-color:rgb(221, 221, 221);box-sizing:border-box;color:rgb(51, 51, 51);display:block;font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;font-size:14px;height:30px;line-height:20px;padding-bottom:15px;padding-left:15px;padding-right:15px;padding-top:15px;text-size-adjust:100%;width:590px;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)'>
                <xp:callback facetName="panelBody" id="panelBody"></xp:callback>
            </xp:panel>

<% if(this.footer!='false' ){ %>
            <xp:panel style='background-color:rgb(245, 245, 245);border-bottom-left-radius:3px;border-bottom-right-radius:3px;border-top-color:rgb(221, 221, 221);border-top-style:solid;border-top-width:1px;box-sizing:border-box;color:rgb(51, 51, 51);display:block;font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;font-size:14px;height:21px;line-height:20px;padding-left:15px;padding-right:15px;text-size-adjust:100%;width:590px;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)'>
                <xp:callback facetName="panelFooter" id="panelFooter"></xp:callback>
            </xp:panel><% }%>
        </xp:panel>
    </xp:panel>
</xp:view>

Answer 1

It seems that the only way is to create new callback and compute the title inside the main xpage.

1. Add new Property Definition:

2. Add new callback and modify rendered property of a link:

   <xp:callback facetName="customTitle" id="customTitle"
       rendered="#{javascript:compositeData.custom_title}">
   </xp:callback>
   <xp:link escape="true" styleClass="panel-title"
       text="#{javascript:compositeData.titleBarText}"
       rendered="#{javascript:!compositeData.custom_title}">
       <xp:this.attrs>
           <xp:attr name="id">
               <xp:this.value><![CDATA[#{javascript:compositeData.panel_id + "_title"}]]></xp:this.value>
           </xp:attr>
       </xp:this.attrs>
       <xp:this.id><![CDATA[${javascript:compositeData.panel_id + "_title"}]]></xp:this.id>
   </xp:link>
   

3. Change Design Definition:

That's all. Just insert cumputed link in the main XPage:

Answer 2

document1.isNewNote() is a test to check if a document opened in browser or XPiNC is new. This is a test at runtime.

You are looking for presenting your custom control at design time in Designer. At this time there is no document you can show the status of.