Support Questions
Find answers, ask questions, and share your expertise
Announcements
Alert: Welcome to the Unified Cloudera Community. Former HCC members be sure to read and learn how to activate your account here.

Cloudera Search in CDH 5.2 - Issue with HTML layout formatting from fields with html content

Cloudera Search in CDH 5.2 - Issue with HTML layout formatting from fields with html content

New Contributor

Hey Guys,

Looking for some help on Cloudera Search with HTML layout formatting from pre-formatted index fields with html tags.

Scenario:

In CDH 5.0, it was nicely working with fields with HTML content. Whether in CDH 5.2 (i.e. Hue 3.6) after upgrade, same layout is not working as like previously. No more HTML content from field rendering as html. It is now considering HTML as like string and printing all html tags in search result.

I also tried to implement JavaScript / jQuery script to process it. Within Edit mode only it's working , but while in View mode, it is just corrupted the layout. Tried both approach; with inline javascript and javascript in header (from css/js tab). Unfortunately, both approach fails here :(.

Is there way of solving this issue ? Will new version (Hue 3.7 ) resolve this issue (same as in CDH 5.0)? Your any comment and help is highly appreciated.

 

Thanks alot.
Raby

2 REPLIES 2

Re: Cloudera Search in CDH 5.2 - Issue with HTML layout formatting from fields with html content

Could you share the minimal template and code that breaks?

We are still using the same code in our examples and it works fine: e.g.
http://demo.gethue.com/search/?collection=20000001

Romain

Re: Cloudera Search in CDH 5.2 - Issue with HTML layout formatting from fields with html content

New Contributor

Thanks a lot Romain for quick response.

 

 

Here is my scenario:

 

I have done indexing for one to many RDMS master detail relational data into Solr Collection. I wanted to show Child records in tabular form with pre-formatted html tags.

 

e.g,


One sample is like this :


<div class="row-fluid">
<div class="row-fluid">
<div class="span12">

<!-- Add your HTML Here -->
   <div id="container">
        <h3>
              <span>{{fname}} {{lname}}</span>
              <div class="text">{{current_title current_department}}</div>
       </h3>

       <div class="clearFloat"/>
      <div >
            <div id="salary" class="history left_margin">
                <span class="title">History of Salary </span>
                {{salaryHistory}}
      </div>
<!-- template html end here -->
</div>
</div>
<br>
</div>


Where
{{salaryHistory}} is storing as :

{{salaryHistory}} = "<ul>
<li>Salary From : 05-20-2012</li>
<li>Salary To : 01-30-2014</li>
<li>Salary : 60000</li>
</ul>
<ul>
<li>Salary From : 05-20-2010</li>
<li>Salary To : 05-19-2012 </li>
<li>Salary : 55000</li>
</ul>";


CSS :

/* add your css Here */
#container{ font-family:Arial; font-weight:normal;}
h3{border:1px solid #d1d2d6;background-color:#F1F2F6;padding:10px 15px; display:inline-block;min-width:250px;}
h3 .text{font-size:70%;color:#3498db; }
.clearFloat{clear:both; height:2px; }
.history {border:1px solid #d1d2d6;padding:4px 8px;display:inline-block; }
.history .title{ font-weight:bold; border-bottom:2px solid #6D6; font-size:12px; margin-bottom:2px; display:inline-block; }
.left_margin {margin-left:2px;}
.right_margin {margin-right:10px;}
.hr{border-bottom:2px dashed #CCC; height:4px;}
#salary ul
{
margin: 1px;
padding: 2px 1px;
list-style-type: none;
text-align: left;
min-width:250px;
}

#salary ul li {
display: inline-block; padding:4px 6px ; border:1px dotted #DDD; min-width:75px; font-size:11px;
}


This above code just prints all ul, li html tags as String in search result.

 

 

------------

Second Case :

 

use of jQuery on script section ..

However, in Edit mode, I am getting all values into object reading from elementId and It works as per requirement in tabular form. But in view mode after save, screen gets corrupted and even I can edit ( javascript error ). I need to update solr_collection values from MySql table for Hue.

if(jQuery)
{

           jQuery(document).ready(function( ) {
               jQuery(".salaryArr").each(function(){
                         jQuery('#myDiv{{empno}}').html("<ul><li>From</li><li>To</li><li>"+salary[1]+"</li></ul>");
              });
          });

}

 

 

Third Case :

Inline Javascript into Html window only works in Edit mode but Screen error on View Mode.

 

e.g. simply adding <script></script> into html will break layout in View Mode but it works in Edit mode. I can play JavaScript and jQuery funtion there in editor.

 

 

These are which I was trying but it breaks search screen for that collection.

Once again thanks a lot  and appreciated your help.

 

 

Regards,
Raby