Badge Docs Review #434
Open
Badge Docs Review #434
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
v-excelsior
suggested changes
Apr 6, 2023
| # Badge | ||
|
|
||
| This is a component of Backendless [UI-Builder](https://backendless.com/developers/#ui-builder) designer. It generates a small badge to the corner of its child(ren). Any text, custom image or Material icon can be as a content of the component. It is also possible to combine them. | ||
| The Badge component allows displaying specific data in the corner of the selected image/icon. The data must be a number or a string value which is fetched from the database and projected up into the right corner. This component is available in the [UI-Builder](https://backendless.com/developers/#ui-builder). |
There was a problem hiding this comment.
The data must be a number or a string value which is fetched from the database and projected up into the right corner.
Are you sure in must here? I think it could be absolutely any value from anywhere, not just fetched from database.
| <img src="./example-images/component_badge_4.png" alt="settings" width="780"/> | ||
| </p> | ||
|
|
||
| To display a specific value in the corner of the badge, you must set the **Badge Label Logic** handler in the Codeless. |
There was a problem hiding this comment.
you must set the Badge Label Logic
But it could be setting too.
Comment on lines
+21
to
+23
| <p align="center"> | ||
| <img src="./example-images/component_badge_1.png" alt="settings" width="780"/> | ||
| </p> |
There was a problem hiding this comment.
No need in this image. Your description is exhaustive.
Comment on lines
+19
to
+41
| To display a specific value in the corner of the badge, you must set the **Badge Label Logic** handler in the Codeless. | ||
|
|
||
| <p align="center"> | ||
| <img src="./example-images/component_badge_1.png" alt="settings" width="780"/> | ||
| </p> | ||
|
|
||
| Suppose you have a data table where the number of unread messages is stored: | ||
|
|
||
| <p align="center"> | ||
| <img src="./example-images/component_badge_2.png" alt="settings" width="780"/> | ||
| </p> | ||
|
|
||
| To display the number of unread messages in the corner of your badge, you have to set the Logic that fetches the data from the table. The example below retrieves an object from the data table called **cloudMessages**, and then the value of the property **unreadMessages** is extracted from the object: | ||
|
|
||
| <p align="center"> | ||
| <img src="./example-images/component_badge_3.png" alt="settings" width="780"/> | ||
| </p> | ||
|
|
||
| As the result, once the page is loaded, the number of unread messages is displayed in the corner of the badge: | ||
|
|
||
| <p align="center"> | ||
| <img src="./example-images/component_badge_5.png" alt="settings" width="780"/> | ||
| </p> |
There was a problem hiding this comment.
Move to bottom. There should be an examples section.
|
|
||
| Then it is necessary to determine the contents of the component. Go to UI-Builder designer and specify one of the content field or combine them if you need. The component will be displayed with default properties. If you need even more flexibility, make other changes to its appearance in UI-Builder designer or by codeless logic. | ||
| <p align="center"> | ||
| <img src="./example-images/component_badge_4.png" alt="settings" width="780"/> |
There was a problem hiding this comment.
use meaningful image names
Comment on lines
+31
to
+34
| To display the number of unread messages in the corner of your badge, you have to set the Logic that fetches the data from the table. The example below retrieves an object from the data table called **cloudMessages**, and then the value of the property **unreadMessages** is extracted from the object: | ||
|
|
||
| <p align="center"> | ||
| <img src="./example-images/component_badge_3.png" alt="settings" width="780"/> |
There was a problem hiding this comment.
I't very bad practice. This handler will run on every render and run a bunch of requests. Contact component creator to get right example for this case.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
No description provided.