View Source

<h1><span class="heading-subtitle">OOTS User journey</span>Key steps in the once only journey</h1>
<p class="lead" style="max-width: 840px; margin-bottom: 60px;">An overview of the seven steps in the Once-Only Technical System (OOTS) journey.</p>

<div><ul>
<li><div class="icon-checked"><span><img src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/617087458/ico-check_guidance-pages.svg" alt=""/><div></div></span><a href="https://ec.europa.eu/digital-building-blocks/sites/display/OOTS/User+Journey+-+Step+1+Authentication">1. Authentication</a></div></li>
<li><div class="icon-plus-vertical_line"><span><img src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/617087458/my_location.svg" alt=""/><div></div></span><a>2. Evidence location</a></div>
<ul class="subOptions">
<li data-index="1" class="active">OOTS</li>
<li data-index="2">Select member state</li>
<li data-index="3">Select evidence type</li>
<li data-index="4">Choose evidence provider</li>
<li data-index="5">Additional attributes</li> 
<li data-index="6">Select evidence provider</li>
</ul>
</li>
<li><div class="icon-checked"><span><div></div></span><a href="https://ec.europa.eu/digital-building-blocks/sites/display/OOTS/User+Journey+-+Step+3+Evidence+Request">3. Evidence request</a></div></li>
<li><div class="icon-checked"><span><div></div></span><a href="https://ec.europa.eu/digital-building-blocks/sites/display/OOTS/User+Journey+-+Step+3+Evidence+Request">4. Redirection</a></div></li>
<li><div class="icon-checked"><span><div></div></span><a href="https://ec.europa.eu/digital-building-blocks/sites/display/OOTS/User+Journey+-+Step+5+Preview">5. Preview</a></div></li>
<li><div class="icon-checked"><span><div></div></span><a href="https://ec.europa.eu/digital-building-blocks/sites/display/OOTS/User+Journey+-+Step+6+Evidence+Response">6. Evidence response</a></div></li>
<li><div class="icon-checked"><span><div></div></span><a href="https://ec.europa.eu/digital-building-blocks/sites/display/OOTS/User+Journey+-+Step+7+Submit">7. Submission</a></div></li>
</ul></div>

<h3>2. Locate the evidence type and evidence provider</h3>
<p>The procedure portal must identify what to ask for (evidence type), and who to ask it from (evidence provider).</p>

<div id="tab-one" class="accordion-tab active" data-index="1"><h5>Users can choose to use the Once-Only Technical System</h5><img src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/617087458/chevron.svg" alt="up arrow"/>

Using the Once-Only Technical System is voluntary – users can choose to use the Once-Only Technical System or upload the required evidence manually.

<img class="playGIF"src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/617087458/illu-21-choose-oots.gif" alt=""/>

<a data-index="1" class="btn link-upward primary"><span>Go to previous step</span></a><a  data-index="1" class="next-tab link-downward primary"><span>Go to the next step</span></a>

</div><hr>

<div id="tab-two" class="accordion-tab" data-index="2"><h5>User indicate in which Member State their evidence is located</h5><img src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/617087458/chevron.svg" alt="up arrow"/>

<p>For each procedural requirement, the user needs to select the Member State where their evidence is issued. If there are multiple evidences required, the user needs to be able to select the provider Member State for each evidence.</p>

<img class="playGIF"src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/617087458/illu-24-location.gif" alt=""/>

<a data-index="2" class="previous-tab link-upward primary"><span>Go to previous step</span></a><a data-index="2" class="next-tab link-downward primary"><span>Go to the next step</span></a>

</div><hr>

<div id="tab-three" class="accordion-tab" data-index="3"><h5>Determining the evidence type</h5><img src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/617087458/chevron.svg" alt="up arrow"/>

<p>If the portal does not already know what evidence type to request, the procedure portal sends a query to the evidence broker. The evidence broker allows the procedure portal to look up the right evidence type(s) to request from the evidence provider. </p>

<img class="showIMG"src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/617087458/illu-25-evidence-type.png" alt=""/>

