Index showing as NaN on Title in UI5 Application

[developerone]

Hello,

I am using an Index to set the number on a title which is inside a panel. The Index is getting displayed as NaN on the UI. I am attaching the UI5 code for your reference.

<l:VerticalLayout visible="{=${PATH} === 'R'}" width="100%"> 
<l:Grid containerQuery="true" content="{/INFO}"> 
<Panel backgroundDesign="Transparent"> 
<headerToolbar> 
<Toolbar> 
<Title text="{i18n>label.billto} #{=${Index} + 1}"/> "  This gets set a NaN on the UI
</Toolbar> 
</headerToolbar> 
<content> 
<Title visible="{=${BPName}!==''}" text="{BPName}"/> 
<Text visible="{=${BPAddress}!==''}" 
text="{ parts: [ {path:'Index'}, {path: 'BPAddress'}, {path: 'BPCity'}]}"/> 
<VBox> <HBox visible="{=${documentType}==='AB'}"> 
<Text text="{ parts: [ {path:'Index'}, 
{path: 'i18n>label.from'}, {path: 'i18n>label.to'}, {path: 'i18n>label.willpay'} ]/> 
</HBox> 
<HBox> <Label text="{i18n>label.paymentMethod}: "/> 
<Text text="{path: 'paymentMethod'/> 
</HBox> 
</VBox> 
</content> 
</Panel> 
</l:Grid> 
</l:VerticalLayout>

Here is the screen shot of the output.

[junwu · Accepted solution]

depend on your model structure.

[developerone · Accepted solution]

Thank You Jun. I will look in this direction.