Making changes
We are finally ready to change the texts. Let's do it properly!
This article assumes we have associated an application and are able to edit its texts. If that's not the case, head on to Getting started and make sure everything is configured properly.
By now your extension should look like this:
FlyCode Extension in "Browse" mode with Panel opened.
We can see two main parts of the extension: The small Menu with a few buttons and the collapsible Panel. The first one allows you control the extension, while the latter provides additional options to edit your texts, as well as helps you review your changes – more on that soon!
While the selected button is this cursor:
, we're in "Browse" mode. In this mode all you can do is browse the most up-to-date version your website.
What does "most up-to-date version" mean? If you have any existing drafts in your application in FlyCode, we will change every correlated text to be up-to-date, so you should see the draft texts instead of the original ones wherever a change was made. Think of it as a "preview" of how your changes will look once they go live.
✨
Example of original text, before the extension is launched.
On extension launch, we find and update contents to always show the newest version of the copy.
This does not mean that the extension made any permanent changes to your application. Once you close the extension or refresh the page, you will once again see the original copy. Preview of your drafts and requested changes are visible only while the extension is on.
Selecting the pen button
will move us to "Edit" mode.
Edit mode allows you to edit texts directly on the page. Below you can see an example video of how it works:
<video of a simple text edit>
We can differentiate texts which can be edited by the dashed border around them. You may have noticed, that when we changed the text, its border color was updated. This is done on purpose, to help us see the current status of a text at first glance.
Initially, most likely all of your texts will have the status "Live":
This is an editable text in Edit mode, by the teal border we can tell its status is Live.
If we modify a text, similar to how it works in the FlyCode platform, its status will be changed to "Draft". This will also update its border color:
Yellow border in the Edit mode means it's a draft.
Finally, if we request this draft in a Change Request, it will be marked red:
Text with "Change requested" status in Edit mode.
Once these changes are approved, this text will once again be "Live". In the Requesting changes we will go through the approval step and what does it mean exactly.
Additionally, while hovering with your cursor over these texts in Edit mode, you will see a small bar that contains basic information about the text. This element provides few action buttons which we will discuss later in Detailed UI overview.
Action Bar visible when hovering over or clicking an editable text.
It is important to mention, that not all texts in your application may be editable through this option. Currently we are able to correctly correlate only the unique texts in an app.
That means we will most likely mark texts that repeat (most common examples are "Back", "Cancel", "Submit" and so on) with a grey border:
This text cannot be edited directly in the page.
The grey color means that it is a repeating text and we are aware of its existence, but since it appears multiple times in the application, we cannot guarantee that we will update the correct one.
It's important to remember such texts can always be modified from the Panel. If we are certain which text (e.g. which "Purchase Now") should be modified, we can find and modify it as well. Before that though, we need to make sure we're viewing All texts and not Current Page, as the latter only shows editable texts on the current page you are viewing.
Filtering texts by "Purchase" and editing one of them in the Panel.
One last thing to mention is that even if we change a repeating text, we will not see the change in the page, because we are not currently able to tell which of those texts was updated.
- 1.I have dozens of texts in the page I'm viewing, yet only a few of them are marked with a border in Edit mode.Please remember that when configuring the application in FlyCode, you're selecting which texts we should look for. The possible options are either: hardcoded texts or translations from resource files. It is very likely that the current page (or most pages) uses e.g. hardcoded texts but the app is configured to show resource files' translations.Another reason might be that the texts you see – but cannot edit – are inside an element's attributes. Currently, in FlyCode we support editing only texts in elements, meaning it is impossible to update texts which are eg. passed as attributes to a component or element (such as placeholders, alt texts, or custom attributes). Let us know if this feature is important to you.
- 2.I have updated a text and its status is a Draft / Change requested, but when I refresh the page it's gone?Draft changes made to your copy are saved in FlyCode to revise them later (by creating a Change Request). In the Requesting changes page we will go through that process.When we create a Change Request, FlyCode creates a Pull request as well. In order to see your changes in the website, the Pull request with changes needs to be merged, and your application needs to be deployed. Until then, you can always see your progress while the extension is opened.
- 3.On some of my pages it says "No texts found" in the Panel.This means the current page you are visiting has no texts that can be edited using FlyCode. By default, the Panel shows unique texts found in the current page. This option can be changed to viewing all texts by selecting the option "All texts" from the dropdown at the top of the Panel. "All texts" will display all the texts in the application, both unique and repeating ones.
- 4.I want to edit a text but the Panel is in the way...We understand the Panel is a big piece of UI, that's why there are two ways you can avoid this issue. The Menu button contains a "show/hide Panel" button:that allows you to hide it.
Additionally, at the top corner of the Panel you can find a similar button:, which will permanently move the Panel to the other side. You can always change its position however you like it. In Detailed UI overview we show these options and more!
☺
Last modified 4mo ago