I am working on a learning certificate within SAP successfactors, In this tool I can type HTML and CSS. I cant use javascript.
I want to print the word 'Instructor' if the field <INSTRUCTOR_NAME/> isnt populated and print the field contents if it is populated.
I am really struggling because I don't know CSS or HTML. Any help is appreciated, thanks!
This is the line I am having problems with.
<p class="instructor-name" ><span data-show-if="<INSTRUCTOR_NAME/> = NULL">Instructor</span></p>
I want it to only populate the word 'Instructor' if the field is not populated, but it is showing the word 'Instructor' every time weather the field is populated or not.
I have tried:
<p class="instructor-name" ><span data-show-if="<INSTRUCTOR_NAME/> IS BLANK">Instructor</span></p>
<p class="instructor-name" ><span data-show-if="<INSTRUCTOR_NAME/> IS NOT PRESENT ">Instructor</span></p>
<p class="instructor-name" ><span data-show-if="<INSTRUCTOR_NAME/> = """>Instructor</span></p>
<p class="instructor-name" ><span data-show-if="<INSTRUCTOR_NAME/> ==""">Instructor</span></p>
<p class="instructor-name" ><span data-show-if="<INSTRUCTOR_NAME/> IS NULL">Instructor</span></p>
<p class="instructor-name" ><span data-show-if="<INSTRUCTOR_NAME/> = NULL">Instructor</span></p>
<p class="instructor-name" ><span data-show-if="!<INSTRUCTOR_NAME/>">Instructor</span></p>
all of these show the word 'Instructor' when there is data in the INSTRUCTOR_NAME field.
FULL CODE:
body {
margin-top: 0px;
margin-left: 0px;
text-align: center;
font-family: 'Arial Unicode MS';
}
div#content-wrapper {
margin-right: 20px;
margin-left: 20px;
}
h1 {
font-size: 28px;
font-style: bold;
margin-top: 20px;
font-weight: normal;
text-align: center;
}
h2 {
font-weight: normal;
font-size: 24px;
margin-top: 30px;
font-style: italic;
text-align: center;
}
h3 {
font-size: 28px;
margin-top: 19px;
font-weight: normal;
text-align: center;
margin-bottom: 0px;
margin-left: 0px;
white-space: nowrap;
word-spacing: normal;
style="display: inline-block";
}
h4 {
font-weight: normal;
font-size: 24px;
font-style: italic;
text-align: center;
margin-top: 0px;
margin-left: 0px;
margin-bottom: 0px;
}
h5 {
font-size: 28px;
font-style: bold;
font-weight: normal;
text-align: center;
margin-top: 0px;
margin-left: 0px;
margin-bottom: 0px;
}
p.completion-date {
font-weight: normal;
margin-top: 30px;
font-size: 19px;
}
p.instructor-name {
font-size: 19px;
text-align: center;
margin-top: 0px;
display: inline-block
}
p.item-id {
font-size: 19px;
font-style: bold;
margin-top: 0px;
}
p.divider {
font-size: 24px;
padding-top: 5px;
font-style: bold;
margin-top: 0px;
margin-left: 0px;
margin-bottom: 0px;
}
#midinit {
font-size: 28px;
margin-top: 19px;
font-weight: normal;
text-align: center;
margin-bottom: 0px;
margin-left: 0px;
max-width: 18px;
overflow: hidden;
white-space: nowrap;
width: 18px;
overflow: hidden;
text-overflow: clip;
display: inline;
display: inline-block;
}
#name {
font-size: 28px;
margin-top: 19px;
font-weight: normal;
text-align: center;
margin-bottom: 0px;
margin-left: 0px;
padding-right: 5px;
padding-left: 5px;
}
#midinit,
#name {
display: inline-block;
}<div id="content-wrapper">
<h1>Certificate of Completion</h1>
<h2>This certifies that</h2>
<p id="name">
<USER_FIRST_NAME/> </p>
<p id="midinit">
<USER_MIDDLE_INITIAL/> </p>
<p id="name">
<USER_LAST_NAME/>
</p>
<h4>Has successfully completed</h4>
<h5>
<CPNT_TITLE/>
</h5>
<p class="item-id">
<CPNT_ID/>
</p>
<p class="completion-date">Completed on
<COMPLETION_DATE/>
</p>
<p class="divider">___________________________________________________</p>
<p class="instructor-name">
<INSTRUCTOR_NAME/>
</p>
<p class="instructor-name"><span data-show-if="<INSTRUCTOR_NAME/> = NULL">Instructor</span></p>
</div>
To achieve this in HTML and CSS without using JavaScript, you can use the CSS pseudo-class :empty to detect if the <INSTRUCTOR_NAME/> field is empty. You can then use the :before pseudo-element to add the text "Instructor" before the
tag that contains the <INSTRUCTOR_NAME/> field.