Pagination xpath invalid - css

I wanted to navigate to next page but the robot always returned error
How do I construct the xpath with this <li title="2" class="ant-pagination-item ant-pagination-item-2" tabindex="0">
or <li title="Next Page" class="ant-pagination-next"
script:
*** Settings ***
Library Browser
Library OperatingSystem
Resource ../Resources/BrowserParameters.robot
Resource ../Resources/BrowserResources.robot
Resource ../Resources/BrowserCustomKeywords.robot
#Select Browser: chromium or firefox
Test Setup Test Setup Browser=chromium
Test Teardown Test Teardown
*** Test Cases ***
001-01-Upload13Videos-Delete2Videos-Upload2Videos-Process
Click ${Page-Inference}
Upload Multiple Video Files
Click //title[#class="ant-pagination-item ant-pagination-item-2"])
the outer HTML
<ul class="ant-pagination mini ant-table-pagination ant-table-pagination-right" unselectable="unselectable">
<li title="Previous Page" class="ant-pagination-prev ant-pagination-disabled" aria-disabled="true">
<button class="ant-pagination-item-link" type="button" tabindex="-1" disabled="">
<span role="img" aria-label="left" class="anticon anticon-left">
<svg viewBox="64 64 896 896" focusable="false" data-icon="left" width="1em" height="1em" fill="currentColor" aria-hidden="true">
<path d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"/>
</svg>
</span>
</button>
</li>
<li title="1" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active" tabindex="0">
<a rel="nofollow">1</a>
</li>
<li title="2" class="ant-pagination-item ant-pagination-item-2" tabindex="0">
<a rel="nofollow">2</a>
</li>
<li title="Next Page" class="ant-pagination-next" aria-disabled="false" tabindex="0">
<button class="ant-pagination-item-link" type="button" tabindex="-1">
<span role="img" aria-label="right" class="anticon anticon-right">
<svg viewBox="64 64 896 896" focusable="false" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true">
<path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"/>
</svg>
</span>
</button>
</li>
</ul>
error:
Error: locator.click: DOMException: Failed to execute 'evaluate' on 'Document': The string './/title[#class="ant-pagination-item ant-pagination-item-2"])' is not a valid XPath expression.
at Object.queryAll (<anonymous>:3:42890)
at g._queryEngineAll (<anonymous>:3:49586)
at g._querySelectorRecursively (<anonymous>:3:48960)
at g.querySelectorAll (<anonymous>:3:49365)
at eval (eval at evaluate (:3:2389), <anonymous>:10:33)
at s (<anonymous>:3:51298)
at <anonymous>:3:51366
at Object.run (<anonymous>:3:51732)
at eval (eval at evaluate (:3:2389), <anonymous>:1:14)
at t.default.evaluate (<anonymous>:3:2412)
=========================== logs ===========================
waiting for selector "//title[#class="ant-pagination-item ant-pagination-item-2"]) >> nth=0"
Failed to execute 'evaluate' on 'Document': The string './/title[#class="ant-pagination-item ant-pagination-item-2"])' is not a valid XPath expression.
============================================================

You are using this xpath
//title[#class="ant-pagination-item ant-pagination-item-2"])
which is wrong, cause xPath expression are written like this
//tagName[#attributeName='attributeValue']
so your xpath should be
//li[#class='ant-pagination-item ant-pagination-item-2']
Also, You can have this xpath, since you are mainly looking for pagination, index wouldn't hurt [See below]
//li[#title='2']

Related

Robot Framework Browser library failed to Click href

