JavaScript UI Libraries & Blazor Components Suite – Smart UI › Forums › Window › smart window not displaying footer

Tagged: 

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • January 5, 2021 at 9:39 am #101285
    davout
    Member

    Hello,
    I am using the ‘smart-window’ component for the first time and cannot get the component to display a footer template

    <smart-window
  label="{{taskEditService.title}}"
  [opened]="visible"
  [windowParent]="'body'"
  [headerButtons]="['close','minimize','pin','collapse']"
  [footerTemplate]="'footerTemplate'"
  [footerPosition]="'bottom'"
  (onClose)="taskEditService.hide()" >
  <template id="footerTemplate">
    <smart-button class="flat">Save</smart-button>
    <smart-button class="flat">Restore</smart-button>
  </template>
</smart-window>

    I have tried following the examples on your Angular/demo page, but none of them work
     
     
     

    January 5, 2021 at 1:50 pm #101286
    yavordashew
    Member

    Hi davout,
    When using the ‘smart-window’ component you should set the ‘opened’ property to a boolean value.
    If you want the window to be visible you can set the value to ‘true’.
    Also the ‘template’ must not be in the ‘smart-window’ tag.You should place the ‘template’ after your <app-root> tag with its corresponding id.
    I have made a little code snippet for you with the corrections you need to make.
    For your app.component.html file :
    <smart-window
    label=”{{taskEditService.title}}”
    [opened]=”true”
    [windowParent]=”‘body'”
    [headerButtons]=”[‘close’,’minimize’,’pin’,’collapse’]”
    [footerTemplate]=”‘footerTemplate'”
    [footerPosition]=”‘bottom'”
    (onClose)=”taskEditService.hide()” >
    </smart-window>
    In your main.html (main.html name is just for example) after the <app-root> tag, like this:
    <body>
    <app-root>Loading… </app-root>
    <template id=”footerTemplate”>
    <smart-button class=”flat”>Save</smart-button>
    <smart-button class=”flat”>Restore</smart-button>
    </template>
    </body>
    Please, do not hesitate to contact us if you have any additional questions.
    Best regards,
    Yavor Dashev
    Smart UI Team
    https://www.htmlelements.com/

    January 5, 2021 at 2:45 pm #101287
    davout
    Member

    The “opened” property is linked to a component property called “visible”. The smart window is being displayed, but there is no footer element displayed within the window.   I have included the ‘smart-window’ element as content within an app component.  The latest code is shown below, and this still does not display the footer area as expected

    <smart-window
  label="{{formTitle}}"
  [opened]="visible"
  [windowParent]="'body'"
  [resizeIndicator]="true"
  [resizeMode]="'both'"
  [headerButtons]="['close','minimize','pin','collapse']"
  [footerTemplate]="'footerTemplate'"
  [footerPosition]="'bottom'"
  (onClose)="taskEditService.hide()" >
     <div>
       <smart-input [placeholder]="'task name'"></smart-input>
     </div>
     <div>
       <smart-button class="flat">Today</smart-button>
       <smart-button class="flat">Tomorrow</smart-button>
       <smart-button class="flat">This week</smart-button>
     </div>
     <div>
       <smart-button class="flat">Next week</smart-button>
       <smart-button class="flat">This month</smart-button>
       <smart-button class="flat">Next month</smart-button>
     </div>
</smart-window>
<template id="footerTemplate">
  <smart-button class="flat">Save</smart-button>
  <smart-button class="flat">Restore</smart-button>
</template>
Is there a way to post screen shots via this forum?

     
     
     

    January 5, 2021 at 3:17 pm #101288
    yavordashew
    Member

    Hi davout,
    As I mentioned before the reason for the footer not to be displayed is that you have included the footer template inside your app.component.html file.
    From the code you have sent us from your last message I can suggest that you have added the footer template inside your app.component.html file.
    In order for the footer to be displayed you have to include it in your application root html file, for example: index.html.
    There you have to include the footer template after your ‘<app-root></app-root>’ tag.
    Yes, there is an option to send images via the IMG button when replying in ‘Text’ mode or in ‘Visual’ mode above the textfield there is icon for uploading images.
    Please, do not hesitate to contact us if you have any additional questions.
    Best regards,
    Yavor Dashev
    Smart UI Team
    https://www.htmlelements.com/

    January 5, 2021 at 6:25 pm #101289
    davout
    Member

    Requiring templates to be included outside of a component at the app root level would seem to break all the normal rules associated with component design!!
     

    January 6, 2021 at 7:15 am #101290
    admin
    Keymaster

    Hi davout,
    In Angular you cannot put template html tag within angular view due to the reason that Angular Views use HTMLTemplate. It is not necessary to try to use template tag for window footer. You can define a footer within the window’s content.
    Best regards,
    Peter Stoev
    Smart UI Team
    https://www.htmlelements.com/

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.