<a data-index="3" class="previous-tab link-upward primary"><span>Go to previous step</span><a data-index="3" class="next-tab link-downward primary"><span>Go to the next step</span></a>

</div><hr>

<div id="tab-four" class="accordion-tab" data-index="4"><h5>Determining the evidence provider</h5><img src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/617087458/chevron.svg" alt="up arrow"/>

<p>To determine who to send the request for evidence to, the portal sends a query to the data service directory (DSD) with the evidence type (provided by the evidence broker) and Member State. The DSD returns the name of the evidence provider and the ID of the eDelivery Access point, or any additional attributes required to locate the evidence provider. </p>

<img class="showIMG"src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/617087458/illu-26-evidence-provider.png" alt=""/>

<a data-index="4" class="previous-tab link-upward primary"><span>Go to previous step</span></a><a  data-index="4" class="next-tab link-downward primary"><span>Go to the next step</span></a>

</div><hr>

<div id="tab-five" class="accordion-tab" data-index="5"><h5>Additional attributes</h5><img src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/617087458/chevron.svg" alt="up arrow"/>

<p>In some cases, Member States may need additional information from the user to determine the right evidence provider (so-called additional attributes). For example, users may be required to input a region or other piece of information to help locate the right provider. Member States must register these attributes in the data service directory (DSD). When defined, the DSD will respond to a query from a portal with a request for these additional attributes. The portal must in turn, request them from the user. The portal will then use the user's input to query the DSD again to define the relevant evidence provider(s).</p>

<img class="playGIF"src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/617087458/illu-27-attributes.gif" alt=""/>

<a data-index="5" class="previous-tab link-upward primary"><span>Go to previous step</span></a><a data-index="5" class="next-tab link-downward primary"><span>Go to the next step</span></a>

</div><hr>

<div id="tab-six" class="accordion-tab" data-index="6"><h5>Select the evidence provider</h5><img src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/617087458/chevron.svg" alt="up arrow"/>

<p>If the data service directory returns multiple evidence providers for an evidence type, the user will be asked to select the relevant evidence provider from a list. For example, if university diplomas are stored in each university rather than in a central database, the user will be asked to select the right university to request the evidence from.</p>

<img class="playGIF"src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/617087458/illu-28-provider.gif" alt=""/>

<a data-index="6" class="previous-tab link-upward primary"><span>Go to previous step</span></a><a class="link-downward primary"><span>Go to the next step</span></a>

</div><hr>

<a href="https://ec.europa.eu/digital-building-blocks/sites/display/OOTS/User+Journey+-+Step+1+Authentication" class="btn ghost"><span class="ico-cta-backward"></span><span>Previous step</span></a>

<a href="https://ec.europa.eu/digital-building-blocks/sites/display/OOTS/User+Journey+-+Step+3+Evidence+Request" class="btn primary"><span>Next step</span><span class="ico-cta-forward"></span></a>

@media screen and (max-width: 400px) {
	.previous-next-steps { flex-direction: column!important; }
}

@media screen and (max-width: 518px) {
	.accordion-content-footer { display: none!important;}
	.accordion-content-footer p { flex-direction: column; }
	.previous-tab { justify-content: flex-start!important; }
	.next-tab { justify-content: flex-end!important; }
	.playGIF { min-width: 161px!important; }
	.showIMG { min-width: 161px!important; width: 100%;}
}

@media screen and (max-width: 768px) {

  .active .accordion-content-card { justify-content: start!important; }
}

@media screen and ( max-width: 768px) {
 	#tab-five .accordion-content-body > div:nth-child(2) { margin-top: 0px!important; }
	#tab-six .accordion-content-body > div:nth-child(2) { margin-top: 0px!important; }

}

@media screen and ( max-width: 945px) {
	.accordion-content-body { flex-direction: column; }
	.accordion-content-card { justify-content: flex-start!important; }
}

@media screen and (max-width: 1170px) {
	#guidance_navigation { display: none!important;}
	#guidance_navigation + div { display: none; }
}