I have a strage website which the side menu uses href without any ID or class.
At robot framework browser library, I used click but web locator isn't detected.
I tried to use robotcorp inspector record elements, the same 'Click' method is returned as my script.
How do I locate the href or how do I re-construct the xpath?
script:
*** Settings ***
Library Browser
Resource ../Resources/BrowserParameters.robot
Resource ../Resources/BrowserResources.robot
001-Basic-Search
Click //a[#href="/test"]
report:
14:22:33.151 FAIL TimeoutError: locator.click: Timeout 10000ms exceeded.
=========================== logs ===========================
waiting for selector "//a[#href="/test"]"
selector resolved to hidden
attempting click action
waiting for element to be visible, enabled and stable
element is not visible - waiting...
============================================================
The web element:
<span>test</span>
full HTML
<li class="ant-menu-item ant-menu-item-selected" role="menuitem" style="padding-left: 24px;">
<span role="img" aria-label="user-switch" class="anticon anticon-user-switch ant-menu-item-icon">
<svg viewBox="64 64 896 896" focusable="false" class="" data-icon="user-switch" width="1em" height="1em" fill="currentColor" aria-hidden="true">
<defs>
<style/>
</defs>
<path d="M759 335c0-137-111-248-248-248S263 198 263 335c0 82.8 40.6 156.2 103 201.2-.4.2-.7.3-.9.4-44.7 18.9-84.8 46-119.3 80.6a373.42 373.42 0 00-80.4 119.5A373.6 373.6 0 00136 874.8a8 8 0 008 8.2h59.9c4.3 0 7.9-3.5 8-7.8 2-77.2 32.9-149.5 87.6-204.3C356 614.2 431 583 511 583c137 0 248-111 248-248zM511 507c-95 0-172-77-172-172s77-172 172-172 172 77 172 172-77 172-172 172zm105 221h264c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H703.5l47.2-60.1a8.1 8.1 0 001.7-4.9c0-4.4-3.6-8-8-8h-72.6c-4.9 0-9.5 2.3-12.6 6.1l-68.5 87.1c-4.4 5.6-6.8 12.6-6.8 19.8.1 17.7 14.4 32 32.1 32zm240 64H592c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h176.5l-47.2 60.1a8.1 8.1 0 00-1.7 4.9c0 4.4 3.6 8 8 8h72.6c4.9 0 9.5-2.3 12.6-6.1l68.5-87.1c4.4-5.6 6.8-12.6 6.8-19.8-.1-17.7-14.4-32-32.1-32z"/>
</svg>
</span>
<span>
<a href="/test"/>test</span>
</li>
I tried this does not work as well:
Click xpath://a[#href='/test']
Error: locator.click: Unsupported token "#href" while parsing selector "xpath://a[#href='/test']"
The answer is really simple:
Click "test"

Flutter Dart: HTTP read does not retrieve full html from given URL

