Is there a better way to use dynamic text while still showing example text in Wappler editor?

Wappler General
1

I like to have example text while editing my site, but this is causing UX issues on the site because the sample text is shown for a second while it’s being replaced.

Here’s my current code.
<h6 dmx-text="userDetails.data.getUserDetails[0].first_name">Samantha</h6>

Here’s an example showing the flicker as I navigate from the home page to the project page. Notice the name in the upper right.

3

Maybe you ca try using the default formatter:

<h6 dmx-text="userDetails.data.getUserDetails[0].first_name.default('Samantha')"></h6>
1 Like
4

Oh, that’s what the default formatter does. Very cool.

5

The default formatter adds a default value, if the dynamic value doesn’t return anything :slight_smile:

2 Likes
6

An alternative, if you have not already done so, is to use the Preloader component. This will give your data time to load by showing a spinner during the loading cycle.

7

@Teodor, I'll continue to test, but this didn't work for me. No values show if I use the code you provided.

8

Is the data formatter js included on your page?

9

Looks like that is added only if I use the formatter to add the Default. Copying and pasting the code does not trigger the formatter.js to be added.

Not sure if this is relevant, but I’m trying to do this in an include. It does look like it adds a reference, but my concern is that I use this include on all pages, not just the “Index” page.

<!-- Wappler include head-page="index.php" appconnect="local" is="dmx-app" bootstrap4="cdn" fontawesome_4="local" jquery_33="cdn" components="{&quot;dmxFormatter&quot;:{}}"-->

10

@teodor, I now have it working on my Index page, but I’m trying to use includes and there seems to be a gap in logic. Maybe we should make this into a separate post/ticket?

I want to use the _header.php include on ALL of my pages.
image

The problem I’m noticing is that the include has a reference at the top to one page – which makes the include very ineffective for use across multiple pages.

image
image.png1310×88 9.47 KB

11

I ripped out more of the code on the index page and put it in the _header.php include. I also removed the “Wappler Include” line at the top of the include. This appears to be working, outside of a syntax error showing in the editor because I did not move the <head> tag into the _header.php include, only a certain set of lines before the </head> tag.

It would be really nice if I could pull everything in the below code into the _header.php file, but I would need a way to make the “content” values in the meta tags dynamic. Possibly reading from a db table that’s unique for each page.

<?php
require('dmxConnectLib/dmxConnect.php');

$app = new \lib\App();

$app->exec(<<<'JSON'
{
	"steps": [
		"Connections/videdit_db_dev",
		"SecurityProviders/siteSecurity",
		{
			"module": "auth",
			"action": "restrict",
			"options": {"loginUrl":"signin","forbiddenUrl":"signin","provider":"siteSecurity"}
		}
	]
}
JSON
, TRUE);
?>
<!DOCTYPE html>
<html lang="en"><head>
  <meta name="ac:route" content="/">
  <base href="/">
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Twitter -->
<meta name="twitter:site" content="@themepixels">
<meta name="twitter:creator" content="@themepixels">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Slim">
<meta name="twitter:description" content="Premium Quality and Responsive UI for Dashboard.">
<meta name="twitter:image" content="http://themepixels.me/slim/img/slim-social.png">
<!-- Facebook -->
<meta property="og:url" content="http://themepixels.me/slim">
<meta property="og:title" content="Slim">
<meta property="og:description" content="Premium Quality and Responsive UI for Dashboard.">
<meta property="og:image" content="http://themepixels.me/slim/img/slim-social.png">
<meta property="og:image:secure_url" content="http://themepixels.me/slim/img/slim-social.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="600">
<!-- Meta -->
<meta name="description" content="Premium Quality and Responsive UI for Dashboard.">
<meta name="author" content="ThemePixels">
<title>Slim Responsive Bootstrap 4 Admin Template</title>

<?php include '_header.php';?><!-- end-wappler-include -->