Surface EntityImage from CRM to CRM Portals using JS.

(0) Share

Report

Posted on by Rizwan Aarif

480

Hi Everyone,

I have a requirement where I need to surface/show entityimages from CRM to CRM Portals (footer section) but I am not able to do so. I am doing the following:-

1. Add fetchxml to get entityimage attribute from records I want

2. Converty entityimage data to Base64

3. Set it to HTML <img> tag like below

<input type="hidden" id="hdnval" value="{{result['DD.entityimage']}}">

<img id="myimg" src="";  alt="Red dot" />


var sourceofImage="data:image/jpeg;base64,[BASE64_DATA]";

document.getElementById("myimg").src =sourceofImage;

Any help and suggestion highly appreciated.

Thanks in Advance.

*This post is locked for comments

All responses (11)

Answers (2)

Saddamk206 777 on at

Like (1)

Report

RE: Surface EntityImage from CRM to CRM Portals using JS.

Hi ,

Please try this:-

http://saddamk.blogspot.com/2018/10/display-image-of-product-in-dynamics.html
Suggested answer

mmaloney on at

Like (0)

Report
RE: Surface EntityImage from CRM to CRM Portals using JS.

Figured I'd post just in case anyone else comes across this in the future. I was able to solve this on the client side using a Liquid filter and some JavaScript:

<img data-entityimage="{{ entityimage | join: ',' }}" /> <script type="text/javascript"> function toBase64(str) { if (!str) return null; var uarr = new Uint8Array(str.split(',').map(function (x) { return parseInt(x); })); return btoa(String.fromCharCode.apply(null, uarr)); } // Find any entity images and convert the byte string to base64 window.addEventListener('load', function () { document.querySelectorAll('img[data-entityimage]').forEach(function (img) { var data = img.dataset && img.dataset.entityimage; var base64data = data ? toBase64(data) : null; if (base64data) { img.src = 'data:image/jpeg;base64,' + base64data; } }); }); </script>
Verified answer

Rizwan Aarif 480 on at

Like (0)

Report

RE: Surface EntityImage from CRM to CRM Portals using JS.

Hi Justin,

I tried with this approach and It works. Actually in CRM Portals we don't get proper data in entityimage field (as in C#/SDK/API).

I have created a custom field and an on-demand workflow to run on account records as EntityImage attribute does not trigger any events and messages like create/update can't be captured anyway. So other thing is whenever you update entityimage (change image) you'll need to run that on-demand workflow to update the Base64string in custom field.

Thank you and Everyone for help and suggetions
Verified answer

Justinjose 2,707 on at

Like (1)

Report
RE: Surface EntityImage from CRM to CRM Portals using JS.

Hi Rizwan,

entityimage field type is image and in the fetchxml its shows as system.byte[] but in the webapi results its a base64 type. I dont know why its displaying different results.

There is workaround, I didnt try and I am not sure this will work.

1. Create a multi line text field

2. On create of entityimage image copy the base64 value into the multiline text field and use this field in the fetchxml. In this case no conversion needed. Can call like this

<img id="myimg" src="data:image/jpeg;base64,{{result['DD.newmultilinefield']}}" alt="Red dot" />

Thanks

Justin Jose
- Matt Bayes - 890 on at

Like (0)

Report

RE: Surface EntityImage from CRM to CRM Portals using JS.

Hi Rizwan,

I have tested this out and although the FetchXML tool displays as System.Byte[], it seems that the fetchXML tag for the portal returns the objects as a string. Unfortunately, it is reading this is one large string rather than a byte array, and any attempt to convert it can not parse the string into its corresponding array of bytes.

I may be wrong on this, but from the printout and testing that I have done, I haven't been able to get it to work.
Rizwan Aarif 480 on at

Like (0)

Report

RE: Surface EntityImage from CRM to CRM Portals using JS.

Hi Justin,

what I get from result['DD.entityimage'] is below (no conversion applied yet). Simply assigning it like you said does not work.

