nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Customizing the aikau search placeholder

iwkse

I have this problem with customizing the aikau search placeholder. I've created a share amp with maven and setting the extension like this to extend the SearchBox widget:

<extension>
<modules>
<module>
<id>Aikau SearchBox Customization</id>
<version>1.0</version>
<auto-deploy>true</auto-deploy>
<configurations>
<config evaluator="string-compare" condition="WebFramework" replace="false">
<web-framework>
<dojo-pages>
<packages>
<package name="header" location="js/header"/>
</packages>
</dojo-pages>
</web-framework>
</config>
</configurations>
</module>
</modules>
</extension>

with the structure in META-INF:

▾ js/
▾ header/
▾ i18n/
SearchBox.properties
SearchBox.js

having SearchBox.js:

define(["dojo/_base/declare", "alfresco/header/SearchBox"],
function(declare, SearchBox) {
return declare([SearchBox], {
i18nRequirements: [ {i18nFile: "./i18n/SearchBox.properties"} ],
});
});

and the properties file:

search.instruction=he who seeks shall find, Seek and ye shall find

Any idea why the properties is not overridden?

[edit]

Never mind..I just find it out. Last time I was searching this aikau didn't allow to override the placeholder but this is been added! Thanks Dave Draper‌ !

No need now to extend the widget but it's enough to set a customization extension and modify like:

var searchBox = widgetUtils.findObject(model.jsonModel.widgets, "id", "HEADER_SEARCH");
searchBox.config.placeholder= "search-custom.label";

Find more posts tagged with

Accepted answers

ddraper

Glad you were able to resolve the problem! Let me know if there are any other issues I can help with.

All comments

ddraper

Glad you were able to resolve the problem! Let me know if there are any other issues I can help with.

iwkse

Thanks!

Just for a matter of curiosity. This way to extend a widget is still valid (even if I didn't manage to let it works)? For example, before the aikau change you suggested me to extend the widget and just point the 18nRequirements: [ {i18nFile: "./i18n/my_custom.properties"} ]

Is this approach still valid?

ddraper

Yes, that's a still a perfectly valid way to extend and provide additional properties (or override properties).

iwkse

I'm asking because when I tried as the first post it didn't work for me. Not sure why

iwkse

I've just uploaded this share amp project:

https://ufile.io/34121

nwali

I am using Alfresco Community 5.0.d and I have added below line in share-header.get.js then I get error on login.

var searchBox = widgetUtils.findObject(model.jsonModel.widgets, "id", "HEADER_SEARCH");

where else if I add below then nothing happens:

var searchBox = widgetUtils.findObject(model.jsonModel, "id", "HEADER_SEARCH");

Also I have used widgetUtils.deleteObjectFromArray(model.jsonModel, "id", "HEADER_REPOSITORY"); then works fine to remove the repository.

whats difference between model.jsonModel and model.jsonModel.widgets ??

so far in share-header.get.js file:

widgetUtils.deleteObjectFromArray(model.jsonModel, "id", "HEADER_REPOSITORY");

var headerSearch = widgetUtils.findObject(model.jsonModel, "id", "HEADER_SEARCHBOX");

if (headerSearch) {

headerSearch.config.showPeopleResults = false;
headerSearch.config.placeholder="Search files";
}

How can I remove the people suggestion ?

iwkse

Hi,

I think you can't change this property like this because it's not being exposed as the placeholder is. I think you need to go though the module override for change this property. But I had problems with the module override, it didn't work for me. I uploaded an example project to let ‌ looks at it but it seems the link is expired. Please if you're able to do it with the override method I am interested to know, because I couldn't do it. I ask you for a pleasure, since I don't have this example project anymore, if you could upload here an example aikau custom override module you will be really helpful.

Thank you

nwali

Hi,

I followed this search custom properties? and was able to remove the people suggestion from the live-search.

I have put in summaries way in Modify live search in Alfresco Commmunity 5.0.d - Stack Overflow but I'm still trying to find way to override the placeholder in search box.

If any idea then please let me know.

Thanks.

nwali

I have share-header.get.js with following code:

if (!user.isAdmin)
{

widgetUtils.deleteObjectFromArray(model.jsonModel, "id", "HEADER_REPOSITORY");
}

var searchBox = widgetUtils.findObject(model.jsonModel.widgets, "id", "HEADER_SEARCH");
searchBox.config.placeholder= "test";

But nothing is changed and placeholder of search box is old one.

How to change the placeholder in search input?

Thanks.

iwkse

Hi,

For the placeholder you have two ways and it depends on the aikau version. If the aikau version is sufficiently new, you can use the method I've explained (just setting the property as you were trying to do for the showPeopleResults. If it's an older version of aikau you will have to override with an extension. WIth this method I was never able to be successful.

HTH

sharix

I cannot customize the default text in the searchbox by creating an amp that works. I am using the latest version of Aikau and have the enterprise version of Alfresco. I tried all the suggestions above but I must be missing something for nothing works.

I tried this -

Created .xml file within web-extension/site-data/extensions/share-module.xml

<extension>
<modules>
    <module>
      <id>Searchbox</id>
      <version>1.0</version>
      <auto-deploy>true</auto-deploy>
      <customizations>
        <customization>
          <targetPackageRoot>org.alfresco.share.header</targetPackageRoot>
          <sourcePackageRoot>com.menu</sourcePackageRoot>
        </customization>
      </customizations>
    </module>
</modules>
</extension>

Created .js file within web-extension/site-webscripts/com/menu/share-header.get.js

var searchBox = widgetUtils.findObject(model.jsonModel.widgets, "id", "HEADER_SEARCH");
searchBox.config.placeholder= "search-custom.label";

I also tired this method -

custom-searchbox.js withal the associated files -

define(["dojo/_base/declare", "alfresco/header/SearchBox"],
    function(declare, SearchBox) {
           return declare([SearchBox], {
               i18nRequirements: [ {i18nFile: "./i18n/searchbox.properties"} ],
           });
});

All my other amps are working but this one. I can change the text by modifying the core file in Alfresco so I know it can be done. We plan on upgrading our enterprise account so it is important to have a clear upgrade path with amps that work.

Any and all help is appreciated.

Thanks

sharix