I am currently using http.read() in order to retrieve the raw html of a given URL. I use Safari's "Inspect Element" feature to compare the result.
I used this code and Google's webpage to test:
http.read("https://www.google.com/?client=safari").then((html) {
print(html);
});
The result printed was:
<!doctype html><html itemscope="" itemtype="http://schema.org/WebPage" lang="en"><head><meta content="Search the world's information, including webpages, images, videos and more. Google has many special features to help you find exactly what you're looking for." name="description"><meta content="noodp" name="robots"><meta content="text/html; charset=UTF-8" http-equiv="Content-Type"><meta content="/images/branding/googleg/1x/googleg_standard_color_128dp.png" itemprop="image"><title>Google</title><script nonce="/5rKr18fNh5SdZTnYGW2ig==">(function(){window.google={kEI:'FPMcX_3_EYPbtQbD84wo',kEXPI:'0,202123,3,4,32,1151584,5663,731,223,179,3477,1449,206,3204,10,1226,364,926,573,817,383,246,5,1129,225,352,296,1046,1936,470,293,21,3,370,149,376,155,91,180,2,11,116,73,85,48,105,552,176,204,49,25,1120582,1197748,329519,13677,4855,32691,15248,867,6056,22628,9188,8384,4859,1361,9291,3025,4742,6,11027,1808,4020,978,7931,5297,2054,918,875,1217,2975,6430,1142,6290,7096,4517,1396,1381,920,2276,10,3681,706,1165,114,2213,529,149,1103,840,520,1134,278,51,56,157,4101,108,204,1135,1,3,2063,606,2023,1777,143,377,1947,2229,93,330,1282,16,2927,2247,1813,1786,3227,2845,7,6068,6286,4455,641,2450,2458,1226,1406,337,4928,108,1456,254,1697,908,2,3555,2397,7468,1,841,1337,666,432,3,1546,865,1,372,3545,706,149,189,1666,1646,2490,2251,5733,4,1528,17,358,1929,1236,271,874,405,1259,580,21,177,1918,192,179,745,973,9,43,75,4,135,1202,1425,459,117,758,6,438,24,14,198,601,1963,1503,293,1972,86,3,1493,877,910,1426,69,305,2310,1514,1009,288,939,4,3,807,91,599,1414,554,2,237,6,246,54,835,86,523,1556,44,465,107,81,102,219,194,4,644,268,67,175,35,212,75,689,431,30,210,250,9,439,1,133,131,95,793,5,2,149,1776,655,164,53,2,88,113,64,59,39,71,6,46,5,318,68,2,17,478,416,430,340,306,4,71,2,161,2,156,308,22,786,7,303,1,34,314,614,382,2021,665,2,4,362,5784360,1873,5998827,2801216,549,333,444,1,2,80,1,900,896,1,9,2,2551,1,748,141,59,736,563,1,4265,1,1,2,1017,9,305,3299,129,2,26,59,7,25,64,33,3502099,20458661',kBL:'aaAI'};google.sn='webhp';google.kHL='en';})();(function(){google.lc=[];google.li=0;google.getEI=function(a){for(var c;a&&(!a.getAttribute||!(c=a.getAttribute("eid")));)a=a.parentNode;return c||google.kEI};google.getLEI=function(a){for(var c=null;a&&(!a.getAttribute||!(c=a.getAttribute("leid")));)a=a.parentNode;return c};google.ml=function(){return null};google.time=function(){return Date.now()};google.log=function(a,c,b,d,g){if(b=google.logUrl(a,c,b,d,g)){a=new Image;var e=google.lc,f=google.li;e[f]=a;a.onerror=a.onload=a.onabort=function(){delete e[f]};google.vel&&google.vel.lu&&google.vel.lu(b);a.src=b;google.li=f+1}};google.logUrl=function(a,c,b,d,g){var e="",f=google.ls||"";b||-1!=c.search("&ei=")||(e="&ei="+google.getEI(d),-1==c.search("&lei=")&&(d=google.getLEI(d))&&(e+="&lei="+d));d="";!b&&google.cshid&&-1==c.search("&cshid=")&&"slh"!=a&&(d="&cshid="+google.cshid);b=b||"/"+(g||"gen_204")+"?atyp=i&ct="+a+"&cad="+c+e+f+"&zx="+google.time()+d;/^http:/i.test(b)&&"https:"==window.location.protocol&&(google.ml(Error("a"),!1,{src:b,glmm:1}),b="");return b};}).call(this);(function(){google.y={};google.x=function(a,b){if(a)var c=a.id;else{do c=Math.random();while(google.y[c])}google.y[c]=[a,b];return!1};google.lm=[];google.plm=function(a){google.lm.push.apply(google.lm,a)};google.lq=[];google.load=function(a,b,c){google.lq.push([[a],b,c])};google.loadAll=function(a,b){google.lq.push([a,b])};}).call(this);google.f={};(function(){
document.documentElement.addEventListener("submit",function(b){var a;if(a=b.target){var c=a.getAttribute("data-submitfalse");a="1"==c||"q"==c&&!a.elements.q.value?!0:!1}else a=!1;a&&(b.preventDefault(),b.stopPropagation())},!0);document.documentElement.addEventListener("click",function(b){var a;a:{for(a=b.target;a&&a!=document.documentElement;a=a.parentElement)if("A"==a.tagName){a="1"==a.getAttribute("data-nohref");break a}a=!1}a&&b.preventDefault()},!0);}).call(this);
var a=window.location,b=a.href.indexOf("#");if(0<=b){var c=a.href.substring(b+1);/(^|&)q=/.test(c)&&-1==c.indexOf("#")&&a.replace("/search?"+c.replace(/(^|&)fp=[^&]*/g,"")+"&cad=h")};</script><style>#gbar,#guser{font-size:13px;padding-top:1px !important;}#gbar{height:22px}#guser{padding-bottom:7px !important;text-align:right}.gbh,.gbd{border-top:1px solid #c9d7f1;font-size:1px}.gbh{height:0;position:absolute;top:24px;width:100%}#media all{.gb1{height:22px;margin-right:.5em;vertical-align:top}#gbar{float:left}}a.gb1,a.gb4{text-decoration:underline !important}a.gb1,a.gb4{color:#00c !important}.gbi .gb4{color:#dd8e27 !important}.gbf .gb4{color:#900 !important}
</style><style>body,td,a,p,.h{font-family:arial,sans-serif}body{margin:0;overflow-y:scroll}#gog{padding:3px 8px 0}td{line-height:.8em}.gac_m td{line-height:17px}form{margin-bottom:20px}.h{color:#36c}.q{color:#00c}em{font-weight:bold;font-style:normal}.lst{height:25px;width:496px}.gsfi,.lst{font:18px arial,sans-serif}.gsfs{font:17px arial,sans-serif}.ds{display:inline-box;display:inline-block;margin:3px 0 4px;margin-left:4px}input{font-family:inherit}body{background:#fff;color:#000}a{color:#11c;text-decoration:none}a:hover,a:active{text-decoration:underline}.fl a{color:#36c}a:visited{color:#551a8b}.sblc{padding-top:5px}.sblc a{display:block;margin:2px 0;margin-left:13px;font-size:11px}.lsbb{background:#eee;border:solid 1px;border-color:#ccc #999 #999 #ccc;height:30px}.lsbb{display:block}#fll a{display:inline-block;margin:0 12px}.lsb{background:url(/images/nav_logo229.png) 0 -261px repeat-x;border:none;color:#000;cursor:pointer;height:30px;margin:0;outline:0;font:15px arial,sans-serif;vertical-align:top}.lsb:active{background:#ccc}.lst:focus{outline:none}</style><script nonce="/5rKr18fNh5SdZTnYGW2ig=="></script></head><body bgcolor="#fff"><script nonce="/5rKr18fNh5SdZTnYGW2ig==">(function(){var src='/images/nav_logo229.png';var iesg=false;document.body.onload = function(){window.n && window.n();if (document.images){new Image().src=src;}
if (!iesg){document.f&&document.f.q.focus();document.gbqf&&document.gbqf.q.focus();}
}
})();</script><div id="mngb"><div id=gbar><nobr><b class=gb1>Search</b> <a class=gb1 href="https://www.google.com/imghp?hl=en&tab=wi">Images</a> <a class=gb1 href="https://maps.google.com/maps?hl=en&tab=wl">Maps</a> <a class=gb1 href="https://play.google.com/?hl=en&tab=w8">Play</a> <a class=gb1 href="https://www.youtube.com/?gl=US&tab=w1">YouTube</a> <a class=gb1 href="https://news.google.com/nwshp?hl=en&tab=wn">News</a> <a class=gb1 href="https://mail.google.com/mail/?tab=wm">Gmail</a> <a class=gb1 href="https://drive.google.com/?tab=wo">Drive</a> <a class=gb1 style="text-decoration:none" href="https://www.google.com/intl/en/about/products?tab=wh"><u>More</u> »</a></nobr></div><div id=guser width=100%><nobr><span id=gbn class=gbi></span><span id=gbf class=gbf></span><span id=gbe></span><a href="http://www.google.com/history/optout?hl=en" class=gb4>Web History</a> | <a href="/preferences?hl=en" class=gb4>Settings</a> | <a target=_top id=gb_70 href="https://accounts.google.com/ServiceLogin?hl=en&passive=true&continue=https://www.google.com/%3Fclient%3Dsafari" class=gb4>Sign in</a></nobr></div><div class=gbh style=left:0></div><div class=gbh style=right:0></div></div><center><br clear="all" id="lgpd"><div id="lga"><img alt="Google" height="92" src="/images/branding/googlelogo/1x/googlelogo_white_background_color_272x92dp.png" style="padding:28px 0 14px" width="272" id="hplogo"><br><br></div><form action="/search" name="f"><table cellpadding="0" cellspacing="0"><tr valign="top"><td width="25%"> </td><td align="center" nowrap=""><input name="client" value="safari" type="hidden"><input name="ie" value="ISO-8859-1" type="hidden"><input value="en" name="hl" type="hidden"><input name="source" type="hidden" value="hp"><input name="biw" type="hidden"><input name="bih" type="hidden"><div class="ds" style="height:32px;margin:4px 0"><input class="lst" style="margin:0;padding:5px 8px 0 6px;vertical-align:top;color:#000" autocomplete="off" value="" title="Google Search" maxlength="2048" name="q" size="57"></div><br style="line-height:0"><span class="ds"><span class="lsbb"><input class="lsb" value="Google Search" name="btnG" type="submit"></span></span><span class="ds"><span class="lsbb"><input class="lsb" id="tsuid1" value="I'm Feeling Lucky" name="btnI" type="submit"><script nonce="/5rKr18fNh5SdZTnYGW2ig==">(function(){var id='tsuid1';document.getElementById(id).onclick = function(){if (this.form.q.value){this.checked = 1;if (this.form.iflsig)this.form.iflsig.disabled = false;}
else top.location='/doodles/';};})();</script><input value="AINFCbYAAAAAXx0BJCwQ1DaxEnFHF52CcFaC-EESwJcf" name="iflsig" type="hidden"></span></span></td><td class="fl sblc" align="left" nowrap="" width="25%">Advanced search</td></tr></table><input id="gbv" name="gbv" type="hidden" value="1"><script nonce="/5rKr18fNh5SdZTnYGW2ig==">(function(){var a,b="1";if(document&&document.getElementById)if("undefined"!=typeof XMLHttpRequest)b="2";else if("undefined"!=typeof ActiveXObject){var c,d,e=["MSXML2.XMLHTTP.6.0","MSXML2.XMLHTTP.3.0","MSXML2.XMLHTTP","Microsoft.XMLHTTP"];for(c=0;d=e[c++];)try{new ActiveXObject(d),b="2"}catch(h){}}a=b;if("2"==a&&-1==location.search.indexOf("&gbv=2")){var f=google.gbvu,g=document.getElementById("gbv");g&&(g.value=a);f&&window.setTimeout(function(){location.href=f},0)};}).call(this);</script></form><div id="gac_scont"></div><div style="font-size:83%;min-height:3.5em"><br></div><span id="footer"><div style="font-size:10pt"><div style="margin:19px auto;text-align:center" id="fll">Advertising ProgramsBusiness SolutionsAbout Google</div></div><p style="font-size:8pt;color:#767676">© 2020 - Privacy - Terms</p></span></center><script nonce="/5rKr18fNh5SdZTnYGW2ig==">(function(){window.google.cdo={height:0,width:0};(function(){var a=window.innerWidth,b=window.innerHeight;if(!a||!b){var c=window.document,d="CSS1Compat"==c.compatMode?c.documentElement:c.body;a=d.clientWidth;b=d.clientHeight}a&&b&&(a!=google.cdo.width||b!=google.cdo.height)&&google.log("","","/client_204?&atyp=i&biw="+a+"&bih="+b+"&ei="+google.kEI);}).call(this);})();(function(){var u='/xjs/_/js/k\x3dxjs.hp.en_US.v1Yj6_3_xDY.O/m\x3dsb_he,d/am\x3dAE-wOQ/d\x3d1/rs\x3dACT90oHxuZHmSFByKKKhO9lKfARcvsOJJg';
setTimeout(function(){var b=document;var a="SCRIPT";"application/xhtml+xml"===b.contentType&&(a=a.toLowerCase());a=b.createElement(a);a.src=u;google.timers&&google.timers.load&&google.tick&&google.tick("load","xjsls");document.body.appendChild(a)},0);})();(function(){window.google.xjsu='/xjs/_/js/k\x3dxjs.hp.en_US.v1Yj6_3_xDY.O/m\x3dsb_he,d/am\x3dAE-wOQ/d\x3d1/rs\x3dACT90oHxuZHmSFByKKKhO9lKfARcvsOJJg';})();function _DumpException(e){throw e;}
function _F_installCss(c){}
(function(){google.jl={dw:false,em:[],emw:false,lls:'default',pdt:0,snet:true,uwp:true};})();(function(){var pmc='{\x22d\x22:{},\x22sb_he\x22:{\x22agen\x22:true,\x22cgen\x22:true,\x22client\x22:\x22heirloom-hp\x22,\x22dh\x22:true,\x22dhqt\x22:true,\x22ds\x22:\x22\x22,\x22ffql\x22:\x22en\x22,\x22fl\x22:true,\x22host\x22:\x22google.com\x22,\x22isbh\x22:28,\x22jsonp\x22:true,\x22msgs\x22:{\x22cibl\x22:\x22Clear Search\x22,\x22dym\x22:\x22Did you mean:\x22,\x22lcky\x22:\x22I\\u0026#39;m Feeling Lucky\x22,\x22lml\x22:\x22Learn more\x22,\x22oskt\x22:\x22Input tools\x22,\x22psrc\x22:\x22This search was removed from your \\u003Ca href\x3d\\\x22/history\\\x22\\u003EWeb History\\u003C/a\\u003E\x22,\x22psrl\x22:\x22Remove\x22,\x22sbit\x22:\x22Search by image\x22,\x22srch\x22:\x22Google Search\x22},\x22ovr\x22:{},\x22pq\x22:\x22\x22,\x22refpd\x22:true,\x22rfs\x22:[],\x22sbpl\x22:16,\x22sbpr\x22:16,\x22scd\x22:10,\x22stok\x22:\x22JbTioW75SpWion0I9cXOm7-NBDI\x22,\x22uhde\x22:false}}';google.pmc=JSON.parse(pmc);})();</script> </body></html>
There is a lot missing here. These are a few examples that are found in the "Inspect Element" page but not in the result of the http.read() call:
HTML for "How Search Works":
<a class="Fx4vi" href="https://google.com/search/howsearchworks/?fg=1"> How Search works </a>
HTML for "About":
About
There are also some other details missing from the HTTP read call. Why does it not return all of the raw HTML?

