Dashboard HTML Panel Refresh Problem

customaware

Here is one that I am hoping the HTML Gurus might be able to shed some light on.

I have a HTML panel on a Dashboard VP which when displayed it initially looks like this.

The code for it looks like this...

<div class="container dashboard">
  <div class="row m-t-20">
    <div class="col-md-12 col-sm-12">
      <div style="margin-top:-39px;" class="panel no-bd bd-3 panel-stat">
        <div class="panel-body bg-darkblue p-15">
          <div style="padding-bottom:11px;" class="row m-b-10">
            <!--Top Carousel-->
            <div class="col-xs-3"><span class="fa fa-users fa-5x"></span></div>
            <div class="col-xs-9">
              <div class="live-tile" data-mode="carousel" data-direction="vertical" data-delay="3500" data-height="64">
                <div>
                  <small class="stat-title">Total Project Hours</small>
                  <h1 id="todaypo" class="m-0 w-300"><<SystemSettings.StatTotalProjectHours@#,###>></h1>
                </div>
                <div>
                  <small class="stat-title">Hours This Month</small>
                  <h1 id="monthpo" class="m-0 w-300"><<SystemSettings.StatHoursCurrentMonth@#,###>></h1>
                </div>
              </div>
            </div>
          </div>
          <!--Lower Row-->
          <div class="row">
            <!--Left Hand Carousel-->
            <div class="col-xs-6">
              <div class="live-tile" data-mode="carousel" data-direction="vertical" data-delay="3500" data-height="60">
                <div>
                  <small class="stat-title">ExPat Staff</small>
                  <h4 id="yourpotoday" class="m-0 w-300"><<SystemSettings.StatExpatStaffHours@#,###>></h4>
                </div>
                <div>
                  <small class="stat-title">National Staff</small>
                  <h4 id="yourpomonth" class="m-0 w-300"><<SystemSettings.StatNationalStaffHours@#,###>></h4>
                </div>
                <div>
                  <small class="stat-title">National Wages</small>
                  <h4 id="yourpomonth" class="m-0 w-300"><<SystemSettings.StatNationalWagesHours@#,###>></h4>
                </div>
                <div>
                  <small class="stat-title">Sub-Contractors</small>
                  <h4 id="yourpomonth" class="m-0 w-300"><<SystemSettings.StatSubcontratorHours@#,###>></h4>
                </div>
              </div>
            </div>
            <!--Right Hand Carousel-->
            <div class="col-xs-6">
              <div class="live-tile" data-mode="carousel" data-direction="vertical" data-delay="3500" data-height="60">
                <div>
                  <small class="stat-title">ExPat Staff</small>
                  <h4 id="yourpotoday" class="m-0 w-300">
                    <<SystemSettings.StatExpatStaffPercent>>%</h4>
                </div>
                <div>
                  <small class="stat-title">National Staff</small>
                  <h4 id="yourpomonth" class="m-0 w-300">
                    <<SystemSettings.StatNationalStaffPercent>>%</h4>
                </div>
                <div>
                  <small class="stat-title">National Wages</small>
                  <h4 id="yourpomonth" class="m-0 w-300">
                    <<SystemSettings.StatNationalWagesPercent>>%</h4>
                </div>
                <div>
                  <small class="stat-title">Sub-Contractors</small>
                  <h4 id="yourpomonth" class="m-0 w-300">
                    <<SystemSettings.StatSubcontratorPercent>>%</h4>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

I have a process that updates the SystemSettings value for the numbers in the display.

I have this panel in the VP set to refresh every time that process is run.

However, immediately after running the process and the refresh being executed, my panel turns into this....

Wondering if anyone has any ideas on what might be causing it please?

BenHayat

Mark, when you get the last screen, if you do a View Source from browser, do you see all the DIVs with static titles created in the final html being sent to browser?

mrbdrm

i wasted a lot of time on this before.
at the end i removed the animation to flip the numbers.

customaware

Any chance of a demo or sone same code please mrbdrm?

As a follow up the Ben's comment....

Here is the Inspect when displaying correctly PRIOR to a refresh

