Using HTML OR CSS, How do I test a field for populated or not? I need to print different lines depending on contents of a variable

Question

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>

Answer 1

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.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=8">
<style type="text/css">
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 ;
}

/* add this CSS */
p.instructor-name:before {
    content: "Instructor123";
}
p.instructor-name

</style>
</head>

<body>
  <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">
      <span data-show-if="<INSTRUCTOR_NAME/> != ''"><INSTRUCTOR_NAME/></span>
    </p>
    <p class="instructor-name">
      <span data-show-if="<INSTRUCTOR_NAME/> = ''">Instructor</span>
    </p>
  </div>
</body>


</html>