How to keep the side bar link active when i change the tabs using angular2

i have a side bar, where in it remains active if im on the screens first tab, if i switch to second tab, the url changes and the sidebar label wont be active.
How can this be solved. Please help.
HTML:
Side bar Code:
<a routerLink="/my-health/my-health-history" [ngClass] = "{'active' : true}" routerLinkActive="active-link" [routerLinkActiveOptions]="{exact: true}" class="list-group-item list-group-item-action justify-content-between"
id="nav-link-1" aria-haspopup="true" aria-expanded="false" aria-controls="nav-submenu-1">
<span><i class="icon-heart g-pos-rel g-top-1 g-mr-8"></i>{{ 'DashboardModule.MYHEALTH' | translate }}
</span>
</a>
TAbs code redirected to pages on click of side bar link:
<div class="myhealth mt7">
<ul class="nav nav-tabs menu">
<li>
<a class="active-link" routerLink="/my-health/my-health-history" routerLinkActive="active-link"
[routerLinkActiveOptions]="{exact: true}">myHealthHistory
</a>
</li>
<li>
<a routerLink="/my-health/my-lifestyle" routerLinkActive="active-link" [routerLinkActiveOptions]="{exact: true}">myLifeStyle
</a>
</li>
<li>
<a routerLink="/my-health/my-family-health-history" routerLinkActive="active-link" [routerLinkActiveOptions]="{exact: true}">myFamilyHistory
</a>
</li>
</ul>
</div>
If i am in myHealth History tab, then side bar will be active, if i shift to other 2 tabs then side bar wont be active
Using [ngClass] = "{'active' : true}" in tag.
The condition are:
Differ your current URL based on tab change.
ex1: http://test.com/tab1 and http://test.com/tab2
ex2:http://test.com/#tab1 and http://test.com/#tab2
Read url and find string like "tab1 or tab2"
add "Active" class based on this condition
You can check for the current active link in the sidebar component.
Sidebar html
<a routerLinkActive="active-link" [ngClass]="{'active-link': isActive()}" class="list-group-item list-group-item-action justify-content-between"
id="nav-link-1" aria-haspopup="true" aria-expanded="false" aria-controls="nav-submenu-1">
<span><i class="icon-heart g-pos-rel g-top-1 g-mr-8"></i>{{ 'DashboardModule.MYHEALTH' | translate }}
</span>
</a>
Sidebar ts
constructor(private router:Router) {
}
isActive(){
return ["/my-health/my-health-history","/my-health/my-lifestyle","/my-health/my-family-health-history"].includes(this.router.url);
}
Note : the code is written directly to Stackoverflow editor so there could be typo or syntatical error. Please correct yourself.