/*
 @media screen and ( min-width: 1171px ) and ( max-height: 850px ) {
	#guidance_navigation { position: sticky!important; top:0; left:none; }
	#guidance_navigation + div { width: 0px!important; }
}
*/


@media screen and (min-width: 1171px ) and ( max-width: 1250px) {
		.showIMG { width: 120%; }
}

@media screen and (max-width: 1330px) {
	#guidance_navigation { width:23%!important; }
}


@media screen and (max-height: 1200px) {

	#guidance_navigation p {}
	#guidance_navigation li { margin-bottom: 0.9rem!important; }
}

@media screen and (min-width: 2200px) {
 #guidance > div > div > div:nth-child(2) { display: none; }
}

#footer-main { position: relative; }
h3 { font-size: 24px!important; }
#guidance_accordion > p:nth-child(3) { font-size: 18px!important; }

.section {padding-top: 0px!important; padding-bottom: 0px!important; }

#introduction h1 { font-size: 40px; margin-bottom: 12px; }

#guidance_navigation { position: fixed; height: fit-content!important; left: 0; display: flex; align-items: flex-end; background: #00284A; border-radius: 0px 40px 40px 0px; max-width: 410px; min-width:260px;}
#guidance_navigation > div { width: 254px; }
#guidance_navigation ul { list-style: none; margin: 0; padding: 0;}
#guidance_navigation li { margin-bottom: 1rem; cursor: pointer; }
#guidance_navigation a {text-decoration: none; color: #ffffff; font-size: 16px; }

#guidance_navigation .icon-plus-vertical_line { display: flex; gap: 10px; position: relative; }
#guidance_navigation .icon-plus-vertical_line > span > img { position: absolute; top: 8px; left: 8px;}
#guidance_navigation .icon-plus-vertical_line > span > div { display: inline-block; position: absolute; top: 32px; left:15px; border-left: 2px solid rgba(255, 255, 255, 0.25); height: 40px;}
#guidance_navigation .icon-plus-vertical_line > span { width: 32px; height: 32px; border-radius: 32px; background: rgba(255, 255, 255, 0.25); position: relative;}

#guidance_navigation .icon-checked { display: flex; gap: 10px; position: relative; }
#guidance_navigation .icon-checked > span > img { }
#guidance_navigation .icon-checked > span > div { display: inline-block; position: absolute; top: 32px; left: 16px; border-left: 2px solid rgba(255, 255, 255, 0.25);}
#guidance_navigation .icon-checked > span { width: 32px; padding-left: 12px; }

#guidance_navigation li > ul { margin-block-end: 1em; padding-inline-start: 62px; }
#guidance_navigation + div { max-width: 250px; }
.subOptions .active { color: rgba(255, 255, 255, 0.55);} 