25521625522401674707370011109609600255219067086676587779981012201312111112251819152029263130292628283236463932344435282840554144484952525231395761565060465152502552190671999121112241313245033283350505050505050505050505050505050505050505050505050505050505050505050505050505050505050505050505050502551920178014401443134021713171255196031001511111100000000123456789101125519601811602133243554400112512304175183349656198197734113205012914516183566177193218220924036519811413091022232425263738394041425253545556575867686970717273748384858687888990991001011021031041051061151161171181191201211221311321331341351361371381461471481491501511521531541621631641651661671681691701781791801811821831841851861941951961971981992002012022102112122132142152162172182252262272282292302312322332342412422432442452462472482492502551960311031111111110000001234567891011255196018117021244347544012119012317453349618658179711319345012982066145161177193935518224021981142091022365222537241232425263839404142535455565758676869707172737483848586878889909910010110210310410510611511611711811912012112213013113213313413513613713814614714814915015115215315416216316416516616716816917017817918018118218318418518619419519619719819920020120221021121221321421521621721822622722822923023123223323424224324424524624724824925025521801231021731706309117350401651819417017715020316214021251201741238921586681075963150621465623422221321218819133152112492152517521641592374922799159159301901812422037101467891159168812374510810912012112621417623820217017525508885205102504536723916020034171120110682218714811919924217310965122141652121011871438189185242213176167381702351772311182157021824595601032121810587195106157217424192292102371531302311342261833215689164742723824139215191229931521381068120822281831888920923415162158013410131441639725024625419114991182137130722311667302512421279221388381382487088110495422523622025501371718293688416411017271801411394124155811785716415474381181734813652542916425453151164232111275618518622924230561792152202511238617416510220218292202363325501981721042482192311002257021325418116216822578241220185598220819098142206634637014518312919221193107150821271119360831982516412233935128114125431821452032051467931491747411725171136167145143202241032422188735320538694211911910121992399818319720519215720100153233612314231241170215175993227219236247121858795151240169669293109138810049158752271312371541632261350238202401102389662219243382387812511320828981869723979941661461131661395419022154235775521582961842213065061774310425020514214815111322135702011872021101121672202141492231381081102442461337614462221162559318712517017262431831542094423816349149641382271442162423321815153871887621115587125204253631952321016322321922321619518713479562412231585616923913921724890230222228471521004178569625505024314523725217115621223202153222214651402313165791011091211701055587102171461524910279460201199169246173229141012520123311668154131112111207991831954192174541463122477189709773226111576741563181951597918220181229203212496481731284849858920821601631601753721712444218197710486217301588183121207762401517384123183142241882002163521416321346118688254224126117153119112101144121991131982251421231159320169202742362224919022818616516219512321202281974122124435154936373190213671528082161561871561012822291726016763485730181216105183113193101124211254129902061641691959319781206172471195022222935021875105100204160146196304921816890190192391441922284817125438186415872165058237971568760210145241465022289562312487916520224231301032121162212271742318910711446451004514318465197731622026149256124953207889412122146111017130236169702501972201931092244120991338820846722520116825018710519719421192082331742382144015321712822120123118180208522462121101641891537371988579742066424723728515712619718687103166751318117816296056211562231781354222115321318833238238106441621967187104220730213141168162951942082005546245102316715612614911024224317512311285624717494235841071171041831293615948573291851724070114159492057014015817511413662142061098870209238109161220313064602541491655418116310422251116219144221114620924817725637422912418719312018380221912491922281825312514190190213149225242474426571361921208993882531231261812345810921711018977170401832035914923818869170106210492422251379324411327922611589240959488925217717757225131119174147193241651121513010096731074672110187786541239818023811617351237109523450137241521579110524795240167821724118323298135474514711932125749369241272112812523161254149742238250180235181177188148250118253434776190145266412665261918119912611249245168902302289215337992303078250207234233943992849024711844959251236718410317716911620517710587247109247196102362462077249213572381331949865243141352101535193935424621615818792123243901146275462324259431313411504416011061200233244171118250148170160239361692066110748462326021022412224142301363954249144991202511852519918910742106721498795359586190231181702172381365261251422161391507620211623144612071672431701371141033891131187103391401106117924821230997941102108146114774021118012112211157935321214938349545142835616767336679252054222114523144137181672412912817912573230162219243577167561711762273818110385161198172211765181222106829110677121032293960251213772623920399158128114731681738124518912582511331022291352401682399274149234751559822821011912327119247231788372041312478923467249205812091161352154726246240149128159149631892550214174191881302187763236123641399664614921017818859113144724712001161722294710372011852041662317720110410812719461166136118531725911323313063262281971146242253021811320126992414921511824423715921018312477172823719019911226731908632243183191248875716923419976211146888125166929919019724525212212611616842174214221153193206522201662475411617172108117153244862122109148119878732549517310112015581154818111697180124140188131142254198169941062419023214416516822160167112155601342271132541491531321193222165205219517126254240227223252771184278791571481672161141385752237862204520314814806020496143198179252672281801452032016270219181216465114213525012620244213527113637198155402425120084552321075425491172810219475134951553411250581131992276958828219016518614521213421822656179351981784822585250151271221582278014624052243197142132532232001551221421568220111910910516419529188732461371261211013536142021511119417911188208185146224664391691732121211811771471711118285136201321117847811419917518152136196113582011891362492081421351832151818614667211701412201913816413720250203107112012294610110219395254181107202206119899347792341961332122378543529205142213605523914518109172550115104193170134899002328036205128311924720150146205167220178108311053998150231111191214135111612539716946221237247125229168351874232915201811422122002282203612710884821882099312114622854565720610520125120021460536140113822158388212215149110175255002082112217623417520224315920218663157122157108243159245210307162246312141855663114721152077843651109334243852161683254225211233922131622221451031008215623492161911531202171549545492097956169832369010918488204718557981071521438914720225320478237221136561686318093164249195511472527018425313370302062531162319618325110018340191622731165968238111165502114687110164415322023311817775391573411114812915143194251102201151071081551671019459245171142465287341412172059013202205233216243235291012120217216820018523219524170122139448715998961451832041969618531211154236111252652226438485652132002248714211532132281514673243373614723210717413223182242154177532114613821025501441411101961771191981456231245166364622318566931372496428147233869827227145122978225238421751562462151142100505471189116382221328514034148139901331642087120115149737696236756291798420440321335514518825222824616911011223221512566511011422522288511715689198226882271531791291871451305813816839100186152851481211561542102192550932032507349922207218220995170353213717824143239471612416845172140186121219521451801601351419523917206492331932521701072422613721141156235416336209201180231250159110138118418915196518110024913911163123240621351421811055424451151363512215718221520320225118531731811831532876211211372712125118713625252137197542465689147108254100193852186411922985114319518971201454124220395721918415858244254701754515277249185136519697796523778879017783167261452281388642203264129771941772181722021675620020662180239493415217818510131119611052471711102108452121362111613923019919121416834194982119161203122773362087882165521462157711722219816517282220191203140158153611079011813022371161812238225182247241701502142512223182422312824124912384250168731112151021142022812312724517114277741051166112069198154238201109141192176146100149151203233207959091123185238165851508114219148207243166222781762332092171932432022311161522365915173831302520419434142316311910520510216311622824454230247172110221106119541752291941141611148971791739992106166667520293171962219123316249881822015922525423921525242142159166193117331466951521461132101791353623521512521836223216503618610599406202452455337133175158205242345725415922593194248957918414311114885177247144224138173255081702332474342761961030158132122261072573197165161204190592012341142478043254254219140114202631341791332191935612747231298281312379015418113224611571371791801552198209253226125621819423746109212271671402024891106283233158230186169181101212851551141065891953353123105180243182211876120416837108182742316012512017090115692820536176139137115181351151292482131552512141911877764157219662281031666492508382914111046239371211112110017016135030157184252301801355537165185203631417423579202219147225144162562034825122652591625013115610322316510023710584249501320211913196012511410610265272852422046118231229201254117571311022531525031772313114258254117180266885139170189121711319320624542512013120218119617754351161211126223515861187843142204232161149676471741538580141201189112145011212742422015444294182135452386241981791522051091331091558820193255062244881251382502466549120247708972282231402121920419010315945993561925151159174106579912023022038020120131811012031278310577167162867991127951294118418410302281247120199302131631062621823187152181721721711592263699250213102146861811378323188136145211391817911123122320726574514314971645101599117858169392051022382002362011941247174183841311316213913688164177151521692281751138921817286214247182182240133271923135169571732718970316719910511019322814414124825421211998611082140162142133311178823117223715010562117361231023511618938142511411981272061062729531026421624918728861731702493910522115815718417410624516563132154146210200178204246801512498984115235801951252216324772721231772342236523323925502351722219992729948901831575722725314925021548177223194133158241331431695721496055521114525138167117119185208701591024488432219274205412722020724920117470253146233371465767172114212471112461911915916721102721221229191145142249354917155961205624417215125319811811315819024523220916710312322114211092183107651472201712331139011213055102962315139161631352018315997125222019814199146501242462072053879244169108182222941999691402822920122732186390161115413321721616123993113183509111760218177781473115105110165227116177201112223482344702071081242202452316317372132170521922491062346628281858143243235809520510912397191583869229131281472331437446301231481836927322422413079111987123125310537167991202051971801819117112119119217737188150110209512308625120315858103242244538622720473246914114512216923314399781382292920293238231016029016015823035810010917917117149631231597410559236214267217221591261221111918212316968482218359252002021854131142106189141148151821181509812214181327585181155205118150226108242481982231221871677124215335186882814048223180255024523211422913917614861181100229178919220815022611613923695391534611144507957228211161212173108237721801391252111212114120962131185170119112911391018815912313118515211630213291811795724970107151150465510316310511511416516024418315487222197219113251198186125476520621799915410479178232835940220187741472452112219586158107182466647180168230552511732442331319211710620611324711691147719847144220889917618110510114436104508918787159234154132250149236175192032844126857183189731231702342614821946228324399202198213723387116248124191222430235140138412118423512131471078431541221829838151126203186411191599138143236232801832714918910023924821516221716518023414197131426962759189247912001702342231941955310725125441002292145142902305414724740191421241642144223350222951391041981231791221590216182212133169251612342642001172525219710723247110162751822820221665142661312541277492242164155702133118621171331702334716715716097716789235229739752114179252041388414719280147124217565215967317393156141322534313614222225343316672219573314256237932043571958339777792167246721741092086952107129243431571843417179416320313838986011235872301821419710113713215625220673165862441854721811613821334197313621321771127115210186842188770191951987421020921911697205166205230162322229948801538172922331310499736412661502462051112201062142189418124219646771782377123695187123243891512614921321324421519421841174220271242550262190146722032342122015714923881187141982516221025163200981891560115912215410011521712517220726326013460213875411115201230543209135591702221334114222368338811426214915773190752465941838116821821352191227169109196911110915010921915720025213310423215186214204902321619122219332126858225421452213238341352741523022322821423015796191102101144254154231173561683625015516423622825014818122189532515022220898213123129141231214179236100146111731713314119319710510411843361095212911847863916017220568137117571641822716336109351900202252031735317851042321117910024710092527410019920412356292541811022052632621020113888012014212097251521371312111185734175711751786715217312143142571971152121638517152795321413320320313717239142721641947211287251931672071706616927201361271043913322118330230184219173662542502322031142191131941702402012383160188134217143155108952978239254181110176150742501793110615423010619985225221451101083919118624920413217011024429255063229851421696214690491071116020086321319022261811682119913051491881801118311112486461671121433915311724711524264135230127169236433616542141731041052721718515511519325316716736230231114200160132143133722217845252502421851022251244235841091172966452071422501206419140250842431201398810412417742196151161403249214138157721876914322281218227117242376131051181111881511125418987210237174531392111111441361711843414012081261242141481181081161841502242433424913623721214612142141501292115815117071441514911014410821692103158156125113671692036150172115111151154251116491813111205106187199204621496681011231058656193109187759915626244125822347142648572271292352181793521122621144210751338211741281312193611324986112196201199823356242222742051561242501081501861061881452272471603245725243119671791426155237206193857322821417513996142455641929942227211371111116125414615075381921641902041252362472550621801498786149229166165669220918811649237111812382281212114288183316820510422323522277183147107313195671237244170451652202182211701481009612056173200236981891811071218036192100102141631652041642456962110755499105861789570811021114415650131198125197116862222849237101425013192175147117166221231291533614024269117186391411092231091901621302571737220111175167242165905331189798499821642261825124529266012624511822918214725214110260551225917423219624031186122312061871259317317510814314820223419924878126149708418222310218592169224551651032867731154955019019853160211117161251172451922281981957234611271020021218015317316511420314911084129792145224717718423491010125174802279924635235909171127104105837150129121101112065614414227249311941862132372051313682119180143255217