Fluid Typo3 - How to get variables definded via flux from different page uids

I guess my problem is easily solved, but I'm thinking for days about it, googling didn't help me out. Maybe I just don't understand the concept :-).
In my provider extension I define a simple main page with one configuration option. Depending on what "fontawesomeicon" says for a page, its corresponding Fonteawesome-Icon shall be placed before the menu entry text.
But when I implement it this way, every page menu entry gets the Icon from the actual page. I don't know how to tell the system, that the corresponding {fontawesomeicon} shall be taken from that page this entry belongs to.
Thanks for any hints to get it working. I'm useing Typo3 7.1
Page config Fullpage.html:
<f:section name="Configuration">
<flux:form id="fullpage" />
<flux:grid>
<flux:grid.row>
<flux:grid.column colPos="0" name="main" />
</flux:grid.row>
</flux:grid>
<flux:field.input name="fontawesomeicon" />
</f:section>
Partial config Elements.html:
<f:section name="MainMenu">
<ul class="sf-menu">
<v:page.menu pageUid="{settings.startpageUid}" entryLevel="2" levels="2" expandAll="TRUE" as="menu">
<f:for each="{menu}" as="item">
<li class="{item.class}">
<i class="fa fa-lg {fontawesomeicon}"></i> {item.linktext}
<f:if condition="{item.hasSubPages}">
<ul>
<f:render section="SubMenu" arguments="{_all}" />
</ul>
</f:if>
</li>
</f:for>
</v:page.menu>
</ul>
</f:section>
<f:section name="SubMenu">
<v:page.menu pageUid="{item.uid}" entryLevel="2" levels="1" as="submenu">
<f:for each="{submenu}" as="subitem">
<li class="{subitem.class}">
<i class="fa {fontawesomeicon}"></i> {subitem.linktext}
</li>
</f:for>
</v:page.menu>
</f:section>
Just to complete it... putting it together in the page layout file Page.html:
<f:layout name="Page" />
<f:render section="MainMenu" partial="Elements" arguments="{_all}" />
<f:render section="Main" />
Finally got it. It's the old problem... how do you ask the right question if you don't get to the real matter. Another post (about accessing flexform) gave me the final hint. Yay!
<f:section name="MainMenu">
<ul class="sf-menu">
<v:page.menu pageUid="{settings.startpageUid}" entryLevel="2" levels="2" expandAll="TRUE" as="menu">
<f:for each="{menu}" as="item">
<li class="{item.class}">
<!--new:--> <flux:form.data table="pages" field="tx_fed_page_flexform" uid="{item.uid}" as="menuIcon">
<i class="fa fa-lg {menuIcon.fontawesomeicon}"></i> {item.linktext}
<!--new:--> </flux:form.data>
<f:if condition="{item.hasSubPages}">
<ul>
<f:render section="SubMenu" arguments="{_all}" />
</ul>
</f:if>
</li>
</f:for>
</v:page.menu>
</ul>
</f:section>
<f:section name="SubMenu">
<v:page.menu pageUid="{item.uid}" entryLevel="2" levels="1" as="submenu">
<f:for each="{submenu}" as="subitem">
<li class="{subitem.class}">
<!--new:--> <flux:form.data table="pages" field="tx_fed_page_flexform" uid="{subitem.uid}" as="subMenuIcon">
<i class="fa {subMenuIcon.fontawesomeicon}"></i> {subitem.linktext}
<!--new:--> </flux:form.data>
</li>
</f:for>
</v:page.menu>
</f:section>
By using the variable "fontawesomeicon" directly, the value is always the same, as set in the controller that renders the template, you need to specify a new context.
Debug the variables in the foreach-loop with <f:debug>{varname}</f:debug> and check if the field "fontawesomeicon" is present.
<f:section name="SubMenu">
<v:page.menu pageUid="{item.uid}" entryLevel="2" levels="1" as="submenu">
<f:for each="{submenu}" as="subitem">
<li class="{subitem.class}">
<f:debug>{subitem}</f:debug>
<i class="fa {fontawesomeicon}"></i> {subitem.linktext}
</li>
</f:for>
</v:page.menu>
</f:section>
I also recommend to use TypoScript (HMENU, TMENU) for menus instead of Fluid-Templates