.accordion-container { margin-top: 4rem; max-width: 836px;}
.accordion-container > div {position: relative; cursor: pointer; padding: 1rem 1rem 0 1rem; }
.accordion-container > div > div > img { position: absolute; right: 30px; top: 52px; }
.accordion-container h5 { font-size: 18px; color: #00284A; max-width: 80%; padding-left: 25px;}
.accordion-container hr { margin-bottom: 3rem; }
.accordion-tab > img { transform: rotate(180deg); }
.accordion-wrapper-activated { background: #f3f4f7; border-radius: 20px; padding-top: 2rem!important; margin-bottom: 2rem; position: relative;}
.accordion-wrapper-activated .active > img {transform: rotate(360deg); top: 62px; right: 24px; }
.accordion-wrapper-activated hr { display: none; }
.accordion-tab .active { margin-bottom: 5rem; }
.accordion-content-deactivated { display: none; }

.active .accordion-content-deactivated { display: flex; flex-direction: column; justify-content: space-between; }
.active .accordion-content-footer p{ display: flex; justify-content: space-between; }
.active .accordion-content-text { margin-top: 2rem; }
.active .accordion-content-text p { padding-left: 25px; }
.active .accordion-content-card {display: flex; justify-content: center; align-items: center; height: inherit!important; padding-top: 0px; padding-bottom: 0px;}
.active .accordion-content-card > p { margin-bottom: 0px; }



.centered-specific { height: auto!important; display: flex; align-items: center; }


.previous-next-steps { max-width: 836px; display: flex; flex-direction: row; justify-content: space-between; }
.previous-step-btn .ghost { background: #E3E6EB!important; }
 .next-step-btn {max-width: 836px; }
.next-step-btn p{display: flex; justify-content: end; }
.ico-arrow-north-primary { background-size: 15px!important; }
.ico-arrow-south-primary { background-size: 15px!important; }

.playGIF { width: 100%; border-radius: 12px; max-width: 330px; min-width: 290px;}
.showIMG { border-radius: 12px; max-width: 330px; min-width: 250px; }

.accordion-content-footer > p > a:first-child { visibility: hidden; }

.sticky-fixed { position: absolute!important; }
#main-content > p:last-child { margin:0px; }

<script> 
$('.next-tab').on('click', function(e) {
  let self = this;
  let tabsLength = $(".subOptions li").length;
  e.stopPropagation() 
  $('.subOptions li').each(function() {
		this.classList.value = '';
    if(this.getAttribute('data-index') == (+self.getAttribute('data-index')+1)) {
			this.classList.value = 'active';	
		}
	})
  $('.icon-plus-vertical_line > span > div')[0].setAttribute('style', `height: ${(+self.getAttribute("data-index")+1)*40}px`)
  $('.accordion-container > div > div').each(function() {
	 	this.setAttribute('class', 'accordion-tab');
	 	this.parentElement.closest('div').classList.value = ""
		if (this.getAttribute('data-index') == (+self.getAttribute('data-index')+1)) {
				this.classList.value = 'accordion-tab active';
			 	this.parentElement.closest('div').classList.value = "accordion-wrapper-activated";
				if((+self.getAttribute('data-index')+1) == 1 ) {
					$('.accordion-content-footer > p > a:first-child').css('visibility','hidden');
				}
				else {
				 $('.accordion-content-footer > p > a:first-child').css('visibility','visible');
				}
 				if((+self.getAttribute('data-index')+1) == tabsLength ) {
					$('.accordion-content-footer > p > a:last-child').css('visibility','hidden');
				}
				else {
				 $('.accordion-content-footer > p > a:last-child').css('visibility','visible');
				} 
	   } 
	})
  e.preventDefault()  
})

$('.previous-tab').on('click', function(e) {
  let self = this;
  let tabsLength = $(".subOptions li").length;
  e.stopPropagation()  
  $('.subOptions li').each(function() {
		this.classList.value = '';
    if(this.getAttribute('data-index') == (+self.getAttribute('data-index')-1)) {
			this.classList.value = 'active';	
		}
	}) 
  $('.icon-plus-vertical_line > span > div')[0].setAttribute('style', `height: ${(+self.getAttribute("data-index")-1)*40}px`)
  $('.accordion-container > div > div').each(function() {
	 	this.setAttribute('class', 'accordion-tab');
	 	this.parentElement.closest('div').classList.value = ""
		if (this.getAttribute('data-index') == (+self.getAttribute('data-index')-1)) {
				this.classList.value = 'accordion-tab active';
			 	this.parentElement.closest('div').classList.value = "accordion-wrapper-activated";
				if((+self.getAttribute('data-index')-1) == 1 ) {
					$('.accordion-content-footer > p > a:first-child').css('visibility','hidden');
				}
				else {
				 $('.accordion-content-footer > p > a:first-child').css('visibility','visible');
				}
 				if((+self.getAttribute('data-index')-1) == tabsLength ) {
					$('.accordion-content-footer > p > a:last-child').css('visibility','hidden');
				}
				else {
				 $('.accordion-content-footer > p > a:last-child').css('visibility','visible');
				}
	    } 
	})
  e.preventDefault()
})   

 $('.subOptions li').on('click', function(e) {
	e.stopPropagation();
	let self = this;
	let tabsLength = $(".subOptions li").length;
	if (self.classList.value === 'active') {
		$('.icon-plus-vertical_line > span > div')[0].setAttribute('style', `height: 0px`)
		self.classList.value = ''
		$('.accordion-container > div > div').each(function() {
			this.setAttribute('class', 'accordion-tab');
			this.parentElement.closest('div').classList.value = ""
		})
	} else {
		$('.subOptions li').each(function() {
			this.classList.value = '';
		})
	  $('.icon-plus-vertical_line > span > div')[0].setAttribute('style', `height: ${+self.getAttribute("data-index")*40}px`)
		$('.accordion-container > div > div').each(function() {
			 this.setAttribute('class', 'accordion-tab');
			 this.parentElement.closest('div').classList.value = ""
			if (this.getAttribute('data-index') === self.getAttribute('data-index')) {
					this.classList.value = 'accordion-tab active';
					self.classList.value = 'active';
					 this.parentElement.closest('div').classList.value = "accordion-wrapper-activated";
					if(self.getAttribute('data-index') == 1 ) {
						$('.accordion-content-footer > p > a:first-child').css('visibility','hidden');
					}
					else {
					 $('.accordion-content-footer > p > a:first-child').css('visibility','visible');
					}
					  if(self.getAttribute('data-index') == tabsLength ) {
	  					$('.accordion-content-footer > p > a:last-child').css('visibility','hidden');
					}
					else {
						 $('.accordion-content-footer > p > a:last-child').css('visibility','visible');
					} 
			} 
		})
	}

    e.preventDefault();
}) 

    $('.accordion-container > div > div').on('click', function(e) {
	e.stopPropagation();
	let self = this;
    if( e.currentTarget.classList.value === 'accordion-tab active') {
    e.currentTarget.classList.value = 'accordion-tab';
    e.currentTarget.parentElement.closest('div').classList.value = '';
	$('.subOptions li').each(function(){
		this.classList.value = '';
		if(this.getAttribute('data-index') === self.getAttribute('data-index')) {
			this.classList.value = '';	
		}
	})
	$('.icon-plus-vertical_line > span > div')[0].setAttribute('style', `height: 0px;`);
  } else {
	let tabsLength = $(".subOptions li").length;
	$('.accordion-container > div > div').each(function() {
		this.setAttribute('class', 'accordion-tab');
	 	this.parentElement.closest('div').classList.value = ""	
	})
     self.classList.value = 'accordion-tab active';    
	$('.subOptions li').each(function(){
		this.classList.value = '';
		if(this.getAttribute('data-index') === self.getAttribute('data-index')) {
			this.classList.value = 'active';	
		}
	})
  	$('.icon-plus-vertical_line > span > div')[0].setAttribute('style', `height: ${+this.getAttribute("data-index")*40}px`);
 	this.parentElement.closest('div').classList.value = "accordion-wrapper-activated"
 	if(self.getAttribute('data-index') == 1 ) {
		$('.accordion-content-footer > p > a:first-child').css('visibility','hidden');
	}
	else {
		$('.accordion-content-footer > p > a:first-child').css('visibility','visible');
	}
	if(self.getAttribute('data-index') == tabsLength ) {
  		$('.accordion-content-footer > p > a:last-child').css('visibility','hidden');
	}
	else {
	 $('.accordion-content-footer > p > a:last-child').css('visibility','visible');
	}
  }
	
	e.preventDefault();
})


function checkOffset() {
    if($('#guidance_navigation').offset().top + $('#guidance_navigation').height() 
                                           >= $('#footer-main').offset().top - 1) {
        $('#guidance_navigation').addClass('sticky-fixed')
}
    if($(document).scrollTop() + window.innerHeight < $('#footer-main').offset().top)
        $('#guidance_navigation').removeClass('sticky-fixed');
}
$(document).scroll(function() {
    checkOffset();
});


</script>