<div class="container dashboard">
  <div class="row m-t-20">
    <div class="col-md-12 col-sm-12">
      <div style="margin-top:-39px;" class="panel no-bd bd-3 panel-stat">
        <div class="panel-body bg-darkblue p-15">
          <div style="padding-bottom:11px;" class="row m-b-10">
            <!--Top Carousel-->
            <div class="col-xs-3"><span class="fa fa-users fa-5x"></span></div>
            <div class="col-xs-9">
              <div class="live-tile carousel ha" data-mode="carousel" data-direction="vertical" data-delay="3500" data-height="64" style="height: 64px;">
                <div class="slide ha active" style="transition-property: transform; transition-duration: 500ms; transition-timing-function: ease; transform: translate(0%, 0%) translateZ(0px);">

              <small class="stat-title">Total Project Hours</small>
              <h1 id="todaypo" class="m-0 w-300">76</h1>
            </div>
            <div class="slide ha" style="transform: translate(0%, -100%) translateZ(0px); transition-duration: 500ms; transition-property: transform; transition-timing-function: ease;">

              <small class="stat-title">Hours This Month</small>
              <h1 id="monthpo" class="m-0 w-300">0</h1>
            </div>
          </div>
        </div>
      </div>
      <!--Lower Row-->
      <div class="row">
        <!--Left Hand Carousel-->
        <div class="col-xs-6">
          <div class="live-tile carousel ha" data-mode="carousel" data-direction="vertical" data-delay="3500" data-height="60" style="height: 60px;">
            <div class="slide ha active" style="transition-property: transform; transition-duration: 500ms; transition-timing-function: ease; transform: translate(0%, 0%) translateZ(0px);">

              <small class="stat-title">ExPat Staff</small>
              <h4 id="yourpotoday" class="m-0 w-300">0</h4>
            </div>
            <div class="slide ha" style="transform: translate(0%, -100%) translateZ(0px); transition-duration: 500ms; transition-property: transform; transition-timing-function: ease;">

              <small class="stat-title">National Staff</small>
              <h4 id="yourpomonth" class="m-0 w-300">57</h4>
            </div>
            <div class="slide ha" style="transform: translate(0%, -100%) translateZ(0px); transition-duration: 500ms; transition-property: transform; transition-timing-function: ease;">

              <small class="stat-title">National Wages</small>
              <h4 id="yourpomonth" class="m-0 w-300">19</h4>
            </div>
            <div class="slide ha" style="transform: translate(0%, -100%) translateZ(0px); transition-duration: 500ms; transition-property: transform; transition-timing-function: ease;">

              <small class="stat-title">Sub-Contractors</small>
              <h4 id="yourpomonth" class="m-0 w-300">0</h4>
            </div>
          </div>
        </div>
        <!--Right Hand Carousel-->
        <div class="col-xs-6">
          <div class="live-tile carousel ha" data-mode="carousel" data-direction="vertical" data-delay="3500" data-height="60" style="height: 60px;">
            <div class="slide ha active" style="transition-property: transform; transition-duration: 500ms; transition-timing-function: ease; transform: translate(0%, 0%) translateZ(0px);">

              <small class="stat-title">ExPat Staff</small>
              <h4 id="yourpotoday" class="m-0 w-300">
                0.0%</h4>
            </div>
            <div class="slide ha" style="transform: translate(0%, -100%) translateZ(0px); transition-duration: 500ms; transition-property: transform; transition-timing-function: ease;">

              <small class="stat-title">National Staff</small>
              <h4 id="yourpomonth" class="m-0 w-300">
                75.0%</h4>
            </div>
            <div class="slide ha" style="transform: translate(0%, -100%) translateZ(0px); transition-duration: 500ms; transition-property: transform; transition-timing-function: ease;">

              <small class="stat-title">National Wages</small>
              <h4 id="yourpomonth" class="m-0 w-300">
                25.0%</h4>
            </div>
            <div class="slide ha" style="transform: translate(0%, -100%) translateZ(0px); transition-duration: 500ms; transition-property: transform; transition-timing-function: ease;">

              <small class="stat-title">Sub-Contractors</small>
              <h4 id="yourpomonth" class="m-0 w-300">
                0.0%</h4>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
  </div>
</div>

Here is the Inspect Immediately AFTER the Refresh which reflects the second screenshot I posted above.