Handlebars parse error while compiling template

i am getting below error while compiling handlebars template with windows CMD. my handlebars client and server both are #1.3.0 please help me to identify where i am going wrong
dashboard.handlebars code--
<ul class="small-block-grid-2 medium-block-grid-2 large-block-grid-2" style="text-align:center;">
<li>
<div class="chart" data-percent="{{#getPercent reward_point.point_achived reward_point.point_available}}">
<span>{{#getPercent reward_point.point_achived reward_point.point_available}}%</span>
<span style="font-size:.5em;display:inline-block;">{{reward_point.point_achived}}</span>
<span style="font-size:.5em; color:#005390; display:inline-block;">/{{reward_point.point_available}} RP</span>
</div>
</li>
<li>
<div class="chart" data-percent="{{#getPercent calorie_budget.point_achived calorie_budget.point_available}}">
<span>{{#getPercent calorie_budget.point_achived calorie_budget.point_available}}</span>
<span style="font-size:.5em;display:inline-block;">{{calorie_budget.point_achived}}</span>
<span style="font-size:.5em; color:#005390; display:inline-block;">/{{calorie_budget.point_available}} cal</span>
</div>
</li>
<li>
<div class="chart" data-percent="{{#getPercent 30_day_challenge.point_achived 30_day_challenge.point_available}}">
<span>{{#getPercent 30_day_challenge.point_achived 30_day_challenge.point_available}}</span>
<span style="font-size:.5em;display:inline-block;">{{30_day_challenge.point_achived}}</span>
<span style="font-size:.5em; color:#005390; display:inline-block;">/{{30_day_challenge.point_available}} complete</span>
</div>
</li>
<li>
<div class="chart" data-percent="{{#getPercent physical_activity.point_achived physical_activity.point_available}}">
<span>{{#getPercent physical_activity.point_achived physical_activity.point_available}}</span>
<span style="font-size:.5em;display:inline-block;">{{physical_activity.point_achived}}</span>
<span style="font-size:.5em; color:#005390; display:inline-block;">/{{physical_activity.point_available}} min</span>
</div>
</li>
</ul>
error in cmd--
Error: Parse error on line 34:
</ul> </li>
----------------------^
Expecting 'CONTENT', 'COMMENT', 'OPEN_BLOCK', 'OPEN_INVERSE', 'OPEN_ENDBLOCK', '
OPEN', 'OPEN_UNESCAPED', 'OPEN_PARTIAL', got 'EOF'
at Object.parseError (C:\Users\User\AppData\Roaming\npm\node_modules\handleb
ars\dist\cjs\handlebars\compiler\parser.js:107:11)
at Object.parse (C:\Users\User\AppData\Roaming\npm\node_modules\handlebars\d
ist\cjs\handlebars\compiler\parser.js:159:22)
at HandlebarsEnvironment.parse (C:\Users\User\AppData\Roaming\npm\node_modul
es\handlebars\dist\cjs\handlebars\compiler\base.js:12:17)
at precompile (C:\Users\User\AppData\Roaming\npm\node_modules\handlebars\dis
t\cjs\handlebars\compiler\compiler.js:435:17)
at HandlebarsEnvironment.hb.precompile (C:\Users\User\AppData\Roaming\npm\no
de_modules\handlebars\dist\cjs\handlebars.js:22:12)
at processTemplate (C:\Users\User\AppData\Roaming\npm\node_modules\handlebar
s\bin\handlebars:188:78)
at C:\Users\User\AppData\Roaming\npm\node_modules\handlebars\bin\handlebars:
194:3
at Array.forEach (native)
at Object.<anonymous> (C:\Users\User\AppData\Roaming\npm\node_modules\handle
bars\bin\handlebars:193:8)
at Module._compile (module.js:456:26)
You are calling your getPercent-helper with a hash in front of it which makes it a block-statement which then in turn would need to be closed using {{/getPercent}}. Since there shouldn't be any need for it to be a block you probably could just remove the hash from your template.
<div class="chart" data-percent="{{getPercent reward_point.point_achived reward_point.point_available}}">
<span>{{getPercent reward_point.point_achived reward_point.point_available}}%</span>
<span style="font-size:.5em;display:inline-block;">{{reward_point.point_achived}}</span>
<span style="font-size:.5em; color:#005390; display:inline-block;">/{{reward_point.point_available}} RP</span>
</div>

Resources