I don't know what format/type it is. In fetchxml tool I see System.Byte[] as in below
Suggested answer

Justinjose 2,707 on at

Like (0)

Report
RE: Surface EntityImage from CRM to CRM Portals using JS.

Hi Rizwan,

I am not sure whats your exact requirement and based on following code I don't think so that you need to store in value in hidden field. Can you trying following code.

{% if query_events.results.entities.size > 0 %} <marquee behavior="scroll" direction="left"> {% for result in query_events.results.entities %} <input type="hidden" id="hdnval" value="{{result['DD.entityimage']}}"> <img id="myimg" src="data:image/jpeg;base64,{{result['DD.entityimage']}}" alt="Red dot" />
{% endfor %}
</marquee>
{% endif %}

if this doesn't work can you please post base64 result from {{result['DD.entityimage']}}

Thanks

Justin Jose
Rizwan Aarif 480 on at

Like (0)

Report
RE: Surface EntityImage from CRM to CRM Portals using JS.

Hi Justin,

1. Yes (as have to display images of all sposors (accounts)

2. In a hidden field so I can retrieve it in Js

3. Sure. It is below

Fetchxml:-

{% fetchxml query_events %} <fetch version="1.0" output-format="xml-platform" mapping="logical" > <entity name="vin_sponsorship" > <attribute name="vin_sponsorshipid" /> <filter type="and" > <condition attribute="vin_displayonwebsite" operator="eq" value="1" /> </filter> <link-entity name="account" from="accountid" to="vin_sponsor" alias="DD" > <attribute name="accountid" /> <attribute name="entityimage" /> <attribute name="name" /> </link-entity> </entity> </fetch> {% endfetchxml %}

Liquid + HTML:-

{% if query_events.results.entities.size > 0 %} <marquee behavior="scroll" direction="left"> {% for result in query_events.results.entities %} <input type="hidden" id="hdnval" value="{{result['DD.entityimage']}}"> <img id="myimg" src=""; alt="Red dot" /> {% endfor %} {% endif %} </marquee>

Script:-

<script> var rawdata=document.getElementById("hdnval").value; //alert("data recd from crm is:--" + rawdata); var sourceofImage="data:image/jpeg;base64," +base64Encode(rawdata); //alert("after encoding 54 is:- " +sourceofImage); document.getElementById("myimg").src =sourceofImage; function arrayBufferToBase64(buffer) { let binary = ''; let bytes = new Uint8Array(buffer); let len = bytes.byteLength; for (let i = 0; i < len; i++) { binary += String.fromCharCode(bytes[i]); } return window.btoa(binary); } function base64Encode(text){ if (/([^\u0000-\u00ff])/.test(text)){ throw new Error("Can't base64 encode non-ASCII characters."); } var digits = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/", i = 0, cur, prev, byteNum, result=[]; while(i < text.length){ cur = text.charCodeAt(i); byteNum = i % 3; switch(byteNum){ case 0: //first byte result.push(digits.charAt(cur >> 2)); break; case 1: //second byte result.push(digits.charAt((prev & 3) << 4 | (cur >> 4))); break; case 2: //third byte result.push(digits.charAt((prev & 0x0f) << 2 | (cur >> 6))); result.push(digits.charAt(cur & 0x3f)); break; } prev = cur; i++; } return result.join(""); } </script>

Script may be not complete but I tried with this, If I can get single image rendered then can do the same for all.
Justinjose 2,707 on at

Like (0)

Report

RE: Surface EntityImage from CRM to CRM Portals using JS.

Hi Rizwan,

1. Are you looping through fetchxml result?

2. Are you storing result value some where?

Can you paste the full code at least fetchxml and javascript part.

Thanks

Justin Jose
Rizwan Aarif 480 on at

Like (0)

Report
RE: Surface EntityImage from CRM to CRM Portals using JS.

Hi Justin,

I am getting it using a fetchxml query. DD is alias for the related entity in my fetch.

I tried hardcoding base64 value (got from crm web api) and image renders properly. But in CRM Portals it does not seem to work. Below is my fetchxml:-

{% fetchxml query_events %} <fetch version="1.0" output-format="xml-platform" mapping="logical" distinct="false" > <entity name="sponsorship" > <attribute name="sponsorshipid" /> <filter type="and" > <condition attribute="onwebsite" operator="eq" value="1" /> </filter> <link-entity name="account" from="accountid" to="sponsor" alias="DD" > <attribute name="accountid" /> <attribute name="entityimage" /> <attribute name="name" /> </link-entity> </entity> </fetch> {% endfetchxml %}