<div class="container dashboard">
  <div class="row m-t-20">
    <div class="col-md-12 col-sm-12">
      <div style="margin-top:-39px;" class="panel no-bd bd-3 panel-stat">
        <div class="panel-body bg-darkblue p-15">
          <div style="padding-bottom:11px;" class="row m-b-10">
            <!--Top Carousel-->
            <div class="col-xs-3"><span class="fa fa-users fa-5x"></span></div>
            <div class="col-xs-9">
              <div class="live-tile" data-mode="carousel" data-direction="vertical" data-delay="3500" data-height="64">

            <div>
              <small class="stat-title">Total Project Hours</small>
              <h1 id="todaypo" class="m-0 w-300">76</h1>
            </div>

            <div>
              <small class="stat-title">Hours This Month</small>
              <h1 id="monthpo" class="m-0 w-300">0</h1>
            </div>
          </div>
        </div>
      </div>
      <!--Lower Row-->
      <div class="row">
        <!--Left Hand Carousel-->
        <div class="col-xs-6">
          <div class="live-tile" data-mode="carousel" data-direction="vertical" data-delay="3500" data-height="60">

            <div>
              <small class="stat-title">ExPat Staff</small>
              <h4 id="yourpotoday" class="m-0 w-300">0</h4>
            </div>

            <div>
              <small class="stat-title">National Staff</small>
              <h4 id="yourpomonth" class="m-0 w-300">57</h4>
            </div>

            <div>
              <small class="stat-title">National Wages</small>
              <h4 id="yourpomonth" class="m-0 w-300">19</h4>
            </div>

            <div>
              <small class="stat-title">Sub-Contractors</small>
              <h4 id="yourpomonth" class="m-0 w-300">0</h4>
            </div>
          </div>
        </div>
        <!--Right Hand Carousel-->
        <div class="col-xs-6">
          <div class="live-tile" data-mode="carousel" data-direction="vertical" data-delay="3500" data-height="60">

            <div>
              <small class="stat-title">ExPat Staff</small>
              <h4 id="yourpotoday" class="m-0 w-300">
                0.0%</h4>
            </div>

            <div>
              <small class="stat-title">National Staff</small>
              <h4 id="yourpomonth" class="m-0 w-300">
                75.0%</h4>
            </div>

            <div>
              <small class="stat-title">National Wages</small>
              <h4 id="yourpomonth" class="m-0 w-300">
                25.0%</h4>
            </div>

            <div>
              <small class="stat-title">Sub-Contractors</small>
              <h4 id="yourpomonth" class="m-0 w-300">
                0.0%</h4>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
  </div>
</div>

I can see a few lines different but an not verse enough in the ways of the Yoda to work out why it is different or how to address it. 🙁

mrbdrm

The issue is with the script that do the animation

it will work fine on a page alone but there is some conflict with kendo or aware scripts on the same page.

what i did is made more than one panel and displayed the info on them separately (instead of one panel that flip throw multiple attributes)

<div class=" dashboard">
		<div class="row m-t-20">			
			<div class="col-md-12 col-sm-12">
				<div class="panel no-bd bd-3 panel-stat">
					<div class="panel-body bg-blue">
						<div class="row m-b-10">
							<div class="col-xs-3">
								<i class="glyph-icon flaticon-computer87"></i>
							</div>
							<div class="col-xs-9">
									<div>
										<small class="stat-title">الزيارات اليوم</small>
										<h1 class="m-0"><<SystemSettings.CounterTodayVisits>></h1>
									</div>
                            </div>									
						</div>
						<div class="row">
							<div class="col-xs-6">
								<small class="stat-title">في الحجب</small>
									<div>
										<h3 class="m-0 w-300"><a href="#" onclick="AwareApp.runQuery('ShowBlockedUsers','new_tab')"><<SystemSettings.CounterOnBlock>></a></h3>
									</div>
							</div>
							<div class="col-xs-6">
								<small class="stat-title">بأنتظار التفعل</small>
							        <div>
										<h3 class="m-0 w-500"><a href="#" onclick="AwareApp.runQuery('ShowWaitingUsers','new_tab')"><<SystemSettings.CounterWaitingApprove>></a></h3>
									</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
</div>

that is the code for one panel as example