Using computed value from datasource value in design definition - xpages

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

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.

Answer 2

It seems that the only way is to create new callback and compute the title inside the main xpage.
Add new Property Definition:
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>
Change Design Definition:
That's all. Just insert cumputed link in the main XPage: